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

【问题标题】：Javascript stop and return to poster HTML 5 videoJavascript 停止并返回海报 HTML 5 视频
【发布时间】：2014-05-01 20:54:07
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html video

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我能找到的最简单的方法是重置视频源。处理它的另一种方法是使用带有海报图像的 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>

【讨论】：