HTML 5的视频标签 <video> 可以让我们在网页中嵌入视频内容。在使用视频标签之前,我们需要确保视频文件的格式为常见的视频格式,比如MP4、WebM或Ogg。

下面是一个基本的视频标签示例:

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

在这个示例中,<video> 标签用来定义视频内容,controls 属性用来显示视频控制按钮(播放、暂停、音量控制等)。<source> 标签用来指定视频文件的路径和格式。在这个例子中,视频文件的路径为 “movie.mp4”,文件格式为 MP4。

如果我们有多个不同格式的视频文件,可以使用多个 <source> 标签来指定不同格式的视频文件,以提供更好的兼容性:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
</video>

除了 srctype 属性之外,视频标签还有一些其他常用的属性,比如 widthheight 用来定义视频的宽度和高度、autoplay 用来自动播放视频、loop 用来循环播放视频等。

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

视频标签还支持一些事件,比如 onplayonpauseonended 等,可以通过 JavaScript 来添加相应的事件处理程序。

总的来说,使用视频标签可以很方便地在网页中添加视频内容,并且可以通过一些属性和事件来控制视频的播放和显示效果。希望这个简单的教程能帮助你更好地理解和使用 HTML 5 的视频标签。