使用 JavaScript 实现视频播放控件（false）

如果你想为你的网站添加一个视频播放控件，可以使用 JavaScript 实现。下面是一个简单的示例，演示了如何使用 JavaScript 实现视频播放控件。

HTML

首先，你需要在 HTML 中添加一个 <video> 标签，用于显示视频。

<video id="my-video" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

在这个示例中，我们定义了一个 id 为 my-video 的 <video> 标签，并添加了两个 <source> 标签，用于指定两个不同格式的视频文件。

JavaScript

现在我们需要添加一些 JavaScript 代码，以便用户可以控制视频播放。

const video = document.getElementById('my-video');
const playButton = document.getElementById('play-button');
const pauseButton = document.getElementById('pause-button');

playButton.addEventListener('click', () => {
  video.play();
});

pauseButton.addEventListener('click', () => {
  video.pause();
});

在这个示例中，我们获取了 <video> 标签和两个按钮元素，并添加了点击事件处理程序，用于播放和暂停视频。

CSS

最后，我们可以使用 CSS 添加样式，以美化视频控件。

#my-video {
  width: 100%;
  height: auto;
}

#play-button, #pause-button {
  background-color: #008CBA;
  color: #fff;
  border: none;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}

#play-button:hover, #pause-button:hover {
  background-color: #006CBA;
}

在这个示例中，我们定义了 <video> 标签的宽度和按钮元素的样式。

现在你已经学会了如何使用 JavaScript 实现视频播放控件。去试试吧！

参考资料：W3Schools - HTML5 Video