Javascript 向html5视频添加关闭按钮

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

我在想，我可以在关闭按钮的页面上添加一个图像&使用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>

---

您需要将视频和容器放入如下容器中：

<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>

window.onload=函数（）{
//录像带
var video=document.getElementById（“视频”）；
//钮扣
var playButton=document.getElementById（“播放暂停”）；
var stopHideButton=document.getElementById（“停止”）；
//现在已经设置好了，您可以为按钮编写函数脚本
playButton.addEventListener（“单击”，函数（）{
如果（video.paused==true）{
video.play（）；//播放视频并将播放按钮文本更改为“暂停”
playButton.innerHTML=“暂停”；
}否则{
video.pause（）；//暂停视频并将文本更改为“播放”
playButton.innerHTML=“播放”；
}   
});
addEventListener（“单击”，函数（）{
video.pause（）；
//现在您可以通过几种方式删除它。一种是将源设置为Null
video.src=“”；
//或者，完全删除包含视频的div
video.parentNode.removeChild（视频）；
});
}

有关HTLM5视频和音频的更多信息，请参考