0

根据教程创建了一个迷你交互式视频模块,但奇怪的是,该代码适用于 Chrome,但不适用于 firefox 或 Waterfox .. 任何人都可以找出问题所在吗?

在这个项目中,视频会在几个特定的​​时间间隔内暂停和恢复,以等待用户输入。暂停和恢复适用于 Chrome,但 Firefox 似乎没有注册任何内容。

此外,在开发过程中,当它确实工作时,timeupdate 在 Firefox 上以不同的时间间隔暂停视频,而不是在 chrome 上。

// Various variables
var videoHalfWay = 0;
var formattedHalfWay = 0;

// Choice parts
var choiceHeart = 2;
var partnerPart = 56;
var partnerChosen = false;
var badChoicePart = 15;       // Modified
var ending = 20;              // ADDED
var goodChoiceChosen = false;
var choiceHeartchosen = false;
var qualityChosen = false;
var costChosen = false;
var qualityQuestion = 30;
var costPart = 38;
var costCons = 36;

// Question variable
var question1Asked = false;

var video1;

$(document).ready(function(){

    $.featherlight.defaults.afterClose = playPauseVideo;

    video1 = $('#video1');

    $('.box1').on('click', function(){
        choiceHeartchosen = true;
        video1[0].play();
    });

    $('.box2').on('click', function(){

        partnerChosen = true;
        video1[0].currentTime = partnerPart;
        video1[0].play();
    });

    $('.box3').on('click', function(){ //quality
        costChosen = true;
        video1[0].currentTime = costPart;
        video1[0].play();
    });

    $('.box4').on('click', function(){ //cost
        qualityChosen = true;
        video1[0].play();

    });



    $(video1).on('loadeddata', function(){
        videoHalfWay = Math.round(this.duration/2);
    })


    $(video1).on('timeupdate', function(){

         console.log(this.currentTime);

        var currentTime = Math.round(this.currentTime*100)/100;
        console.log(currentTime);
        var durationNum = Math.round(this.duration*100)/100;
        var formattedCurrentTime = secondsToHms(currentTime);
        var formattedDurationTime = secondsToHms(durationNum)
        onTrackedVideoFram(formattedCurrentTime, formattedDurationTime)

        if(currentTime >2){ $(".box1, .box2").hide(); }

        if(currentTime <20){ $(".box4").hide(); }
        if(currentTime <22){ $(".box3").hide(); }

        if(currentTime >20){ $(".box4").show(); }
        if(currentTime >21){ $(".box3").show(); }

        if(currentTime >30){ $(".box3, .box4").hide(); }

        if(currentTime == costCons && costChosen == true){  video1[0].pause(); }

        if(currentTime == choiceHeart && choiceHeartchosen == false){

            video1[0].pause();

        }

        if(currentTime == costCons && costChosen == false){

            video1[0].pause(); //Pauses for Cost Consequence

        }

        if(currentTime == qualityQuestion && qualityChosen == false){

            video1[0].pause(); //Pauses the video at 30

        }


        if(currentTime == qualityQuestion && costChosen == true){

            video1[0].play(); //Plays Consequence for Cost Effective choice

        }




        if(currentTime == videoHalfWay){
            // Halfway point
        }

        if(currentTime == durationNum){
            // Video complete
        }

    });

});

function onTrackedVideoFram(curretTime, duration){
    $('.current').text(curretTime);
    $('.duration').text(duration);
}

function secondsToHms(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);
    return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s);
}

function playPauseVideo(popUp){
    if(video1[0].paused){
        video1[0].play();
    } else{
        video1[0].pause();
        $.featherlight($(popUp));
    }
}

这是整个项目的链接: https ://www.dropbox.com/s/ssxvrvrfwu5izss/Webmodule.rar?dl=0

如果有人可以在这里或一对一帮助我,将不胜感激。

4

0 回答 0