HTML5视频暂停时显示海报图片或暂停按钮？ [英] Show poster image or pause button when HTML5 video is paused?

问题描述

您好我正在为iPad编写本地网站的编码，并且在点击时播放没有控件的视频会播放和暂停。视频暂停时是否可以显示海报图像？或者在中心显示一个暂停按钮？这是我播放和暂停的代码：

Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing:

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

推荐答案

另一种解决方案是致电：

Another solution is to call:

video.load（）

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

It will redisplay the poster image. it will restart the video on next interaction, but you can save the time stamp and start playing from there if you wish.

这篇关于HTML5视频暂停时显示海报图片或暂停按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！