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

Posted 2023-03-12

【中文标题】暂停 HTML5 视频时显示海报图像或暂停按钮？

【英文标题】：Show poster image or pause button when HTML5 video is paused?

【发布时间】：2014-07-01 19:06:07

【问题描述】：

您好，我正在为 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   poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4"  type="video/mp4">
</video>

【参考方案1】：

另一种解决方案是调用：

video.load()

它将重新显示海报图像。它将在下次互动时重新开始视频，但您可以保存时间戳并根据需要从那里开始播放。

【参考方案2】：

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

类似这样的： JSFiddle code

当然，您应该根据需要修改它并添加一些结构。不过还没有在 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);