html5媒体api项目

HTML5 媒体 API 核心功能

音频/视频基础标签

核心属性与方法

常用属性
| 属性名 | 作用 | 示例值 |
|————–|——————————|—————-|
| src | 指定媒体资源路径 | “video.mp4” |
| controls | 显示默认控件组 | 布尔值 true |
| autoplay | 自动播放 | 布尔值 true |
| loop | 循环播放 | 布尔值 true |
| muted | 静音初始状态 | 布尔值 true |
| preload | 预加载策略 | “none”/”metadata”/”auto” |

DOM 操作方法
| 方法名 | 功能 | 返回值 |
|—————|——————————-|—————-|
| play() | 启动播放 | Promise 对象 |
| pause() | 暂停播放 | |
| load() | 重新加载资源 | |
| volume | 设置/获取音量（0-1） | 数值 |
| currentTime | 设置/获取当前播放时间（秒） | 数值 |
| duration | 获取总时长（秒） | 数值 |

事件监听机制

示例：监听视频播放进度

const video = document.querySelector('video');
video.addEventListener('timeupdate', () => {
  const progressBar = document.getElementById('progress');
  progressBar.value = (video.currentTime / video.duration)  100;
});

综合应用示例

自定义控制面板

<button id="playBtn">播放</button>
<button id="muteBtn">静音</button>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
<script>
  const video = document.querySelector('video');
  document.getElementById('playBtn').onclick = () => video.play();
  document.getElementById('muteBtn').onclick = () => video.muted = !video.muted;
  document.getElementById('volumeSlider').oninput = (e) => {
    video.volume = e.target.value;
  };
</script>

元数据预加载

<video preload="metadata" id="myVideo">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>
  const video = document.getElementById('myVideo');
  video.addEventListener('loadedmetadata', () => {
    console.log(`视频时长：${video.duration}秒`);
  });
</script>

常见问题与解答

Q1：如何实现视频全屏播放？
A：调用 requestFullscreen() 方法，需在事件处理器中执行，示例：

document.querySelector('fullscreen-btn').onclick = () => {
  const video = document.querySelector('video');
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullScreen) { // Safari/Chrome前缀
    video.webkitRequestFullScreen();
  }
};

Q2：如何处理不同浏览器的兼容性问题？
A：主要关注两点：

1. 前缀处理：如 -webkit-、-moz- 等（现代浏览器已大部分支持无前缀）
2. 事件绑定：使用标准事件名称，多数浏览器已统一 API，建议通过特性检测：

   if (video.pause) {
   video.pause(); // 标准方法
   } else if (video.mozPause) { // Firefox旧版
   video.moz