页面里放了个 mp4，Chrome 里播得好好的，客户用 iPhone 打开是一片黑，Safari 上只显示一个带叉的播放器。查下来是视频编码用了 H.265，Safari 不认。

最小可用的写法

<video src='demo.mp4' controls preload='metadata' width='640'></video>

src 指向文件，controls 打开自带控制条，preload 设成 metadata 只先拉时长和封面，能省流量。关键属性还有 poster 指定封面图，loop 循环播放，muted 静音，autoplay 想自动播放必须同时加 muted，否则浏览器策略直接拦掉。

一个源播不了就准备多个

source 标签可以并列多个，浏览器从上往下挑第一个能解的：mp4 给 Chrome、Edge、Safari，webm 给部分老设备，ogg 做兜底。视频编码优先 H.264 加 AAC，H.265 虽然省码率，但桌面端和安卓的支持都不齐。

移动端要加的几个属性

  • playsinline：iOS 上不加会强制全屏播放，页面布局会被顶乱。
  • poster 尺寸：封面图建议和视频同比例，不然会被拉伸。
  • muted 配 autoplay：两个一起写才能静音自动播。
  • 自定义按钮：不用默认控件就自己写按钮调 play 方法，注意要放在用户手势回调里。

常见的几个报错

控制台出现 NotSupportedError，说明容器或编码不支持；出现 Format error，多半是文件本身没上传完整。跨域引用别的站点视频还要带 crossOrigin 属性，服务器得返回对应的允许跨域头。视频不播时先看 Network 面板这条请求的状态码，404 和 206 是两回事。