Front-end devs see it all the time: a video that plays locally but fails in production, or it works in Chrome yet breaks in Safari with a cryptic \u201cThe media could not be loaded\u201d message. The community often rallies around the same root causes, which makes this a great thread to summarize the most common fixes and a clean debugging workflow.<\/p>\n\n\n\n
Hi all,<\/em> HTML5 video errors usually fall into four categories: aborted (1), network (2), decode (3), and source not supported (4). The fastest path to a fix is to confirm the file is encoded and served correctly, ensure the browser has a compatible source, and validate that the server is ready for partial delivery and cross-origin access.<\/p>\n\n\n\n If you see decode errors or Safari-only failures, re-encode and fast-start the file so play begins before full download:<\/p>\n\n\n For more background on the tool and its trade-offs, see FFmpeg features, use cases, pros and cons<\/a>.<\/p>\n\n\n\n If your HTML and video are on different origins, allow cross-origin video with a permissive response header and add crossorigin to the tag if needed.<\/p>\n\n\n Avoid mixed content. Serve both the page and video over HTTPS.<\/p>\n\n\n\n After you fix your pipeline, you can simplify delivery and cross-browser coverage by letting a media platform handle formats, codecs, and bitrates. For example, Cloudinary can transcode upon upload, pick the best format and quality, and deliver via a single URL. This is helpful when you manage many media assets<\/a> and need consistent playback across devices.<\/p>\n\n\n
I keep running into HTML5 video issues across browsers and I see different error codes in the console or via the video element. What is the reliable, step-by-step approach for how to fix HTML5 video error code problems like MEDIA_ERR_SRC_NOT_SUPPORTED (4), NETWORK (2), or DECODE (3)? I want to know how to diagnose the root cause, fix encoding, headers, CORS, and set up fallbacks, so the video plays consistently on desktop and mobile. Any tips and sample code would be appreciated.<\/em><\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
1) Use compatible formats and codecs<\/h3>\n\n\n\n
\n
<video<\/span> id<\/span>=\"player\"<\/span> controls<\/span> preload<\/span>=\"metadata\"<\/span> playsinline<\/span>><\/span>\n\u00a0 <source<\/span> src<\/span>=\"\/videos\/video.mp4\"<\/span> type<\/span>=\"video\/mp4\"<\/span>><\/span>\n\u00a0 <source<\/span> src<\/span>=\"\/videos\/video.webm\"<\/span> type<\/span>=\"video\/webm\"<\/span>><\/span>\n\u00a0 Sorry, your browser does not support embedded videos.\n<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n2) Re-encode cleanly with FFmpeg<\/h3>\n\n\n\n
# MP4<\/span> H<\/span>.264<\/span> + AAC<\/span> with<\/span> fast<\/span> start<\/span>\nffmpeg<\/span> -i<\/span> input<\/span>.mov<\/span> -c<\/span>:v<\/span> libx264<\/span> -profile<\/span>:v<\/span> high<\/span> -level<\/span> 4.1<\/span> -pix_fmt<\/span> yuv420p<\/span> \\\n\u00a0 -b<\/span>:v<\/span> 2500k<\/span> -c<\/span>:a<\/span> aac<\/span> -b<\/span>:a<\/span> 128k<\/span> -movflags<\/span> +faststart<\/span> output<\/span>.mp4<\/span>\n\n# Optional<\/span> WebM<\/span> (VP9<\/span> + Opus<\/span>)\nffmpeg<\/span> -i<\/span> input<\/span>.mp4<\/span> -c<\/span>:v<\/span> libvpx-vp9<\/span> -b<\/span>:v<\/span> 0 -crf<\/span> 32 -c<\/span>:a<\/span> libopus<\/span> -b<\/span>:a<\/span> 96k<\/span> output<\/span>.webm<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n3) Serve correct headers and support range requests<\/h3>\n\n\n\n
\n
\n
# Example Node.js partial content handler<\/span>\napp.get('\/video.mp4'<\/span>, (req, res) => {\n\u00a0 const<\/span> path = 'public\/video.mp4'<\/span>;\n\u00a0 const<\/span> stat = fs.statSync(path);\n\u00a0 const<\/span> range = req.headers.range;\n\n\u00a0 if<\/span> (!range) {\n\u00a0 \u00a0 res.writeHead(200<\/span>, { 'Content-Length'<\/span>: stat.size, 'Content-Type'<\/span>: 'video\/mp4'<\/span> });\n\u00a0 \u00a0 fs.createReadStream(path).pipe(res);\n\u00a0 \u00a0 return<\/span>;\n\u00a0 }\n\n\u00a0 const<\/span> [startStr, endStr] = range.replace(\/bytes=\/, ''<\/span>).split('-'<\/span>);\n\u00a0 const<\/span> start = parseInt(startStr, 10<\/span>);\n\u00a0 const<\/span> end = endStr ? parseInt(endStr, 10<\/span>) : stat.size - 1<\/span>;\n\u00a0 const<\/span> chunkSize = end - start + 1<\/span>;\n\n\u00a0 res.writeHead(206<\/span>, {\n\u00a0 \u00a0 'Content-Range'<\/span>: `bytes ${start}-${end}\/${stat.size}`,\n\u00a0 \u00a0 'Accept-Ranges'<\/span>: 'bytes'<\/span>,\n\u00a0 \u00a0 'Content-Length'<\/span>: chunkSize,\n\u00a0 \u00a0 'Content-Type'<\/span>: 'video\/mp4'<\/span>\n\u00a0 });\n\n\u00a0 fs.createReadStream(path, { start, end }).pipe(res);\n});<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n4) Fix CORS or mixed content problems<\/h3>\n\n\n\n
# Example response headers\nAccess-Control-Allow-Origin: *\nAccess-Control-Allow-Methods: GET, HEAD\n\n<video<\/span> controls<\/span> crossorigin<\/span>=\"anonymous\"<\/span>><\/span>...<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n5) Add runtime logging to see the real code<\/h3>\n\n\n
const<\/span> v = document<\/span>.getElementById('player'<\/span>);\nv.addEventListener('error'<\/span>, () => {\n\u00a0 const<\/span> m = {\n\u00a0 \u00a0 1<\/span>: 'MEDIA_ERR_ABORTED'<\/span>,\n\u00a0 \u00a0 2<\/span>: 'MEDIA_ERR_NETWORK'<\/span>,\n\u00a0 \u00a0 3<\/span>: 'MEDIA_ERR_DECODE'<\/span>,\n\u00a0 \u00a0 4<\/span>: 'MEDIA_ERR_SRC_NOT_SUPPORTED'<\/span>\n\u00a0 };\n\u00a0 const<\/span> code = v.error ? v.error.code : 0<\/span>;\n\u00a0 console<\/span>.error('Video error'<\/span>, code, m[code]);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n6) Browser specifics to keep in mind<\/h3>\n\n\n\n
\n
How Cloudinary can help<\/h3>\n\n\n\n
<!-- One URL, automatic format and quality selection -->\n<video<\/span> controls<\/span> preload<\/span>=\"metadata\"<\/span> playsinline<\/span>\n\u00a0 src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/f_auto,q_auto\/sample.mp4\"<\/span>><\/span><\/video<\/span>><\/span><\/span>\n\nUpload programmatically and let<\/span> transformations run server-side:\n\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> 'cloudinary'<\/span>;\n\ncloudinary.config({\n\u00a0 cloud_name<\/span>: process.env.CLOUD_NAME,\n\u00a0 api_key<\/span>: process.env.API_KEY,\n\u00a0 api_secret<\/span>: process.env.API_SECRET\n});\n\n\/\/ Transcoding happens in the cloud; you deliver the optimized URL<\/span>\nawait<\/span> cloudinary.uploader.upload('local\/path\/video.mp4'<\/span>, {\n\u00a0 resource_type<\/span>: 'video'<\/span>,\n\u00a0 folder<\/span>: 'videos'<\/span>\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nTL;DR<\/h3>\n\n\n\n
\n
Learn More<\/h2>\n\n\n\n