video标签自定义播放控件

在 HTML5 中，`<video>` 元素是用来嵌入视频的标签，它支持一些默认的播放控件，如播放/暂停、音量控制、全屏等。如果你想使用自定义的播放控件，可以使用 JavaScript 来实现。

以下是一个简单的实现自定义播放控件的示例代码：

<video id="myVideo" width="640" height="360" controls></video>
<div id="custom-controls">
  <button id="playpause-btn"></button>
  <input id="volume-range" type="range" min="0" max="1" step="0.1" value="1">
  <button id="fullscreen-btn"></button>
</div>

在这个示例中，我们创建了一个 `<video>` 元素，它有默认的播放控件，还创建了一个 `<div>` 元素，用来放置自定义的播放控件。其中包括一个播放/暂停按钮、一个音量控制滑块和一个全屏按钮。

接下来，我们使用 JavaScript 来实现自定义播放控件的功能：

var video = document.getElementById("myVideo");
var playpauseBtn = document.getElementById("playpause-btn");
var volumeRange = document.getElementById("volume-range");
var fullscreenBtn = document.getElementById("fullscreen-btn");

// 播放/暂停按钮点击事件
playpauseBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

// 音量控制滑块事件
volumeRange.addEventListener("input", function() {
  video.volume = this.value;
});

// 全屏按钮点击事件
fullscreenBtn.addEventListener("click", function() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
});

在这个 JavaScript 代码中，我们首先获取了 `<video>` 元素和自定义控件的 DOM 元素，然后为每个控件添加了相应的事件处理程序。当播放/暂停按钮被点击时，我们检查视频的状态并切换播放/暂停状态；当音量控制滑块的值发生变化时，我们将视频的音量设置为滑块的值；当全屏按钮被点击时，我们调用相应的 API 来请求全屏显示视频。

这就是一个简单的自定义播放控件的实现。你可以根据自己的需求修改代码来添加更多的功能。