HTML5 引入了
标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。
本文将全面介绍
标签的各种属性，并通过实例代码详细说明其用法。
一、基础用法 1. 基本结构 HTML5 中使用
标签嵌入视频文件，最简单的形式如下：
在这个示例中，
src
属性指定视频文件的路径，
controls
属性使浏览器显示视频控件。
2. 示例代码
HTML5 Video Example
HTML5 Video Example
这段代码将在网页上显示一个视频播放器，如果浏览器不支持
标签，将显示替代文本 “Your browser does not support the video element.”。
二、属性详解 1.
src
指定视频文件的 URL，可以是相对路径或绝对路径。
2.
controls
显示视频控件（播放、暂停、音量、全屏等）。
3.
autoplay
视频文件在页面加载完成后自动播放。
需要注意的是，为了用户体验，很多浏览器默认禁止自动播放，特别是移动设备。
4.
loop
视频文件播放结束后自动重新播放。
5.
muted
初始加载时将视频设置为静音。
6.
preload
提示浏览器在页面加载时如何处理视频文件。
可能的值有：
none
：不预加载视频文件。
metadata
：只预加载视频文件的元数据。
auto
：浏览器选择最佳方式预加载视频文件。
7.
width
和
height
设置视频播放器的宽度和高度（以像素为单位）。
8.
poster
在视频播放之前显示的预览图像（封面图）。
9.
crossorigin
控制跨域资源共享 (CORS)，允许你配置是否可以加载跨域资源。
anonymous
：不使用凭据。
use-credentials
：使用凭据（如 Cookies）。
三、支持多种视频格式 由于不同浏览器对视频格式的支持不同，通常需要提供多种格式的视频文件，以确保兼容性。
可以使用多个
标签来定义不同格式的视频文件。
示例代码
HTML5 Video Example with Multiple Formats
HTML5 Video Example with Multiple Formats
四、使用 JavaScript 控制视频 HTML5 提供了丰富的 JavaScript API，可以用来控制视频播放。
以下是一些常用的属性和方法： 1. 常用属性
video.currentTime
：获取或设置当前播放时间（秒）。
video.duration
：获取视频总时长（秒）。
video.paused
：返回视频是否暂停。
video.volume
：获取或设置音量（0.0 到 1.0）。
video.playbackRate
：获取或设置播放速度。
2. 常用方法
video.play()
：播放视频。
video.pause()
：暂停视频。
video.load()
：重新加载视频文件。
video.requestFullscreen()
：全屏播放视频（需要浏览器支持）。
示例代码
HTML5 Video Control with JavaScript
Control HTML5 Video with JavaScript
在这个示例中，我们通过 JavaScript 控制视频的播放、暂停、停止和静音。
video.pause()
方法用于暂停视频，
video.currentTime = 0
将播放位置重置到开始。
五、使用
标签添加字幕 HTML5 提供了
标签，可以用来为视频添加字幕、章节标题、描述等。
以下是一个添加字幕的示例： 示例代码
HTML5 Video with Subtitles
HTML5 Video with Subtitles
在这个示例中，
标签用于加载字幕文件。
kind="subtitles"
指定轨道类型为字幕，
srclang
指定字幕语言，
label
为字幕轨道提供标签。
字幕文件 (
.vtt
格式) 示例：
WEBVTT
1
00:00:00.000 --> 00:00:10.000
Hello, welcome to our video tutorial.
2
00:00:10.000 --> 00:00:20.000
In this section, we will learn about HTML5 video.