Common Video Playback Errors and How to Fix Them

A practical guide to diagnosing and fixing the most common video playback errors including CORS failures, codec issues, network errors, and more.

Common Video Playback Errors and Fixes

Video playback errors can be frustrating — both for developers and end users. This guide covers the most common issues you'll encounter and exactly how to fix them.

1. CORS Errors

Symptom: Video fails to load, browser console shows Cross-Origin Request Blocked.

Cause: The server hosting the video doesn't allow cross-origin requests from your domain.

Fix: Add the correct CORS headers on the video server:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, OPTIONS

Or for specific domains:

Access-Control-Allow-Origin: https://yourdomain.com

Test it: Use VideoLab's [Referrer Test](/referrer-test) tool to simulate cross-origin requests and see CORS errors in the debug panel.

2. Network Error (MediaError Code 2)

Symptom: Video player shows an error, MediaError.code === 2.

Cause: The video URL is inaccessible — 404, server down, or network timeout.

Fix:

• Verify the video URL is publicly accessible
• Check CDN configuration
• Ensure the URL doesn't require authentication

3. Decode Error (MediaError Code 3)

Symptom: Video loads but fails during playback, MediaError.code === 3.

Cause: The video codec is not supported by the browser, or the file is corrupt.

Fix:

• Re-encode with H.264/AAC for maximum compatibility
• Use a tool like FFmpeg: ffmpeg -i input.mkv -c:v libx264 -c:a aac output.mp4
• Provide WebM fallback for Firefox

4. Format Not Supported (MediaError Code 4)

Symptom: Browser immediately rejects the format.

Cause: Using a container/codec not supported by that browser.

Browser Compatibility Quick Reference:

5. Autoplay Blocked

Symptom: Video doesn't start playing automatically.

Cause: Modern browsers block autoplay with sound by default.

Fix:

// Always mute for autoplay
video.muted = true;
video.autoplay = true;

Or use the Intersection Observer to play when in view:

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) video.play();
});
observer.observe(video);

6. Referrer Blocked

Symptom: Stream loads in direct URL but fails when embedded on your site.

Cause: The video host checks the Referer HTTP header and blocks requests from unknown domains.

Fix:

• Contact the stream provider to whitelist your domain
• Use to suppress the referrer header
• Test different referrer policies using VideoLab's [Referrer Test tool](/referrer-test)

7. Buffering / Stalling

Symptom: Video plays but frequently pauses to buffer.

Cause: Insufficient bandwidth, high bitrate, or inefficient CDN.

Fix:

• Enable ABR (adaptive bitrate) — use HLS or DASH instead of a single MP4
• Lower the starting bitrate
• Move assets to a CDN geographically closer to users
• Check segment size — smaller segments (2–4s) allow faster quality switching

Using VideoLab to Debug

VideoLab's Video Debugger gives you a real-time diagnostic panel showing:

• ✅ **Connection status** — Loading, Playing, Buffering, Stalled
• ✅ **Error codes** — Exact MediaError code and description
• ✅ **CORS detection** — Flags cross-origin failures
• ✅ **Network log** — Timestamped event timeline
• ✅ **Export** — Download full debug log as JSON

Conclusion

Most video playback errors fall into one of these categories: CORS, network access, codec compatibility, or bitrate issues. Use VideoLab's debug panel to instantly identify the root cause and fix your video streams faster.