HTML5 多媒体：音频、视频、画布一张网打尽

HTML5 把「听歌、看片、画图」三大件写进原生标签，插件时代直接翻篇。下面这份「一页备忘录」带你速览常用写法、掉坑提醒以及实用调试技巧，复制即可上线。

1. 音频 <audio> —— 一行代码就能听

<audio controls preload="auto" id="bgm">
  <source src="bgm.mp3" type="audio/mpeg">
  <source src="bgm.ogg" type="audio/ogg">
  您的浏览器不支持音频。
</audio>

JS 常用接口

const a = document.getElementById('bgm');
a.volume = 0.3;   // 0~1
a.currentTime = 30; // 跳转到 30 s
a.play().catch(e=>console.log('被浏览器拦截',e));

⚠️ 大多数移动端禁止自动播放带声音媒体；先静音或等用户第一次交互后再 play()。

2. 视频 <video> —— 封面、清晰度一次搞定

<video
  width="640" height="360"
  controls
  poster="cover.jpg"
  preload="metadata">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p>您的浏览器不支持视频。</p>
</video>

• poster 给出加载前封面，提升首屏体验。
• 想加字幕？用 <track kind="subtitles" src="zh.vtt" srclang="zh" label="中文"> 即可。
• 清晰度切换：<source> 写多条不同分辨率，JS 动态替换 src 并 load()。

3. Canvas 动态图 —— 把像素当乐高

<canvas id="cover" width="400" height="225"></canvas>
<script>
const ctx = document.getElementById('cover').getContext('2d');
const v = document.querySelector('video');
v.addEventListener('timeupdate', () => {
  ctx.drawImage(v, 0, 0, 400, 225);  // 视频帧实时转画布
});
</script>

用例：自定义滤镜、截图按钮、生成 GIF。

4. 嵌入第三方资源 —— iframe 秒贴

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?modestbranding=1&rel=0"
  width="560" height="315"
  allowfullscreen
  loading="lazy">
</iframe>

• loading="lazy" 让浏览器延迟加载，节省首屏流量。
• 国内常见：哔哩哔哩、优酷均提供「通用嵌入代码」，直接复制 iframe。

5. 性能与可访问性小抄

1. 压缩：音频用 48 kbps 足矣；视频优先 H.264 + AAC，720p 移动 1 Mbps 以内。
2. 自适应：video { max-width:100%; height:auto; } 防止溢出。
3. 键盘：给 <audio>/<video> 套 <div tabindex="0"> 可自定义样式而不失焦。
4. 读屏：在 <audio> / <video> 后加 <p id="d">播放中</p>，用 timeupdate 更新文本，供屏幕阅读器朗读。

5. 自动播放策略：

   • 静音 muted 最保险；
   • 用户点过按钮后再 play() 基本不会被拦截；
   • 若被拦截，catch 里提示用户手动播放。

6. 一句话速记

• 纯播放 → <audio> / <video> 原生标签最省命；
• 要截图、特效 → Canvas 接棒；
• 外包平台视频 → iframe 省心；
• 移动优先 → 静音 + 轻量文件 + 延迟加载。

把音频、视频、画布三条线串好，多媒体页面就能「开口说话」又「跑得飞快」。祝你撸码顺利，流量减半！