JavaScript停止并返回海报HTML 5视频

Question

这是我的JavaScript，当按下按钮时，它会暂停并播放HTML 5视频，但我想停止播放视频而不是暂停并返回到视频海报，我该如何实现？

function vidplay() {
    var video = document.getElementById("bg-vid");
    var button = document.getElementById("play");
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

Answer 1

我能找到的最简单的方法是重置视频源。 处理它的另一种方法是让div贴上海报图像，因为您换了视频。

此方法的问题在于，通过重置源，您会丢失播放头位置，因此，如果重要的话，您还需要在重置之前跟踪currentTime，并且在播放时将播放头设置回该currentTime值

<script>
    var vid=document.getElementById('bg-vid');
    vid.addEventListener("pause", resetVideo, false);

    function resetVideo() {
        // resets the video element by resetting the source
        this.src = "video.mp4" // **source of video**
    }
</script>       

Answer 2

使用load()方法（尽管我相信更改src属性会隐式调用它）：

...
if (video.paused) {
  video.play()
} else {
  load();
}
...

注意：此方法会重新加载资源，因此，根据缓存设置，可能会重新下载资源，从而导致不必要的带宽和CPU使用率。