HTML 媒体（Media）学习笔记
一、HTML 媒体概述
HTML 媒体指的是在网页中嵌入的音效、音乐、视频和动画等内容。现代网络浏览器已经支持多种多媒体格式，这些多媒体元素可以极大地丰富网页的内容和用户体验。
1. 多媒体的定义
多媒体涵盖了多种不同的格式，包括文字、图片、音乐、音效、录音、电影和动画等。在网页中嵌入多媒体元素可以让用户在浏览网页时获得更加生动和丰富的体验。
2. 浏览器支持
早期的浏览器仅支持文本，随后逐渐增加了对颜色、字体、图片等的支持。对于音效、动画和视频的支持，不同的浏览器处理方式不同，有些元素可以以内联方式处理，而有些则需要额外的插件。
二、多媒体格式
多媒体文件的格式通常通过文件扩展名来识别。不同的多媒体格式适用于不同的场景和需求。
1. 视频格式
以下是一些常见的视频格式及其特点：
| 格式 | 文件扩展名 | 描述 |
|---|---|---|
| AVI | .avi | 由微软开发，所有运行 Windows 的计算机都支持。在因特网上很常见，但非 Windows 计算机可能无法播放。 |
| WMV | .wmv | 由微软开发，Windows Media 格式在因特网上很常见，但需要额外组件才能播放。 |
| MPEG | .mpg, .mpeg | 最流行的视频格式之一，跨平台，得到大多数浏览器的支持。 |
| QuickTime | .mov | 由苹果公司开发，常见于因特网，但需要额外组件才能在 Windows 计算机上播放。 |
| RealVideo | .rm, .ram | 由 Real Media 开发，支持低带宽条件下的视频流，但质量可能较低。 |
| Flash | .swf, .flv | 由 Macromedia 开发，需要额外组件（如 Flash Player）才能播放。 |
| MP4 | .mp4 | 带有 H.264 视频编码的新格式，被 YouTube 推荐使用，也得到 HTML5 的支持。 |
2. 音频格式
以下是一些常见的音频格式及其特点：
| 格式 | 文件扩展名 | 描述 |
|---|---|---|
| MIDI | .mid, .midi | 用于电子音乐设备的格式，文件小，得到广泛支持。 |
| RealAudio | .rm, .ram | 由 Real Media 开发，支持低带宽条件下的音频流，但质量可能较低。 |
| Wave | .wav | 由 IBM 和微软开发，得到大多数浏览器的支持，但文件较大。 |
| WMA | .wma | Windows Media Audio 格式，质量优于 MP3，但不被 iPod 支持。 |
| MP3 | .mp3, .mpga | 最流行的音频格式之一，被大多数软件系统支持。 |
三、HTML5 对多媒体的支持
HTML5 引入了 <video> 和 <audio> 元素，使得在网页中嵌入视频和音频变得更加简单和标准化。
1. 视频支持
HTML5 支持以下三种视频格式：
-
MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
-
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
-
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
2. 音频支持
HTML5 支持以下三种音频格式：
-
MP3：最流行的音频格式之一。
-
WAV：由 IBM 和微软开发，得到大多数浏览器的支持。
-
Ogg：一种开源的音频格式。
四、HTML5 媒体元素的使用
1. <video> 元素
HTML复制
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 Video 标签。
</video>预览
-
controls属性提供了播放、暂停和音量控件。 -
width和height属性用于控制视频的尺寸。 -
<source>标签用于定义多种视频源，浏览器会选择第一个可识别的格式。
2. <audio> 元素
HTML复制
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
您的浏览器不支持 Audio 标签。
</audio>预览
-
controls属性提供了播放、暂停和音量控件。 -
<source>标签用于定义多种音频源，浏览器会选择第一个可识别的格式。
五、使用 DOM 控制多媒体
HTML5 的 <video> 和 <audio> 元素支持多种方法、属性和事件，可以通过 JavaScript 进行控制。
示例代码
HTML复制
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 Video 标签。
</video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<script>
function playVideo() {
document.getElementById("myVideo").play();
}
function pauseVideo() {
document.getElementById("myVideo").pause();
}
</script>