Created a mini interactive video module based on a tutorial but weirdly enough, the code works on Chrome but not on firefox or Waterfox.. Can anyone figure out what's wrong?
In this project, the video gets paused & resumed at several specific time intervals to wait for user input. The pausing and resuming works on Chrome but firefox doesnt seem to register anything.
Also, during development when it did work, the timeupdate paused the video at different intervals on firefox than it did on 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));
}
}
Here is a link to the entire project : https://www.dropbox.com/s/ssxvrvrfwu5izss/Webmodule.rar?dl=0
Would appreciate if someone could help me here or one on one..