Question

我有这段代码

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

视频有效，在点击视频之前显示海报图片，播放/暂停工作正常 -

如果我希望在暂停视频后再次出现海报，我该如何从此处继续？

非常感谢你大卫

Answer 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;
}

否则，将当前时间设置为之前的状态并再次播放。

另一个不会暗示再次缓冲视频的解决方案是在你的海报上设置一个重叠元素，并在视频暂停时与事件监听器一起显示。

Answer 2

你可以试试这个。

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

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

在以HTML格式暂停视频后显示海报

2 个答案: