您好我正在为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>
答案 0 :(得分: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);
答案 1 :(得分:2)
另一种解决方案是致电:
video.load()
它将重新显示海报图像。它将在下次交互时重新启动视频,但如果您愿意,可以保存时间戳并从那里开始播放。