让视频在网页即点即播：HTML5 `<video>` 速通＋避坑清单

以下笔记把「常见需求 → 最快代码 → 浏览器大坑」串成一条线，直接照抄就能上线。

1. 最小可运行模板

<video controls width="640" height="360">
  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频标签。
</video>

• 多格式兜底：MP4(H.264+AAC) 放第一，WebM 给 Firefox/Chrome 省专利费，老浏览器再退到 OGV。
• width/height 写属性而不是 CSS，能防止页面在加载时「跳动」。

2. 常用属性一口表

3. 自动播放被拦截？三行代码曲线救国

const v = document.querySelector('video');
v.muted = true;           // ① 先静音
v.play();                 // ② 尝试播放
v.onvolumechange = () => { v.muted = false }; // ③ 用户交互后再出声

若仍需用户点击，就把 play() 放到按钮事件里，万无一失。

4. JS 控制常用接口（写进度条/倍速/音量全靠它们）

video.play()              // 返回 Promise，成功才播放
video.pause()
video.currentTime = 90    // 单位秒，跳到 1:30
video.volume = 0.5        // 0~1
video.playbackRate = 1.25 // 1.25 倍速
video.requestFullscreen() // 全屏

5. 事件大全 → 做交互、埋点都能用

6. 移动端专享坑位

1. 省电策略：部分 ROM 后台/锁屏会暂停视频，前端监听 visibilitychange 再续播。
2. 流量恐慌：默认 preload="metadata" 只拉首段；长视频提供清晰度切换更贴心。
3. 全屏样式：iPhone 无法阻止自动全屏，可把重要按钮放 controls 里；Android 可以 playsinline 保持行内播放。

7. 封面 + 清晰度切换 一段代码搞定

<video id="v" controls poster="cover.jpg">
  <source src="720p.mp4" data-res="720">
  <source src="480p.mp4" data-res="480">
</video>

<script>
document.querySelector('#resSelect').onchange = e => {
  const res = e.target.value;
  const video = document.getElementById('v');
  const curTime = video.currentTime;
  const playing = !video.paused;

  video.src = document.querySelector(`source[data-res="${res}"]`).src;
  video.load();
  video.currentTime = curTime;
  if (playing) video.play();
};
</script>

思路：切源 → 记录当前时间 → 继续播放，用户无感。

8. 格式、码率、分辨率速查

推荐参数

• 720p：1.5–2 Mbps
• 480p：800 kbps
• 有声短视频 24–30 fps，背景视频可降到 15 fps 省流量。

9. 打包带走口诀

**“MP4 打底，WebM 备用；
先静音再自动播放，poster 给封面；
timeupdate 画进度，ended 埋点下一集；
preload=none 省流量，error 事件切备用源。”**

背完这 4 句，下次视频需求 30 分钟收工。