HTML5 video/audio 用法

HTML5 提供了原生的 <video> 和 `` 标签，用于在网页中嵌入视频和音频，无需依赖第三方插件（如 Flash）。以下是它们的核心用法和常用 API：

---

一、<video> 标签（视频）

1. 基本用法

<video src="movie.mp4" controls width="600" height="400">
  您的浏览器不支持 video 标签。
</video>

2. 常用属性

属性	说明
src	视频文件 URL
controls	显示浏览器自带的播放控件（播放/暂停、进度条、音量等）
width/height	设置播放器尺寸
autoplay	自动播放（注意：现代浏览器通常要求静音才能自动播放）
muted	静音播放
loop	循环播放
poster	视频封面图 URL（播放前显示）
preload	预加载策略：none（不预加载）、metadata（仅预加载元数据）、auto（预加载整个视频）

3. 多格式兼容（使用 <source>）

不同浏览器支持的视频格式不同，可通过 <source> 提供多个版本：

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

---

二、`` 标签（音频）

1. 基本用法

<audio src="music.mp3" controls>
  您的浏览器不支持 audio 标签。

2. 常用属性

与 <video> 类似，但无 width/height/poster：

属性	说明
src	音频文件 URL
controls	显示播放控件
autoplay	自动播放（同样可能受浏览器限制）
muted	静音
loop	循环播放
preload	预加载策略

3. 多格式兼容

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签。

---

三、JavaScript 控制 API

通过 JS 可以自定义播放器行为，以下是核心属性和方法：

1. 获取元素

const video = document.querySelector('video');
const audio = document.querySelector('audio');

2. 核心方法

方法	说明
play()	开始播放
pause()	暂停播放
load()	重新加载媒体资源
canPlayType(type)	检查浏览器是否支持指定格式（返回 probably/maybe/""）

3. 核心属性

属性	说明	示例
currentTime	当前播放时间（秒）	video.currentTime = 10
duration	总时长（秒，只读）	video.duration
volume	音量（0.0 ~ 1.0）	video.volume = 0.5
muted	是否静音	video.muted = true
paused	是否暂停（只读）	video.paused
ended	是否播放完毕（只读）	video.ended

4. 常用事件

事件名	触发时机
play	开始播放时
pause	暂停时
timeupdate	currentTime 变化时（频繁触发）
ended	播放完毕时
loadedmetadata	元数据加载完成时
canplay	可以开始播放时
error	加载/播放出错时

示例：自定义播放按钮

<video id="myVideo" src="movie.mp4" width="600"></video>
<button id="playBtn">播放</button>

<script>
  const video = document.getElementById('myVideo');
  const playBtn = document.getElementById('playBtn');

  playBtn.addEventListener('click', () => {
    if (video.paused) {
      video.play();
      playBtn.textContent = '暂停';
    } else {
      video.pause();
      playBtn.textContent = '播放';
    }
  });
</script>

---

四、注意事项

1. 自动播放限制：现代浏览器（Chrome、Safari 等）通常禁止非静音的自动播放，需结合 muted 属性或用户交互后触发 play()。
2. 格式支持：
   • 视频：优先使用 MP4（H.264），兼容性最好；WebM 可作为补充。
   • 音频：优先使用 MP3，其次是 Ogg。
3. 移动端：移动端浏览器通常有更严格的限制（如禁止自动播放、全屏行为差异），需额外测试。