显示海报图像或暂停按钮时，HTML5视频暂停

Show poster image or pause button when HTML5 video is paused?

本文关键字：暂停 HTML5 视频 按钮 图像 显示 海报      更新时间：2023-09-26

嗨，我正在为iPad编写一个本地网站，并有一个没有控件的视频，当点击时播放和暂停。当视频暂停时，是否可以显示海报图像?或者在中间显示暂停按钮?下面是我用来播放和暂停的代码:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
    video.pause();
    videoPlaying = false;
}
else {
    video.play();
    videoPlaying = true;
}
}
}//]]>  
</script>

和视频的HTML 

<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4"  type="video/mp4">
</video>

另一个解决方案是调用:

video.load()

它将重新显示海报图像。它将在下次交互时重新开始视频，但如果你愿意，你可以保存时间戳并从那里开始播放。

您必须在视频上注册暂停事件。

像这样:JSFiddle代码

当然，您应该根据需要修改它并添加一些结构。不过我还没在iPad上试过。另外要注意的是:注册点击会在点击事件上引入300毫秒的延迟。你应该查看触摸设备的touchstart事件，并注册click和touchstart。

var overlay         = document.getElementById('video-overlay'),
    video           = document.getElementById('video'),
    videoPlaying    = false;
function hideOverlay() {
    overlay.style.display = "none";
    videoPlaying = true;
    video.play();
}
function showOverlay() {
    // this check is to differentiate seek and actual pause 
    if (video.readyState === 4) {
        overlay.style.display = "block";
        videoPlaying = true;
    }
}
video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);
相关文章：