HTML <video> 标签

HTML标签 <video> 用于在网页中嵌入视频内容。它提供了一个简单的方式来展示视频，并支持多种视频格式。

属性

• src: 视频文件的 URL 地址。
• controls: 显示视频播放控件，如播放按钮、音量控制等。
• autoplay: 视频自动播放。
• loop: 视频循环播放。
• preload: 视频在页面加载时是否预加载。

示例代码

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

上面的示例代码展示了一个简单的视频播放器，视频文件为 video.mp4，包含了播放控件并且自动播放。

支持的视频格式

HTML5 的 <video> 标签支持多种视频格式，常见的格式包括：

• MP4: MPEG-4 Part 14 格式，常用于在线视频。
• WebM: WebM 视频格式，由 Google 推广。
• Ogg: Ogg 视频格式，开源免费。

嵌入字幕

可以通过 <track> 标签嵌入视频字幕，示例代码如下：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

上面的示例代码中，视频文件为 video.mp4，同时嵌入了英文字幕 subtitles_en.vtt。

自定义样式

可以通过 CSS 来自定义视频播放器的样式，例如修改播放按钮的颜色、调整进度条的样式等。

video {
  width: 100%;
  border: 1px solid #ccc;
}

video::-webkit-media-controls-play-button {
  background-color: red;
}

上面的 CSS 代码将视频播放器的宽度设置为100%，并将播放按钮的背景颜色改为红色。

总结

<video> 标签是在网页中嵌入视频内容的常用方式，通过设置不同的属性和嵌入字幕，可以实现丰富的视频播放效果。同时，通过 CSS 可以对视频播放器进行自定义样式的调整，使其更符合网页设计的需求。