Jquery 暂停HTML格式的视频后显示海报
我有这个密码Jquery 暂停HTML格式的视频后显示海报,jquery,html,video,pause,poster,Jquery,Html,Video,Pause,Poster,我有这个密码 <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/u
<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>
视频工作正常,在我点击视频之前显示海报图像,播放/暂停工作正常-
如果我想在暂停视频后再次显示海报,我该如何从这里开始
多谢各位
David添加此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;
}
如果视频的上一个状态正在播放(即现在已暂停),请保存当前时间并重新加载(显示海报并暂停视频):
否则,将当前时间设置为之前的时间,然后重新播放
另一个不意味着再次缓冲视频的解决方案是在海报上设置一个覆盖元素,并在视频暂停时与事件侦听器一起显示。您可以尝试此方法
var vrVid = document.getElementById("primorvid");
var pauseTime = vrVid.currentTime;
vrVid.load();
vrVid.currentTime = pauseTime;
vrVid.play();
我认为这将解决你的问题,但我不认为这是最好的解决方案,因为它将重新加载视频,并将缓冲