1

我有这个代码

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

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

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

非常感谢大卫

4

2 回答 2

2

添加这个 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;
}

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

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

于 2016-08-29T11:12:07.793 回答
0

你可以试试这个。

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

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

于 2016-08-29T11:15:02.227 回答