如何在 HTML5 中显示视频控件？

在 HTML5 中，可以使用 <video> 标签来嵌入视频文件，并支持一些控件来控制播放、暂停、音量等操作。下面是一个基本的示例:

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

上面的代码中，src 属性指定视频文件的路径，controls 属性则表示要显示视频控件。

除了基本的控件外，还可以通过添加一些属性来进一步自定义视频控件的行为和样式。

以下是一些常用的属性和值:

• autoplay：自动播放
• loop：循环播放
• muted：静音
• preload：预加载
• poster：封面图
• width 和 height：视频的宽度和高度
• controlsList：指定显示哪些控件

下面是一个示例代码，其中展示了如何利用这些属性和值来自定义视频控件的样式和行为:

<video src="video.mp4" width="640" height="360" poster="poster.png" controls controlsList="nodownload">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="video.mp4">link to the video</a> instead.</p>
</video>

上面的代码中，添加了 width 和 height 属性来设置视频的宽度和高度，poster 属性添加封面图。controlsList 属性用于控制控件列表，这里指定不显示下载按钮。

此外，还添加了两个 source 标签来指定不同格式的视频文件，如果浏览器支持则会优先播放 video.webm 或 video.ogg，否则显示 <p> 元素中的提示信息。

综上可得，使用 HTML5 <video> 标签可以非常简便地在网页中嵌入视频，并通过添加不同的属性和值来自定义视频控件的样式和行为，使用户能够更加方便地观看视频。