Skip to content

Browser HTML5 Video Not Playing Fix

DodaTech Updated 2026-06-24 3 min read

In this tutorial, you'll learn about Browser HTML5 Video Not Playing Fix. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

HTML5 video playback can fail due to unsupported codecs, missing MIME types, autoplay policy restrictions, or network issues. Modern browsers enforce strict autoplay policies and require specific video formats.

The Wrong Way

<!-- Missing type attributes, no fallback sources -->
<video src="video.avi" controls autoplay>
    Your browser does not support video.
</video>

Output:

# Video shows as black box or download prompt
# Console: "No video with supported format and MIME type found"
# Autoplay does not start

The Right Way

Provide multiple source formats with correct MIME types:

<video controls width="640" height="360" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <p>Your browser does not support HTML5 video.</p>
</video>

For autoplay (muted by default):

<video autoplay muted loop playsinline>
    <source src="background.mp4" type="video/mp4">
</video>

Step-by-Step Fix

1. Check video format compatibility

function checkVideoSupport() {
    const video = document.createElement("video");
    const formats = [
        {type: "video/mp4; codecs=avc1.42E01E", name: "H.264 MP4"},
        {type: "video/webm; codecs=vp8,opus", name: "WebM VP8"},
        {type: "video/webm; codecs=vp9", name: "WebM VP9"},
        {type: "video/ogg; codecs=theora", name: "Ogg Theora"}
    ];

    formats.forEach(f => {
        const supported = video.canPlayType(f.type);
        console.log(`${f.name}: ${supported}`);
    });
}

2. Handle autoplay restrictions

async function playVideo(videoElement) {
    try {
        // Must be muted for autoplay to work in most browsers
        videoElement.muted = true;
        await videoElement.play();
        console.log("Video playing");
    } catch (error) {
        if (error.name === "NotAllowedError") {
            console.log("Autoplay blocked, waiting for user interaction");
            // Show play button overlay
            showPlayButton(videoElement);
        }
    }
}

// Call with user gesture
document.body.addEventListener("click", () => {
    document.querySelectorAll("video").forEach(v => playVideo(v));
}, {once: true});

3. Verify MIME types on server

# Nginx MIME types for video
types {
    video/mp4 mp4;
    video/webm webm;
    video/ogg ogv;
    application/x-mpegURL m3u8;
    video/MP2T ts;
}

4. Use HLS for adaptive streaming

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="video" controls></video>
<script>
const video = document.getElementById("video");
if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource("https://example.com/stream.m3u8");
    hls.attachMedia(video);
}
</script>

5. Add posters and loading states

<video controls poster="thumbnail.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <!-- Spinner shown while video loads -->
    <div class="loading-spinner"></div>
</video>

Prevention Tips

  • Provide at least MP4 (H.264) and WebM formats for broad compatibility.
  • Mute autoplaying videos -- most browsers block unmuted autoplay.
  • Use preload="metadata" to avoid downloading the entire video before playback.
  • Serve video files with correct MIME types from your web server.
  • Implement a play button overlay for browsers that block autoplay.

Common Mistakes with video not playing

  1. Misunderstanding that String is [Char] with poor performance for large text operations
  2. Using foldl instead of foldl' causing stack overflow on large lists
  3. Forgetting deriving (Show, Eq) on custom data types needed for debugging

These mistakes appear frequently in real-world BROWSER code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ

### Why does video autoplay not work?

Modern browsers block autoplay with audio. Use muted for autoplay, or require user interaction (click/tap) to start playback. Chrome also requires a playsinline attribute on iOS.

What video formats do browsers support?

All modern browsers support MP4 (H.264) and WebM (VP8/VP9). Ogg Theora has limited support. For adaptive streaming, use HLS (Safari native, others via hls.js) or DASH.

How do I fix "no supported format" error?

Convert the video to MP4 with H.264 codec using FFmpeg: ffmpeg -i input.mov -c:v libx264 -crf 23 -c:a aac output.mp4. Also provide a WebM fallback.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.

← Previous Browser Service Worker Registration Error Fix Next → Browser WebSocket Unexpected Close Fix

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix