标签需显式设src或、controls,注意mime类型、移动端autoplay限制及格式兼容性;mp4最兼容,webm体积小,av1压缩优但耗性能;play()须同步触发,poster非加载态替代,moov box需前置。

用 <video></video> 标签是最直接的方式
浏览器原生支持,不用额外库,加载快、兼容好。关键不是“能不能放”,而是“怎么放才不翻车”。
- 必须提供至少一个
src,或者用<source></source>指定格式,否则在 Safari 或 Firefox 里可能黑屏无报错 -
controls属性得显式写上,否则默认没播放按钮——很多人以为“加了标签就自动有控件”,其实没有 - 常见错误:把 MP4 路径写成相对路径但忘了服务器没配 MIME 类型,Chrome 会静默失败,控制台只报
ERR_CONTENT_DECODING_FAILED这类模糊错误 - 移动端注意:
autoplay基本无效(iOS 强制用户手势触发),muted是绕过限制的必要条件
MP4、WebM、AV1 格式怎么选
不是所有格式都能随便换,浏览器支持差异实际影响首帧加载和解码性能。
- MP4(H.264 + AAC):兼容性最好,但体积大、编码慢,适合老设备或需要 100% 覆盖的场景
- WebM(VP9):Chrome/Firefox 支持好,体积比 MP4 小 20–30%,但 Safari 16.4 之前完全不支持
- AV1:压缩率最高,但解码耗 CPU,低端安卓机可能卡顿;目前仅 Chrome 110+、Firefox 115+、Safari 17+ 支持
- 实操建议:用
<source></source>按优先级从高到低排列,浏览器自动选第一个能播的,比如先 MP4 再 WebM
自定义控件时 play() 被拒怎么办
现代浏览器对自动播放策略越来越严,哪怕绑在 click 上,如果调用链里有异步延迟(比如 Promise.then、setTimeout),也会被当成非用户手势触发。
本文档主要讲述的是android rtsp流媒体播放介绍;实时流协议(RTSP)是应用级协议,控制实时数据的发送。RTSP提供了一个可扩展框架,使实时数据,如音频与视频,的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接,为选择发送通道,如UDP、组播UDP与TCP,提供途径,并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看
- 错误写法:
button.addEventListener('click', () => setTimeout(() => video.play(), 0))→ 触发NotAllowedError - 正确写法:确保
play()在原生事件回调同步执行,中间不能穿插异步逻辑 - 如果必须异步加载资源再播放,先调用
video.load(),等loadeddata事件后再play(),且该事件必须由用户操作引发(比如点击后立即 load) - 静音是保底方案:
video.muted = true后,大部分浏览器允许自动play()
视频封面图和加载态怎么稳住体验
poster 属性只是第一帧快照,不能替代加载状态反馈,尤其在弱网下用户可能盯着黑屏 3 秒不知所措。
立即学习“前端免费学习笔记(深入)”;
-
poster必须是静态图片 URL,不能是 base64(部分 iOS 版本会忽略) - 监听
video.readyState:值为0(HAVE_NOTHING)表示还没加载元数据,1(HAVE_METADATA)表示已有尺寸/时长,这时可隐藏 loading 动画 - 别依赖
canplay事件——它只表示“理论上能播”,实际首帧仍可能卡住;更稳妥的是监听playing(真正开始渲染帧) - 服务端注意:MP4 的 moov box 必须在文件开头(即“faststart”),否则 Chrome 会等整个文件下载完才触发
loadedmetadata










