当HTML5视频暂停时，显示海报图像还是暂停按钮？

Question

你好，我正在为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>

- user3795130

Answer 1

另一个解决方案是调用：video.load()。它将重新显示海报图像。下一次互动将重新启动视频，但如果您希望，可以保存时间戳并从那里开始播放。

- Tomer Almog

Answer 2

你需要在视频中注册暂停事件。

类似这样： 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);

- Rok Burgar