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。

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

<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使用率。

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

2 个答案: