HTML5 Video 元素是 HTML5 引入的一个新特性，用于在网页中嵌入视频内容。与早期的 <object> 或 <embed> 标签相比，<video> 标签提供了更简洁的语法，并且能够直接在浏览器中播放视频，无需额外插件（如 Flash）。HTML5 的视频标签支持多种视频格式，可以更灵活地控制视频播放。

1. HTML5 <video> 标签

<video> 标签用于嵌入视频元素。它可以包含多个视频格式的资源，以确保视频在不同的浏览器和平台上都能播放。常见的视频格式有 MP4、WebM 和 Ogg。

语法：

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

• src：指定视频文件的路径或 URL。
• controls：启用视频的默认控件（播放、暂停、音量调节等）。
• autoplay（可选）：视频加载后自动播放。
• loop（可选）：视频播放完后重新开始。
• muted（可选）：启动时将视频的音量设置为静音。
• poster（可选）：指定视频未播放时显示的图片。

2. 常见属性

• width：指定视频的宽度。
• height：指定视频的高度。
• preload：设置视频的预加载行为，取值包括：
• auto：浏览器在页面加载时预加载视频数据（默认）。
• metadata：只加载视频的元数据（如时长、尺寸等）。
• none：不加载视频数据。

3. 示例：嵌入视频

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

• 在这个例子中，我们提供了三种视频格式：MP4、WebM 和 Ogg，以便兼容不同浏览器。
• 如果浏览器不支持 <video> 标签，<video> 标签内部的文本（如“您的浏览器不支持 HTML5 视频标签。”）会被显示。

4. 视频控件

通过设置 controls 属性，浏览器会自动为视频提供控件（播放、暂停、音量调节等）。以下是常见的控件：

• 播放/暂停按钮：允许用户播放或暂停视频。
• 音量控制：允许用户调节视频音量。
• 进度条：显示视频的播放进度，用户可以点击进度条跳转到视频的不同位置。
• 全屏按钮：允许用户将视频切换为全屏模式。

5. 事件与控制

HTML5 提供了多个事件可以与视频交互，例如播放、暂停、结束等。你可以使用 JavaScript 来监听这些事件，控制视频的播放。

示例：通过按钮控制视频播放

<video id="myVideo" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playPause()">播放/暂停</button>

<script>
    var video = document.getElementById("myVideo");

    function playPause() {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }
</script>

• video.play()：播放视频。
• video.pause()：暂停视频。
• video.paused：判断视频是否处于暂停状态。

6. HTML5 视频 API

除了基本的控件，HTML5 还提供了丰富的 JavaScript API，允许开发者更灵活地控制视频播放、音量、进度等。

常用方法：

• play()：开始播放视频。
• pause()：暂停视频。
• currentTime：获取或设置视频播放的当前时间（以秒为单位）。
• duration：获取视频的总时长。
• muted：获取或设置视频的静音状态。
• volume：获取或设置视频的音量，取值范围是 0 到 1。

示例：控制视频进度

<video id="myVideo" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="skip()">跳过 10 秒</button>

<script>
    var video = document.getElementById("myVideo");

    function skip() {
        video.currentTime += 10;  // 跳过 10 秒
    }
</script>

7. 视频格式支持

HTML5 视频支持多种格式，然而，不同的浏览器对视频格式的支持有所不同。常见的视频格式包括：

• MP4（H.264 编码，AAC 音频）：广泛支持，几乎所有现代浏览器都支持。
• WebM（VP8 视频编码，Vorbis 音频）：Google Chrome 和 Firefox 支持，Safari 和 Internet Explorer 不支持。
• Ogg（Theora 视频编码，Vorbis 音频）：Firefox 和 Opera 支持，Safari 和 Internet Explorer 不支持。

为了确保兼容性，通常需要提供多种格式的视频文件。

8. 自定义播放器

通过 HTML5 视频 API，你可以完全自定义视频播放器的外观和功能。例如，你可以添加播放速度控制、字幕选择、视频质量调整等。

示例：自定义播放速度

<video id="myVideo" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<select onchange="changeSpeed(this.value)">
    <option value="0.5">0.5x</option>
    <option value="1" selected>1x</option>
    <option value="1.5">1.5x</option>
    <option value="2">2x</option>
</select>

<script>
    var video = document.getElementById("myVideo");

    function changeSpeed(speed) {
        video.playbackRate = speed;  // 设置播放速度
    }
</script>

9. 总结

HTML5 视频元素提供了强大的功能，可以让开发者轻松嵌入和控制视频内容。通过 <video> 标签，你可以在网页中直接嵌入视频，并提供丰富的播放控制。同时，HTML5 视频 API 使得开发者能够创建自定义视频播放器，满足各种需求。

• 使用 controls 属性启用默认控件。
• 使用 JavaScript 控制视频播放、暂停、音量、进度等。
• 提供多种视频格式，以确保兼容不同浏览器。