Question

我在wordpress网站上有一个html5视频，我想添加一个关闭按钮，它将停止视频播放和放大删除/隐藏视频。

我在想我可以将图像添加到关闭按钮的页面上。使用javascript停止并在点击时隐藏视频。虽然我不确定如何在视频的右上角正确放置关闭按钮的图像？

有更好的方法吗？

<video id="hp-video-player" controls="controls" preload="auto" loop="true">
    <source type="video/mp4" src="sample.mp4">
    <source type="video/webm" src="sample.webm">
</video>

Answer 1

您需要将视频和容器放在像这样的容器中：

<div id="video-container">
    <video id="hp-video-player" controls="controls" preload="auto" loop="true">
    <source type="video/mp4" src="sample.mp4">
    <source type="video/webm" src="sample.webm">
    </video> 
  <!--  Controls -->
  <div id="video-controls">
    <button type="button" id="play-pause">Play</button>
    <button type="button" id="stop">Stop-Hide</button>
  </div>
</div>

现在你只需要添加javascript。

<script type="text/javascript">
        window.onload = function() {
          // Video
          var video = document.getElementById("video");  
          // Buttons
          var playButton = document.getElementById("play-pause");
          var stopHideButton = document.getElementById("stop");
          //Now that that stuff is setup, you can script the functions for the buttons
          playButton.addEventListener("click", function() {
            if (video.paused == true) {
                video.play(); // Play video and change play button text to 'pause'
                playButton.innerHTML = "Pause";
            } else {
                video.pause(); //Pause the video and change text to 'play'
                playButton.innerHTML = "Play";
            }   
          });
                stopHideButton.addEventListener("click", function(){
                video.pause();
        //Now you can remove it a few ways. One being setting the source to Null
                video.src="";
        //or two, remove the div containing the video completely
              video.parentNode.removeChild(video);

          });
        }
</script>

您可以参考this site了解有关HTLM5视频和音频的更多信息。

为html5视频添加关闭按钮

1 个答案: