在 HTML 中暂停视频后显示海报答案

【问题标题】：Show the poster after pausing the video in HTML在 HTML 中暂停视频后显示海报
【发布时间】：2017-01-05 09:24:21
【问题描述】：

我有这个代码

<video id="primorvid" onclick="this.paused ? this.play() : this.pause();" poster="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Untitled-18.jpg" width="1903" height="564">
<source src="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Primor-V.4-HD.mp4" type="video/mp4" />
</video>

视频有效，在我点击视频之前它会显示一张海报图片，并且播放/暂停工作正常 -

如果我想让海报在我暂停视频后再次出现，我该如何从这里开始？

非常感谢大卫

【问题讨论】：

标签： jquery html video pause poster

【解决方案1】：

添加这个JS代码：

const vid = document.querySelector('#primorvid');
let currentTime = 0;

vid.addEventListener('click', function(e) {
    if (vid.paused) {
        currentTime = vid.currentTime;
        vid.load();
    } else {
        vid.currentTime = currentTime;
    }
});

说明：

const vid = document.querySelector('#primorvid');
let currentTime = 0;

只需获取视频并将其存储在 vid 中，然后声明 currentTime，我们将在其中存储视频暂停的时间。

我们为视频添加点击事件监听器：

vid.addEventListener('click', function(e) { ... });

如果视频的最后状态正在播放（即现在已暂停），请保存当前时间并重新加载（这会显示海报并暂停视频）：

if (vid.paused) {
    currentTime = vid.currentTime;
    vid.load();
} else {
    vid.currentTime = currentTime;
}

否则，将当前时间设置为之前的时间并重新播放。

另一个不会暗示再次缓冲视频的解决方案是为您的海报设置一个覆盖元素，并在视频暂停时显示它，以及一个事件侦听器。

【讨论】：

【解决方案2】：

你可以试试这个。

var vrVid = document.getElementById("primorvid");
var pauseTime = vrVid.currentTime;
vrVid.load();
vrVid.currentTime = pauseTime;
vrVid.play();

我认为它会解决您的问题，但我认为这不是最好的解决方案，因为它会重新加载视频并缓冲。

【讨论】：