Video controls 属性

什么是controls属性？

controls是一个布尔属性，用于指定视频播放器是否显示默认的控制条。当controls属性被设置为true时，浏览器会自动在视频播放器下方显示一个控制条，包含播放/暂停按钮、音量调节、全屏按钮等功能。

如何使用controls属性？

要在网页中使用controls属性，首先需要使用<video>标签来定义一个视频播放器，并在其中添加controls属性。下面是一个简单的示例代码：

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

在上面的代码中，我们定义了一个带有控制条的视频播放器，并指定了视频文件的路径。如果浏览器不支持<video>标签，会显示Your browser does not support the video tag.。

控制条的样式定制

虽然controls属性可以快速实现一个默认样式的控制条，但有时我们可能希望对控制条进行定制，以适应网页的整体风格。这时可以通过 CSS 来自定义控制条的样式。

下面是一个简单的示例代码，用于隐藏默认控制条并自定义样式：

// www.javascriptcn.com code example
<style>
  video {
    width: 100%;
  }

  /* 隐藏默认控制条 */
  video::-webkit-media-controls {
    display: none;
  }

  /* 自定义控制条样式 */
  .custom-controls {
    background-color: #333;
    color: white;
    padding: 10px;
  }

  .custom-controls button {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    margin-right: 10px;
  }
</style>

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

在上面的代码中，我们使用 CSS 隐藏了默认控制条，并定义了一个自定义的控制条样式。通过在<video>标签中添加class="custom-controls"，我们可以应用这个自定义样式。

总结

通过使用controls属性，我们可以快速实现一个带有控制条的视频播放器，并通过 CSS 进行样式定制。希望本文对你有所帮助，谢谢阅读！