HTML 视频（Video）播放学习笔记

什么是视频（Video）

视频是一种通过声音、图像等方式将运动的物体或场景记录下来并保存成文件格式用于播放的多媒体形式。

如何在网页中添加视频

可以使用 HTML 标签 <video> 来添加视频到网页中。<video> 标签有一些属性可以用来控制视频播放的尺寸、自动播放、循环播放等等。以下是一个简单的例子：

htmlCopy Code
<video src="video.mp4" width="640" height="360" controls></video>

上面的代码片段中，src 属性指定视频文件的地址，width 和 height 属性指定视频播放器的尺寸，controls 属性允许用户通过浏览器提供的控制条来控制视频的播放。

绝大多数的浏览器都可以播放常见的视频格式，例如 MP4、WebM 和 OGG，但是还是建议提供多种格式的视频文件以确保浏览器的兼容性。

自动播放和循环播放

如果想要视频在加载完成后自动播放，可以将<video>标签中的autoplay属性设置为true，以下是一个例子：

htmlCopy Code
<video src="video.mp4" width="640" height="360" controls autoplay></video>

如果想要循环播放视频，在 autoplay 属性后面添加 loop 属性即可：

htmlCopy Code
<video src="video.mp4" width="640" height="360" controls autoplay loop></video>

嵌入字幕

如果你希望在视频中显示文字，可以使用 <track> 标签添加字幕。以下是一个例子：

htmlCopy Code
<video src="video.mp4" width="640" height="360" controls>
  <track kind="subtitles" src="subtitle.vtt" srclang="en" label="English"></track>
</video>

上面的代码片段中，<track> 标签有几个属性需要注意：

kind 属性指定字幕的类型，这里是 subtitles 表示普通的字幕。
src 属性指定字幕文件的地址。
srclang 属性指定字幕的语言。
label 属性指定在控制条中显示的字幕标签。

浏览器支持情况

Video 标签自 HTML5 开始被引入，目前绝大多数浏览器都支持。但是不同浏览器支持的视频格式可能不同，因此还是建议提供多种格式的视频文件以确保兼容性。

实例

以下是一个完整的例子，展示如何使用 HTML 来添加视频到网页中：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Video Example</title>
  </head>
  <body>
    <h1>Video Example</h1>
    <video src="video.mp4" width="640" height="360" controls autoplay loop>
      <track kind="subtitles" src="subtitle.vtt" srclang="en" label="English"></track>
    </video>
  </body>
</html>

请注意将 src 和 track 属性的值替换为你自己的视频文件和字幕文件。