HTML5 Video（视频）学习笔记

一、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 文件。

不同浏览器对这些格式的支持情况如下表所示：

3. 视频格式的 MIME 类型

四、使用 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> 元素及其相关属性和方法，可以轻松地在网页上嵌入视频，并实现丰富的交互功能。同时，了解不同浏览器对视频格式的支持情况，可以帮助我们更好地选择合适的视频格式，确保视频在不同浏览器中都能正常播放。