探索HTML5多媒体应用：视频、音频和图像的魅力

# 1. HTML5多媒体概览**

HTML5在多媒体领域带来了革命性的变化，提供了丰富的API和标签，使开发人员能够创建交互式、沉浸式的多媒体体验。HTML5多媒体涵盖了视频、音频、图像和交互式内容。它为开发人员提供了强大的工具，可以创建跨平台、响应式和可访问的多媒体应用程序。

HTML5多媒体的优势包括：

- **跨平台兼容性：**HTML5多媒体内容可以在各种设备和平台上播放，包括桌面、移动和嵌入式系统。
- **响应式设计：**HTML5多媒体元素可以根据设备屏幕大小和方向进行调整，确保在所有设备上获得最佳观看体验。
- **可访问性：**HTML5多媒体元素具有可访问性功能，例如字幕、替代文本和键盘导航，使残障人士能够访问内容。

# 2. HTML5视频与音频

### 2.1 HTML5视频标签和属性

#### 2.1.1 视频源和格式

HTML5视频标签`<video>`用于在网页中嵌入视频。它包含一个`src`属性，用于指定视频源的URL。支持的视频格式包括MP4、WebM和Ogg。

<video src="video.mp4" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>

#### 2.1.2 视频播放控制

`<video>`标签提供了多种播放控制属性，包括：

- `autoplay`：自动播放视频
- `loop`：循环播放视频
- `muted`：静音视频
- `controls`：显示播放控制栏

<video src="video.mp4" controls autoplay>
  ...
</video>

### 2.2 HTML5音频标签和属性

#### 2.2.1 音频源和格式

HTML5音频标签`<audio>`用于在网页中嵌入音频。它包含一个`src`属性，用于指定音频源的URL。支持的音频格式包括MP3、WAV和Ogg。

<audio src="audio.mp3" controls>
  <source src="audio.wav" type="audio/wav">
  <source src="audio.ogg" type="audio/ogg">
</audio>

#### 2.2.2 音频播放控制

`<audio>`标签提供了与`<video>`标签类似的播放控制属性，包括：

- `autoplay`：自动播放音频
- `loop`：循环播放音频
- `muted`：静音音频
- `controls`：显示播放控制栏

<audio src="audio.mp3" controls autoplay>
  ...
</audio>

### 2.3 HTML5多媒体事件

#### 2.3.1 视频和音频事件

`<video>`和`<audio>`标签支持多种事件，包括：

- `play`：当视频或音频开始播放时触发
- `pause`：当视频或音频暂停时触发
- `ended`：当视频或音频播放结束时触发
- `timeupdate`：当视频或音频的当前播放时间更新时触发

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

video.addEventListener('play', () => {
  console.log('Video started playing');
});

video.addEventListener('pause', () => {
  console.log('Video paused');
});

#### 2.3.2 图像事件

`<img>`标签也支持事件，包括：

- `load`：当图像加载完成时触发
- `error`：当图像加载失败时触发
- `click`：当图像被点击时触发

const image = document.querySelector('img');

image.addEventListener('load', () => {
  console.log('Image loaded');
});

image.addEventListener('error', () => {
  console.log('Image failed to load');
});

image.addEventListener('click', () =>