1. HTML 视频「Video」播放
HTML 中的「Video」标签是用来在网页上嵌入视频的元素。它提供了一个简单而强大的方法来播放音视频内容。
1.1. 添加视频
要在网页上添加视频，首先需要创建一个「Video」元素，并设置相应的属性。
以下是一个简单的示例：
<video src="video.mp4" controls></video>
在上面的示例中，我们设置了一个名为 "video.mp4" 的视频文件作为源文件，并使用 "controls" 属性来显示默认的播放控制按钮。
需要注意的是，视频文件的路径应该相对于 HTML 文件的位置。如果视频文件与 HTML 文件在同一目录中，直接指定文件名即可。如果视频文件位于其他目录，需要指定完整的文件路径。
1.2. 控制视频播放
「Video」元素提供了一组属性和方法，用于控制视频的播放。以下是一些常用的属性和方法：
autoplay: 设置视频自动播放。
loop: 设置视频循环播放。
preload: 设置视频是否在页面加载时进行预加载。
play(): 开始播放视频。
pause(): 暂停播放视频。
例如，要让视频自动播放并循环播放，可以添加相应的属性：
<video src="video.mp4" autoplay loop></video>
1.3. 添加视频字幕
除了播放视频本身，「Video」元素还支持添加字幕。可以使用 "track" 元素来定义字幕轨道。
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
在上面的示例中，我们添加了一个名为 "subtitles.vtt" 的字幕文件，并设置了相应的属性，如字幕类型 "kind"、字幕语言 "srclang" 和字幕标签 "label"。
1.4. 其他属性和事件
「Video」元素还有许多其他的属性和事件，用于控制视频的播放、显示和交互。这些包括：
poster: 设置视频封面图像。
width 和 height: 设置视频的宽度和高度。
currentTime: 获取或设置视频当前的播放位置。
duration: 获取视频的总时长。
onplay 和 onpause: 设置播放和暂停时触发的事件。
可以通过 JavaScript 来操作这些属性和事件，实现自定义的视频播放控制。
var video = document.querySelector('video');
video.play(); // 播放视频
video.pause(); // 暂停视频
2. 总结
通过使用「Video」元素，我们可以在 HTML 页面上嵌入并播放视频内容。我们可以设置相应的属性和方法，来控制视频的播放、显示和交互。同时，还可以添加字幕和封面图像等元素，提供更丰富的视频体验。
使用 HTML 视频播放的能力，我们可以为网页添加各种形式的视频内容，包括教育、娱乐、广告和信息等。这为网页设计师和开发者提供了更多创意和可能性。