一、HTML5 视频简介
HTML5 引入了 <video> 元素，用于在网页上嵌入视频内容。这种方式取代了传统的 Flash 插件，使得视频的展示更加标准化和便捷。HTML5 的 <video> 元素为开发者提供了一种简单且兼容性强的方法来嵌入视频，同时也支持多种视频格式。
二、浏览器支持情况
-
Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 都支持
<video>元素。 -
注意：Internet Explorer 8 或更早版本不支持
<video>元素。
三、基本用法
1. 基本语法
在 HTML5 中嵌入视频的基本语法如下：
HTML复制
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持 Video 标签。
</video>预览
-
<video>元素提供了播放、暂停和音量控件来控制视频。 -
width和height属性用于控制视频的尺寸。如果设置了这些属性，浏览器会在页面加载时保留所需的视频空间，避免页面因视频加载而改变布局。 -
<video>标签之间插入的内容是为不支持<video>元素的浏览器提供的备用内容。
2. 支持的视频格式
目前，<video> 元素支持三种视频格式：
-
MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
-
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
-
Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
不同浏览器对这些格式的支持情况如下表所示：
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
3. 视频格式的 MIME 类型
| 格式 | MIME 类型 |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
四、使用 DOM 控制视频
<video> 元素支持多种方法、属性和事件，可以通过 JavaScript 进行控制。例如：
-
方法：
play()、pause()等，用于控制视频的播放和暂停。 -
属性：
paused、width等，可以读取或设置视频的状态和尺寸。 -
事件：
play、pause等，可以监听视频的播放和暂停事件。
示例代码
以下是一个简单的示例，展示如何使用 JavaScript 控制 <video> 元素：
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>预览
五、相关标签
1. <source> 标签
<source> 标签用于定义多种媒体资源，例如 <video> 和 <audio>。它可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
2. <track> 标签
<track> 标签用于定义在媒体播放器中的文本轨迹，例如字幕、章节等。
六、总结
HTML5 的 <video> 元素为网页视频展示提供了一种简单、标准化的方法。通过合理使用 <video> 元素及其相关属性和方法，可以轻松地在网页上嵌入视频，并实现丰富的交互功能。同时，了解不同浏览器对视频格式的支持情况，可以帮助我们更好地选择合适的视频格式，确保视频在不同浏览器中都能正常播放。
