我正在制作需要用户互动的横幅广告。向下滚动后广告以视频开头/点击视频应该开始播放并在2秒后暂停。再次向下滚动视频将从相同的暂停位置开始播放2秒。如果用户向上滚动视频,则会在2秒的时间间隔内从同一点开始倒带。
我的问题在这里。如何在视频开始播放时禁用单击并向上滚动/向下滚动。此外,视频也不会在2秒内完全暂停。代码集中的完整代码。
http://codepen.io/harshagopalkrishna/pen/gLBbmb
var video = document.getElementById('video');
//var log = document.getElementById('log');
var intervalRewind;
//var startSystemTime;
//var startVideoTime;
$(video).on('play',function(){
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause',function(){
video.playbackRate = 1.0;
//clearInterval(intervalRewind);
});
$(video).on('ended',function(){
// this only happens when t=duration (not t==0)
video.playbackRate = 1.0;
clearInterval(intervalRewind);
//alert("video ended");
});
$("#closeButton").click(function() {
clearInterval(intervalRewind);
video.playbackRate = 1.0;
video.pause();
});
$(window).bind('mousewheel DOMMouseScroll click', function(event){
var curTime = Math.floor(video.currentTime);
var stopTime = Math.floor(2000);
if ( ( event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) && event.type != "click" ) {
//alert(stopTime);
rewind(1.0);
setTimeout(function(){
clearInterval(intervalRewind);
video.pause();
},stopTime);
}
else {
$("#video-play").hide();
clearInterval(intervalRewind);
video.playbackRate = 1.0;
if (video.paused) {video.play(); }
setTimeout(function(){
video.pause();
},stopTime);
}
});
function rewind(rewindSpeed) {
clearInterval(intervalRewind);
var startSystemTime = new Date().getTime();
var startVideoTime = video.currentTime;
intervalRewind = setInterval(function(){
video.playbackRate = 1.0;
if(video.currentTime == 0){
clearInterval(intervalRewind);
video.pause();
} else {
var elapsed = new Date().getTime()-startSystemTime;
video.currentTime = Math.max(startVideoTime - elapsed*rewindSpeed/1000.0, 0);
}
}, 30);
}