1. 从“视频放不出来”说起一个被低估的排查场景“HTML5 Video does not play in any browser”——这个标题我第一次看到的时候心里咯噔了一下。因为“any browser”这个词太绝对了绝对到让人怀疑提问者是不是漏掉了什么关键信息。但仔细一想这种场景其实非常常见你写了一个页面本地打开视频能播部署到服务器上就黑屏或者Chrome能播Safari死活不动再或者PC端一切正常手机上一片空白。这类问题的棘手之处在于它不像JavaScript报错那样会给你一个明确的堆栈信息。视频播放失败往往是静默的——没有报错弹窗没有控制台红字就是一个黑框或者一个破碎的图标。你只能靠经验去猜、去试、去逐层排除。我处理过不少类似的问题从个人博客的短视频嵌入到企业级后台的监控回放模块再到在线教育平台的课程视频播放。每一次排查都像是在做减法先排除最明显的可能性再一层层往下挖直到找到那个真正卡住播放的环节。这篇文章就把我这些年积累的排查思路和实操经验完整地梳理一遍不管你是刚接触HTML5视频的新手还是已经踩过几次坑的老手应该都能从中找到一些有用的东西。提示本文讨论的是HTML5video标签在浏览器中无法播放的通用排查方法不涉及任何特定平台或服务的配置。2. 先搞清楚浏览器到底在抱怨什么2.1 控制台不是万能的但不看控制台是万万不能的很多人遇到视频不播第一反应是去改代码、换格式、调参数。但最应该做的第一件事其实是打开开发者工具看Console面板有没有报错。Chrome、Firefox、Edge的开发者工具都能给出相当有用的线索。常见的报错信息有这么几类NotSupportedError: The element has no supported sources浏览器明确告诉你你提供的视频源它一个都不认识。这通常意味着格式或编码有问题。MEDIA_ERR_SRC_NOT_SUPPORTED和上面类似但更偏向于网络层面或MIME类型的问题。MEDIA_ERR_DECODE浏览器认识这个格式但解码失败了。可能是文件损坏也可能是编码参数太奇葩。MEDIA_ERR_NETWORK网络问题导致加载中断常见于大文件或服务器配置不当。MEDIA_ERR_ABORTED用户主动中断了加载一般不用太担心。但要注意有些情况下控制台是干净的什么错都不报视频就是不播。这种最让人头疼。这时候你需要用video元素的error属性来主动获取错误信息const video document.querySelector(video); if (video.error) { console.log(错误代码:, video.error.code); console.log(错误信息:, video.error.message); }error.code的值对应关系如下错误代码常量名含义1MEDIA_ERR_ABORTED加载被用户中止2MEDIA_ERR_NETWORK网络错误导致加载失败3MEDIA_ERR_DECODE解码失败文件可能损坏4MEDIA_ERR_SRC_NOT_SUPPORTED格式或源不被支持2.2 Network面板里的隐藏线索Console面板之外Network面板同样重要。你需要关注几个关键点状态码视频文件的HTTP状态码是不是200如果是404那说明路径写错了如果是403那是权限问题如果是206那是正常的范围请求说明服务器支持分段加载。Content-Type服务器返回的MIME类型是不是video/mp4、video/webm或video/ogg如果服务器返回的是application/octet-stream或者text/html浏览器可能就不会把它当作视频来处理。我遇到过好几次服务器把.mp4文件当成二进制流返回Chrome能勉强识别Safari直接拒绝播放。Content-Length文件大小对不对如果服务器返回的Content-Length是0或者明显偏小说明文件本身可能有问题。Range Requests视频播放通常需要服务器支持Range请求也就是返回206状态码。如果服务器不支持Range浏览器可能无法进行拖动进度条的操作甚至在某些情况下完全无法播放。你可以通过检查响应头里有没有Accept-Ranges: bytes来判断。2.3 一个容易被忽略的细节自动播放策略现代浏览器对自动播放有严格的限制。如果你给video标签加了autoplay属性但视频没有静音muted大多数浏览器会直接阻止播放。这不是bug是浏览器的策略。Chrome的自动播放策略大致是这样的如果视频没有音轨或者用户已经和页面有过交互点击、触摸等自动播放可以正常工作。否则autoplay会被忽略视频停在第一帧不动。解决办法很简单要么加muted属性要么等用户交互后再调用video.play()。但要注意video.play()返回的是一个Promise如果被浏览器拒绝你需要捕获这个错误video.play().catch(error { console.log(自动播放被阻止:, error); // 这里可以显示一个自定义的播放按钮 });3. 格式与编码HTML5视频最核心的兼容性战场3.1 容器格式和编码格式是两回事很多人会把“MP4”和“H.264”混为一谈其实它们是两个层面的东西。MP4是容器格式相当于一个盒子H.264是视频编码格式相当于盒子里的东西。同样一个MP4文件里面的视频编码可能是H.264也可能是H.265HEVC甚至可能是AV1。音频编码可能是AAC也可能是MP3或Opus。浏览器支持的是“容器编码”的组合。比如浏览器MP4 (H.264 AAC)WebM (VP8/VP9 Opus)Ogg (Theora Vorbis)Chrome支持支持支持Firefox支持支持支持Safari支持部分支持较新版本不支持Edge支持支持支持从这张表可以看出MP4 (H.264 AAC) 是兼容性最好的组合几乎所有现代浏览器都支持。但如果你用的是H.265编码的MP4Safari可能能播因为苹果推HEVC但Chrome和Firefox就不一定了。3.2 怎么确认视频的编码格式如果你手头有一个视频文件不确定它的编码格式可以用ffprobeFFmpeg套件的一部分来查看ffprobe -v error -show_entries streamcodec_name,codec_type -of defaultnoprint_wrappers1 input.mp4输出大概长这样codec_nameh264 codec_typevideo codec_nameaac codec_typeaudio如果看到codec_namehevc那就说明是H.265编码需要转码成H.264才能保证全浏览器兼容。转码命令也很简单ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags faststart output.mp4这里的-movflags faststart很关键它会把视频的元数据moov atom移到文件头部这样浏览器不用下载完整个文件就能开始播放。我见过不少视频在本地能播传到服务器上就不行了就是因为moov atom在文件尾部浏览器等不及。3.3 多格式回退的正确写法为了兼容不同浏览器标准的做法是提供多个格式的源video controls source srcvideo.mp4 typevideo/mp4 source srcvideo.webm typevideo/webm source srcvideo.ogv typevideo/ogg 你的浏览器不支持HTML5视频。 /video浏览器会按顺序尝试找到第一个它能播的就停下来。但这里有个坑type属性必须写对。如果你把WebM文件的type写成video/mp4浏览器可能会尝试用MP4解码器去解WebM结果就是失败。还有一个更隐蔽的坑有些服务器会对不存在的文件返回一个HTML错误页面比如404页面但状态码是200。浏览器拿到这个HTML文件发现不是视频就报MEDIA_ERR_SRC_NOT_SUPPORTED。这种情况在Network面板里看Content-Type就能发现——返回的是text/html而不是video/mp4。4. 服务器配置那些让你视频“莫名其妙”不播的元凶4.1 MIME类型配置错误这是最常见也最容易被忽略的问题。服务器需要正确地告诉浏览器“这个文件是什么类型”。如果MIME类型不对浏览器可能直接拒绝处理。以Nginx为例你需要在mime.types文件或者配置块里确保有以下映射types { video/mp4 mp4; video/webm webm; video/ogg ogv; }Apache的话可以在.htaccess里加AddType video/mp4 .mp4 AddType video/webm .webm AddType video/ogg .ogv如果你用的是对象存储比如各种云存储服务通常需要在控制台里手动设置文件的Content-Type。我遇到过好几次上传的MP4文件Content-Type是application/octet-streamChrome能猜出来是视频Safari就不行。4.2 Range请求支持视频播放和普通文件下载不一样浏览器通常会发起Range请求只获取文件的一部分。如果服务器不支持Range请求浏览器可能无法正常播放尤其是大文件。检查方法很简单用curl发一个带Range头的请求curl -I -H Range: bytes0-1023 https://example.com/video.mp4如果返回的是206 Partial Content说明支持Range。如果返回200 OK并且返回了整个文件说明不支持。Nginx默认是支持Range请求的但如果你在中间加了一些代理或者CDN可能会把这个特性弄丢。Apache需要确保mod_headers和mod_range模块是启用的。4.3 跨域问题CORS如果你的视频文件和页面不在同一个域名下就需要处理跨域问题。浏览器会检查视频文件的响应头里有没有Access-Control-Allow-Origin。location /videos/ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, HEAD, OPTIONS; add_header Access-Control-Allow-Headers Range; }注意如果视频需要携带Cookie或者认证信息Access-Control-Allow-Origin不能是*必须是具体的域名并且要加上Access-Control-Allow-Credentials: true。还有一个细节当浏览器发起Range请求时会带一个Range头这个头在CORS里属于“非简单头”需要服务器在Access-Control-Allow-Headers里明确允许。4.4 HTTPS混合内容问题如果你的页面是HTTPS的但视频源是HTTP的浏览器会阻止加载。这是混合内容Mixed Content策略。控制台会报类似这样的错Mixed Content: The page at https://example.com was loaded over HTTPS, but requested an insecure video http://example.com/video.mp4. This request has been blocked.解决办法就是把视频也放到HTTPS下或者用协议相对URL//example.com/video.mp4但后者现在也不太推荐了最好还是统一用HTTPS。5. 代码层面的常见错误与修复方案5.1 属性拼写和取值错误HTML5 video标签的属性看起来简单但拼错一个字母就可能导致整个功能失效。我见过最多的错误包括controls写成了controlautoplay写成了autoPlayHTML属性不区分大小写但有些人会在JavaScript里搞混muted写成了mutepreload的值写成了auto、metadata、none之外的东西还有一个经典问题source标签的src属性写错了路径。相对路径和绝对路径搞混或者大小写不一致Linux服务器区分大小写Windows不区分。这种问题在本地开发时不容易发现一部署就暴露。5.2 JavaScript控制播放的时序问题如果你用JavaScript来控制播放时序很重要。比如const video document.querySelector(video); video.src video.mp4; video.play(); // 这行可能会失败因为设置src之后浏览器需要时间去加载元数据。直接调用play()可能会因为视频还没准备好而失败。正确的做法是监听canplay或loadedmetadata事件const video document.querySelector(video); video.src video.mp4; video.addEventListener(canplay, () { video.play().catch(e console.log(播放失败:, e)); });或者用loadedmetadata这个事件触发时视频的尺寸和时长已经知道了但可能还没足够的数据来播放。canplay更稳妥一些。5.3 动态创建video元素的坑有些场景下你需要用JavaScript动态创建video元素比如做视频预览或者自定义播放器。这时候要注意const video document.createElement(video); video.src video.mp4; video.controls true; document.body.appendChild(video);这段代码看起来没问题但在某些浏览器里动态创建的video元素如果没有显式设置preload属性可能不会自动加载。加上video.preload auto会更保险。还有一个坑如果你在video元素还没插入DOM之前就调用play()有些浏览器会拒绝。所以顺序应该是先appendChild再play。5.4 移动端的特殊限制移动端浏览器对视频播放有额外的限制。iOS Safari尤其严格默认情况下视频不会内联播放inline会全屏播放。需要加playsinline属性。自动播放几乎总是被阻止除非视频是muted的。同时播放多个视频会被阻止。video controls playsinline muted autoplay source srcvideo.mp4 typevideo/mp4 /videoAndroid上的情况稍微好一些但不同厂商的浏览器行为差异很大。有些国产浏览器会用自己的播放器内核对标准HTML5 video的支持参差不齐。6. 排查链路一个真实案例的完整复盘6.1 问题描述之前帮一个朋友排查过一个问题他做了一个摄影作品展示页视频在本地用Chrome打开一切正常但部署到服务器后Chrome和Safari都播不了Firefox偶尔能播但很卡。6.2 第一步确认文件本身没问题先让他把服务器上的视频文件下载下来用本地播放器打开确认文件没有损坏。然后用ffprobe检查编码codec_nameh264 codec_typevideo codec_nameaac codec_typeaudio编码没问题H.264 AAC兼容性最好的组合。6.3 第二步检查Network面板打开Chrome开发者工具的Network面板刷新页面找到视频请求。发现状态码是200不是206Content-Type是application/octet-stream没有Accept-Ranges: bytes响应头这就找到了两个问题MIME类型不对而且服务器不支持Range请求。6.4 第三步检查服务器配置他用的是一台Nginx服务器。查看配置文件后发现视频文件所在的目录没有单独配置MIME类型Nginx用了默认的application/octet-stream。而且他为了“优化性能”在Nginx前面加了一层代理代理层没有透传Range请求。6.5 第四步修复在Nginx配置里加上location /videos/ { types { video/mp4 mp4; } add_header Accept-Ranges bytes; }然后调整代理配置确保Range头能透传。重启Nginx后视频正常播放。6.6 经验总结这个案例里问题其实不止一个而是多个小问题叠加在一起。如果只解决了MIME类型Range请求的问题还在大视频可能还是播不了。排查的时候要有耐心一层一层往下查不要找到一个可能的原因就停下来。7. 那些文档里不会写的实操心得7.1 视频文件本身的问题往往最容易被忽略很多人遇到视频不播第一反应是去改代码、调服务器但有时候问题就出在视频文件本身。比如文件在传输过程中损坏了尤其是用FTP上传时没有用二进制模式视频的moov atom在文件尾部导致浏览器需要下载完整个文件才能开始播放视频的码率太高浏览器解码不过来尤其是在低端设备上我现在的习惯是拿到一个视频文件先用ffprobe看一眼再用ffmpeg重新封装一遍不重新编码只是调整容器结构确保moov atom在文件头部ffmpeg -i input.mp4 -c copy -movflags faststart output.mp4这个操作很快因为不需要重新编码只是把元数据挪个位置。7.2 不要迷信“万能格式”网上很多文章会说“用MP4就对了”但MP4只是一个容器里面的编码才是关键。H.264 AAC的MP4兼容性最好但如果你用的是H.265或者AV1兼容性就会打折扣。所以每次导出视频的时候都要确认编码格式不要只看扩展名。7.3 测试的时候要用真实环境本地开发环境往往太“干净”了很多问题暴露不出来。比如本地文件系统不涉及MIME类型和Range请求本地没有跨域问题本地网络速度快码率高一点也能播所以视频功能一定要在真实的服务器环境里测试而且要用不同的浏览器和设备测。我一般至少会测Chrome、Firefox、Safari这三个移动端至少测iOS Safari和Android Chrome。7.4 善用浏览器的媒体面板Chrome开发者工具有一个“Media”面板可以查看当前页面所有媒体元素的详细信息包括播放状态、缓冲进度、错误信息等。这个面板在排查视频问题时非常有用但很多人不知道它的存在。打开方式开发者工具 → 更多工具 → Media。或者按Esc打开抽屉面板在左侧菜单里找Media。7.5 日志和监控不能少如果你的网站有大量视频内容建议在前端加上视频播放失败的监控。可以通过监听error事件把错误信息上报到日志系统video.addEventListener(error, (e) { const error video.error; // 上报错误代码、视频URL、浏览器信息等 reportError({ code: error.code, message: error.message, src: video.currentSrc, userAgent: navigator.userAgent }); });这样当用户反馈视频播不了的时候你能快速定位是哪些视频、哪些浏览器、什么错误类型而不是靠猜。8. 关于“any browser”这个说法的再思考回到标题里的“any browser”其实在实际排查中真正“所有浏览器都不播”的情况反而少见。更常见的是“某些浏览器不播”或者“某些设备不播”。如果真的所有浏览器都不播那问题大概率出在文件本身或者服务器配置上而不是浏览器兼容性。我个人的排查顺序一般是这样的先确认文件本身没问题用本地播放器和ffprobe再确认服务器配置没问题MIME类型、Range请求、CORS最后才去查代码层面的问题。这个顺序的好处是从最底层往上查避免在代码里绕圈子。视频播放这个问题说复杂也复杂说简单也简单。核心就是搞清楚浏览器需要什么、服务器给了什么、文件里有什么。这三者对齐了视频自然就能播。
HTML5视频无法播放？全浏览器兼容排查指南
1. 从“视频放不出来”说起一个被低估的排查场景“HTML5 Video does not play in any browser”——这个标题我第一次看到的时候心里咯噔了一下。因为“any browser”这个词太绝对了绝对到让人怀疑提问者是不是漏掉了什么关键信息。但仔细一想这种场景其实非常常见你写了一个页面本地打开视频能播部署到服务器上就黑屏或者Chrome能播Safari死活不动再或者PC端一切正常手机上一片空白。这类问题的棘手之处在于它不像JavaScript报错那样会给你一个明确的堆栈信息。视频播放失败往往是静默的——没有报错弹窗没有控制台红字就是一个黑框或者一个破碎的图标。你只能靠经验去猜、去试、去逐层排除。我处理过不少类似的问题从个人博客的短视频嵌入到企业级后台的监控回放模块再到在线教育平台的课程视频播放。每一次排查都像是在做减法先排除最明显的可能性再一层层往下挖直到找到那个真正卡住播放的环节。这篇文章就把我这些年积累的排查思路和实操经验完整地梳理一遍不管你是刚接触HTML5视频的新手还是已经踩过几次坑的老手应该都能从中找到一些有用的东西。提示本文讨论的是HTML5video标签在浏览器中无法播放的通用排查方法不涉及任何特定平台或服务的配置。2. 先搞清楚浏览器到底在抱怨什么2.1 控制台不是万能的但不看控制台是万万不能的很多人遇到视频不播第一反应是去改代码、换格式、调参数。但最应该做的第一件事其实是打开开发者工具看Console面板有没有报错。Chrome、Firefox、Edge的开发者工具都能给出相当有用的线索。常见的报错信息有这么几类NotSupportedError: The element has no supported sources浏览器明确告诉你你提供的视频源它一个都不认识。这通常意味着格式或编码有问题。MEDIA_ERR_SRC_NOT_SUPPORTED和上面类似但更偏向于网络层面或MIME类型的问题。MEDIA_ERR_DECODE浏览器认识这个格式但解码失败了。可能是文件损坏也可能是编码参数太奇葩。MEDIA_ERR_NETWORK网络问题导致加载中断常见于大文件或服务器配置不当。MEDIA_ERR_ABORTED用户主动中断了加载一般不用太担心。但要注意有些情况下控制台是干净的什么错都不报视频就是不播。这种最让人头疼。这时候你需要用video元素的error属性来主动获取错误信息const video document.querySelector(video); if (video.error) { console.log(错误代码:, video.error.code); console.log(错误信息:, video.error.message); }error.code的值对应关系如下错误代码常量名含义1MEDIA_ERR_ABORTED加载被用户中止2MEDIA_ERR_NETWORK网络错误导致加载失败3MEDIA_ERR_DECODE解码失败文件可能损坏4MEDIA_ERR_SRC_NOT_SUPPORTED格式或源不被支持2.2 Network面板里的隐藏线索Console面板之外Network面板同样重要。你需要关注几个关键点状态码视频文件的HTTP状态码是不是200如果是404那说明路径写错了如果是403那是权限问题如果是206那是正常的范围请求说明服务器支持分段加载。Content-Type服务器返回的MIME类型是不是video/mp4、video/webm或video/ogg如果服务器返回的是application/octet-stream或者text/html浏览器可能就不会把它当作视频来处理。我遇到过好几次服务器把.mp4文件当成二进制流返回Chrome能勉强识别Safari直接拒绝播放。Content-Length文件大小对不对如果服务器返回的Content-Length是0或者明显偏小说明文件本身可能有问题。Range Requests视频播放通常需要服务器支持Range请求也就是返回206状态码。如果服务器不支持Range浏览器可能无法进行拖动进度条的操作甚至在某些情况下完全无法播放。你可以通过检查响应头里有没有Accept-Ranges: bytes来判断。2.3 一个容易被忽略的细节自动播放策略现代浏览器对自动播放有严格的限制。如果你给video标签加了autoplay属性但视频没有静音muted大多数浏览器会直接阻止播放。这不是bug是浏览器的策略。Chrome的自动播放策略大致是这样的如果视频没有音轨或者用户已经和页面有过交互点击、触摸等自动播放可以正常工作。否则autoplay会被忽略视频停在第一帧不动。解决办法很简单要么加muted属性要么等用户交互后再调用video.play()。但要注意video.play()返回的是一个Promise如果被浏览器拒绝你需要捕获这个错误video.play().catch(error { console.log(自动播放被阻止:, error); // 这里可以显示一个自定义的播放按钮 });3. 格式与编码HTML5视频最核心的兼容性战场3.1 容器格式和编码格式是两回事很多人会把“MP4”和“H.264”混为一谈其实它们是两个层面的东西。MP4是容器格式相当于一个盒子H.264是视频编码格式相当于盒子里的东西。同样一个MP4文件里面的视频编码可能是H.264也可能是H.265HEVC甚至可能是AV1。音频编码可能是AAC也可能是MP3或Opus。浏览器支持的是“容器编码”的组合。比如浏览器MP4 (H.264 AAC)WebM (VP8/VP9 Opus)Ogg (Theora Vorbis)Chrome支持支持支持Firefox支持支持支持Safari支持部分支持较新版本不支持Edge支持支持支持从这张表可以看出MP4 (H.264 AAC) 是兼容性最好的组合几乎所有现代浏览器都支持。但如果你用的是H.265编码的MP4Safari可能能播因为苹果推HEVC但Chrome和Firefox就不一定了。3.2 怎么确认视频的编码格式如果你手头有一个视频文件不确定它的编码格式可以用ffprobeFFmpeg套件的一部分来查看ffprobe -v error -show_entries streamcodec_name,codec_type -of defaultnoprint_wrappers1 input.mp4输出大概长这样codec_nameh264 codec_typevideo codec_nameaac codec_typeaudio如果看到codec_namehevc那就说明是H.265编码需要转码成H.264才能保证全浏览器兼容。转码命令也很简单ffmpeg -i input.mp4 -c:v libx264 -c:a aac -movflags faststart output.mp4这里的-movflags faststart很关键它会把视频的元数据moov atom移到文件头部这样浏览器不用下载完整个文件就能开始播放。我见过不少视频在本地能播传到服务器上就不行了就是因为moov atom在文件尾部浏览器等不及。3.3 多格式回退的正确写法为了兼容不同浏览器标准的做法是提供多个格式的源video controls source srcvideo.mp4 typevideo/mp4 source srcvideo.webm typevideo/webm source srcvideo.ogv typevideo/ogg 你的浏览器不支持HTML5视频。 /video浏览器会按顺序尝试找到第一个它能播的就停下来。但这里有个坑type属性必须写对。如果你把WebM文件的type写成video/mp4浏览器可能会尝试用MP4解码器去解WebM结果就是失败。还有一个更隐蔽的坑有些服务器会对不存在的文件返回一个HTML错误页面比如404页面但状态码是200。浏览器拿到这个HTML文件发现不是视频就报MEDIA_ERR_SRC_NOT_SUPPORTED。这种情况在Network面板里看Content-Type就能发现——返回的是text/html而不是video/mp4。4. 服务器配置那些让你视频“莫名其妙”不播的元凶4.1 MIME类型配置错误这是最常见也最容易被忽略的问题。服务器需要正确地告诉浏览器“这个文件是什么类型”。如果MIME类型不对浏览器可能直接拒绝处理。以Nginx为例你需要在mime.types文件或者配置块里确保有以下映射types { video/mp4 mp4; video/webm webm; video/ogg ogv; }Apache的话可以在.htaccess里加AddType video/mp4 .mp4 AddType video/webm .webm AddType video/ogg .ogv如果你用的是对象存储比如各种云存储服务通常需要在控制台里手动设置文件的Content-Type。我遇到过好几次上传的MP4文件Content-Type是application/octet-streamChrome能猜出来是视频Safari就不行。4.2 Range请求支持视频播放和普通文件下载不一样浏览器通常会发起Range请求只获取文件的一部分。如果服务器不支持Range请求浏览器可能无法正常播放尤其是大文件。检查方法很简单用curl发一个带Range头的请求curl -I -H Range: bytes0-1023 https://example.com/video.mp4如果返回的是206 Partial Content说明支持Range。如果返回200 OK并且返回了整个文件说明不支持。Nginx默认是支持Range请求的但如果你在中间加了一些代理或者CDN可能会把这个特性弄丢。Apache需要确保mod_headers和mod_range模块是启用的。4.3 跨域问题CORS如果你的视频文件和页面不在同一个域名下就需要处理跨域问题。浏览器会检查视频文件的响应头里有没有Access-Control-Allow-Origin。location /videos/ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, HEAD, OPTIONS; add_header Access-Control-Allow-Headers Range; }注意如果视频需要携带Cookie或者认证信息Access-Control-Allow-Origin不能是*必须是具体的域名并且要加上Access-Control-Allow-Credentials: true。还有一个细节当浏览器发起Range请求时会带一个Range头这个头在CORS里属于“非简单头”需要服务器在Access-Control-Allow-Headers里明确允许。4.4 HTTPS混合内容问题如果你的页面是HTTPS的但视频源是HTTP的浏览器会阻止加载。这是混合内容Mixed Content策略。控制台会报类似这样的错Mixed Content: The page at https://example.com was loaded over HTTPS, but requested an insecure video http://example.com/video.mp4. This request has been blocked.解决办法就是把视频也放到HTTPS下或者用协议相对URL//example.com/video.mp4但后者现在也不太推荐了最好还是统一用HTTPS。5. 代码层面的常见错误与修复方案5.1 属性拼写和取值错误HTML5 video标签的属性看起来简单但拼错一个字母就可能导致整个功能失效。我见过最多的错误包括controls写成了controlautoplay写成了autoPlayHTML属性不区分大小写但有些人会在JavaScript里搞混muted写成了mutepreload的值写成了auto、metadata、none之外的东西还有一个经典问题source标签的src属性写错了路径。相对路径和绝对路径搞混或者大小写不一致Linux服务器区分大小写Windows不区分。这种问题在本地开发时不容易发现一部署就暴露。5.2 JavaScript控制播放的时序问题如果你用JavaScript来控制播放时序很重要。比如const video document.querySelector(video); video.src video.mp4; video.play(); // 这行可能会失败因为设置src之后浏览器需要时间去加载元数据。直接调用play()可能会因为视频还没准备好而失败。正确的做法是监听canplay或loadedmetadata事件const video document.querySelector(video); video.src video.mp4; video.addEventListener(canplay, () { video.play().catch(e console.log(播放失败:, e)); });或者用loadedmetadata这个事件触发时视频的尺寸和时长已经知道了但可能还没足够的数据来播放。canplay更稳妥一些。5.3 动态创建video元素的坑有些场景下你需要用JavaScript动态创建video元素比如做视频预览或者自定义播放器。这时候要注意const video document.createElement(video); video.src video.mp4; video.controls true; document.body.appendChild(video);这段代码看起来没问题但在某些浏览器里动态创建的video元素如果没有显式设置preload属性可能不会自动加载。加上video.preload auto会更保险。还有一个坑如果你在video元素还没插入DOM之前就调用play()有些浏览器会拒绝。所以顺序应该是先appendChild再play。5.4 移动端的特殊限制移动端浏览器对视频播放有额外的限制。iOS Safari尤其严格默认情况下视频不会内联播放inline会全屏播放。需要加playsinline属性。自动播放几乎总是被阻止除非视频是muted的。同时播放多个视频会被阻止。video controls playsinline muted autoplay source srcvideo.mp4 typevideo/mp4 /videoAndroid上的情况稍微好一些但不同厂商的浏览器行为差异很大。有些国产浏览器会用自己的播放器内核对标准HTML5 video的支持参差不齐。6. 排查链路一个真实案例的完整复盘6.1 问题描述之前帮一个朋友排查过一个问题他做了一个摄影作品展示页视频在本地用Chrome打开一切正常但部署到服务器后Chrome和Safari都播不了Firefox偶尔能播但很卡。6.2 第一步确认文件本身没问题先让他把服务器上的视频文件下载下来用本地播放器打开确认文件没有损坏。然后用ffprobe检查编码codec_nameh264 codec_typevideo codec_nameaac codec_typeaudio编码没问题H.264 AAC兼容性最好的组合。6.3 第二步检查Network面板打开Chrome开发者工具的Network面板刷新页面找到视频请求。发现状态码是200不是206Content-Type是application/octet-stream没有Accept-Ranges: bytes响应头这就找到了两个问题MIME类型不对而且服务器不支持Range请求。6.4 第三步检查服务器配置他用的是一台Nginx服务器。查看配置文件后发现视频文件所在的目录没有单独配置MIME类型Nginx用了默认的application/octet-stream。而且他为了“优化性能”在Nginx前面加了一层代理代理层没有透传Range请求。6.5 第四步修复在Nginx配置里加上location /videos/ { types { video/mp4 mp4; } add_header Accept-Ranges bytes; }然后调整代理配置确保Range头能透传。重启Nginx后视频正常播放。6.6 经验总结这个案例里问题其实不止一个而是多个小问题叠加在一起。如果只解决了MIME类型Range请求的问题还在大视频可能还是播不了。排查的时候要有耐心一层一层往下查不要找到一个可能的原因就停下来。7. 那些文档里不会写的实操心得7.1 视频文件本身的问题往往最容易被忽略很多人遇到视频不播第一反应是去改代码、调服务器但有时候问题就出在视频文件本身。比如文件在传输过程中损坏了尤其是用FTP上传时没有用二进制模式视频的moov atom在文件尾部导致浏览器需要下载完整个文件才能开始播放视频的码率太高浏览器解码不过来尤其是在低端设备上我现在的习惯是拿到一个视频文件先用ffprobe看一眼再用ffmpeg重新封装一遍不重新编码只是调整容器结构确保moov atom在文件头部ffmpeg -i input.mp4 -c copy -movflags faststart output.mp4这个操作很快因为不需要重新编码只是把元数据挪个位置。7.2 不要迷信“万能格式”网上很多文章会说“用MP4就对了”但MP4只是一个容器里面的编码才是关键。H.264 AAC的MP4兼容性最好但如果你用的是H.265或者AV1兼容性就会打折扣。所以每次导出视频的时候都要确认编码格式不要只看扩展名。7.3 测试的时候要用真实环境本地开发环境往往太“干净”了很多问题暴露不出来。比如本地文件系统不涉及MIME类型和Range请求本地没有跨域问题本地网络速度快码率高一点也能播所以视频功能一定要在真实的服务器环境里测试而且要用不同的浏览器和设备测。我一般至少会测Chrome、Firefox、Safari这三个移动端至少测iOS Safari和Android Chrome。7.4 善用浏览器的媒体面板Chrome开发者工具有一个“Media”面板可以查看当前页面所有媒体元素的详细信息包括播放状态、缓冲进度、错误信息等。这个面板在排查视频问题时非常有用但很多人不知道它的存在。打开方式开发者工具 → 更多工具 → Media。或者按Esc打开抽屉面板在左侧菜单里找Media。7.5 日志和监控不能少如果你的网站有大量视频内容建议在前端加上视频播放失败的监控。可以通过监听error事件把错误信息上报到日志系统video.addEventListener(error, (e) { const error video.error; // 上报错误代码、视频URL、浏览器信息等 reportError({ code: error.code, message: error.message, src: video.currentSrc, userAgent: navigator.userAgent }); });这样当用户反馈视频播不了的时候你能快速定位是哪些视频、哪些浏览器、什么错误类型而不是靠猜。8. 关于“any browser”这个说法的再思考回到标题里的“any browser”其实在实际排查中真正“所有浏览器都不播”的情况反而少见。更常见的是“某些浏览器不播”或者“某些设备不播”。如果真的所有浏览器都不播那问题大概率出在文件本身或者服务器配置上而不是浏览器兼容性。我个人的排查顺序一般是这样的先确认文件本身没问题用本地播放器和ffprobe再确认服务器配置没问题MIME类型、Range请求、CORS最后才去查代码层面的问题。这个顺序的好处是从最底层往上查避免在代码里绕圈子。视频播放这个问题说复杂也复杂说简单也简单。核心就是搞清楚浏览器需要什么、服务器给了什么、文件里有什么。这三者对齐了视频自然就能播。
