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

问题描述

我有这个代码

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

该视频有效，它在我单击该视频之前显示了一张海报图像，并且播放/暂停效果良好-

the video works, it shows a poster image before i click the video, and the play/pause is working fine-

如果我想在暂停视频后重新显示海报，怎么从这里开始?

how do i proceed from here if i want the poster to reappear again after i pause the video?

非常感谢你大卫

推荐答案

添加此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，我们将在其中存储视频暂停的时间.

Just getting the video and storing it in vid, and declaring a currentTime where we will store the time at which the video was paused.

我们在视频中添加了一个点击事件监听器:

We add a click event listener to the video:

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

如果视频的上一个状态正在播放(即现在已暂停)，请保存当前时间并重新加载(显示海报并暂停视频):

If the video's last state was playing (i.e. it is now paused), save the current time and reload it (this shows the poster and pauses the video):

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

否则，将当前时间设置为以前的时间，然后再次播放.

Else, set the current time to what it was before and play again.

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

Another solution which wouldn't imply buffering the video again would be to set an overlaying element with your poster and show it when the video is paused, alongside an event listener.

这篇关于暂停HTML格式的视频后显示海报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！