HTML | DOM 视频控件属性

HTML 为我们提供了视频控件，让我们可以将视频嵌入我们的网页中。视频控件的属性也为我们提供了丰富的选择，下面就来介绍一下视频控件的属性。

控件属性

视频控件有如下属性：

• src：视频的 URL 地址。
• autoplay：是否自动播放视频。
• controls：是否显示控制栏。
• loop：是否循环播放视频。
• muted：是否静音播放视频。
• preload：是否在页面加载时预加载视频。
• width：视频的宽度。
• height：视频的高度。

代码示例

下面是一个示例代码，展示了如何使用视频控件属性：

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

这个示例代码将会展示一个宽度为 640，高度为 360 的视频，同时自动播放视频，显示控制栏，循环播放视频。

DOM 属性

除了 HTML 属性外，视频控件还有很多 DOM 属性可以操作视频，比如：

• currentTime：设置或返回视频的当前时间。
• duration：返回视频的总时长。
• paused：返回视频是否暂停播放。
• playbackRate：设置或返回视频的播放速度。

代码示例

下面是一个示例代码，展示了如何使用视频控件的 DOM 属性：

<video id="my-video" src="video.mp4" width="640" height="360"></video>
<script>
  var video = document.getElementById("my-video");
  video.currentTime = 10; // 将当前时间设置为 10 秒
  video.playbackRate = 2; // 将播放速度设置为两倍
</script>

这个示例代码将会展示一个宽度为 640，高度为 360 的视频，通过 JavaScript 来修改当前时间和播放速度。