HTML5视频播放,暂停和快退滚动并点击无法正常工作

时间:2016-12-13 10:01:08

标签: javascript jquery html5 html5-video

我正在制作需要用户互动的横幅广告。向下滚动后广告以视频开头/点击视频应该开始播放并在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);
}

0 个答案:

没有答案