Video controller 属性

什么是 Video Controller 属性

在 HTML5 中，<video> 标签用于嵌入视频内容到网页中。而 controls 属性是 <video> 标签的一个控制属性，用来显示浏览器默认的视频控制器，包括播放/暂停按钮、音量控制、进度条等。通过设置 controls 属性为 true，可以让用户方便地控制视频的播放。

如何使用 Video Controller 属性

要在网页中使用 controls 属性，只需要简单地在 <video> 标签中添加 controls 属性即可：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上面的示例中，我们使用了 <source> 标签来指定视频文件的来源，并且在 <video> 标签中添加了 controls 属性。这样就可以在页面中显示默认的视频控制器了。

Video Controller 属性的常见用法

除了简单地显示默认的视频控制器外，controls 属性还可以通过 JavaScript 来进行自定义控制。下面是一个示例代码，演示了如何通过 JavaScript 来控制视频的播放和暂停：

// www.javascriptcn.com code example
<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  var video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

在上面的示例中，我们首先获取了 <video> 标签的 DOM 元素，并且定义了两个 JavaScript 函数 playVideo 和 pauseVideo，分别用来控制视频的播放和暂停。通过调用这两个函数，我们可以实现自定义的视频控制。

总结

通过本篇文章的介绍，读者应该对 Video Controller 属性有了更深入的了解。controls 属性是一个非常方便的工具，可以帮助用户更好地控制视频的播放。同时，通过 JavaScript 的自定义控制，我们还可以实现更加灵活的视频播放功能。希望本文对您有所帮助，谢谢阅读！