为视频创建自定义“播放”按钮

Question

这是我现在的主要标记。

<div id="video_container">
   <video id="video">
      <source src="popeye_patriotic_popeye.mpeg" type="video/mp4">
   </video>

</div>
<button type="button" id="play_button">Play</button>

基本上我们有视频框，以及“播放”按钮。我想知道是否通过 javascript，可以允许此按钮播放/暂停视频。我不确定这是否可行，但如果可行，请告诉我我将如何去做。

谢谢

Answer 1

这在 JavaScript 中很容易完成，而且实际上非常基础。

下面的代码会为你做这件事：

var playButton = document.getElementById("play_button");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});