创建一个自定义＆＃34; play＆＃34;视频按钮

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>

基本上我们有视频盒，以及＆＃34;播放＆＃34;按钮。我想知道如果通过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";
  }
});