2026-03-13

多媒体

HTML5 提供了多种方法来处理多媒体内容，主要包括使用 <video> 和 <audio> 标签嵌入和控制音视频内容，以及通过 JavaScript 进行高级操作。以下是详细介绍：

1. `<video>` 和 `<audio>` 标签

HTML5 引入了 <video> 和 <audio> 标签，用于在网页中嵌入视频和音频内容，而无需依赖第三方插件。

`<video>` 标签

基本用法：

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

常用属性：
- controls：显示播放控件。
- autoplay：页面加载后自动播放。
- loop：循环播放。
- muted：静音播放。
- poster：视频加载前显示的图像。
- preload：预加载策略（auto、metadata、none）。

`<audio>` 标签

基本用法：

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

常用属性：
- controls：显示播放控件。
- autoplay：自动播放。
- loop：循环播放。
- muted：静音播放。

2. JavaScript 控制多媒体

通过 JavaScript，可以实现更复杂的多媒体控制。

视频播放控制

const video = document.getElementById('myVideo');
video.play();       // 播放视频
video.pause();      // 暂停视频
video.volume = 0.5; // 设置音量（0.0 到 1.0）
video.currentTime = 10; // 跳转到第 10 秒
video.playbackRate = 2; // 设置播放速度（0.5 到 2.0）

事件监听

video.addEventListener('loadedmetadata', () => {
  console.log(`视频时长: ${video.duration}秒`);
});
video.addEventListener('timeupdate', () => {
  console.log(`播放进度: ${(video.currentTime / video.duration) * 100}%`);
});

3. 字幕和媒体轨道

HTML5 支持通过 <track> 标签添加字幕、章节等。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subs_zh.vtt" srclang="zh" label="中文" default>
  <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">
</video>

4. 其他多媒体方法

<iframe>：用于嵌入外部内容（如视频、地图等）。
<embed> 和 <object>：用于嵌入其他类型的多媒体内容。

5. 浏览器兼容性与格式支持

视频格式：推荐使用 MP4（H.264 编码）和 WebM（VP8/VP9 编码）。
音频格式：常用 MP3 和 Ogg。
通过这些方法，HTML5 提供了强大的多媒体处理能力，能够满足大多数网页开发需求。

多媒体

1. <video> 和 <audio> 标签

<video> 标签

<audio> 标签