My html5 video event listener is designed to pause the video at a specific time while the user participates in a quiz. The first 'lesson' works fine, and the second video also appears to add the listener with the correct pause time. However, when playing the second video, it always pauses at 170 seconds, which was the pause time from the FIRST video.
Furthermore, when I check Chrome's dev panel, I notice that the timeCache value immediately reverts back to the previous video's values as soon as the video starts playing. Unless the video has passed the 170-second mark, then it will use the correct 230-second timeCache value. Initially, I suspected that the old event listener might still be attached, but after eliminating that possibility, the problem persists. You can find the link here:
var setPause = function (time) {
var video = $("video").get(0);
var timeCache = time;
video.removeEventListener('timeupdate', timeListener, false);
function timeListener (){
if (video.currentTime >= timeCache && video.currentTime < (timeCache + 0.3)) {
video.pause();
}}
video.addEventListener('timeupdate', timeListener);
};
The initial $watch in the directive triggers each time a new lesson is loaded. It binds the ended event as well as the timeupdate listener using setPause() before loading and playing the video. The purpose of setPause is to set the time at which the video will automatically pause, and the second $watch waits until all questions have been answered before playing the remainder of the video (usually a congratulatory message).
app.directive('videoWatcher', function () {
return function (scope, video, attrs) {
scope.$watch(attrs.videoLoader, function () {
$(video[0]).bind('ended', function () {
$(this).unbind('ended');
if (!this.ended) {
return;
}
scope.tutorialNumber++;
scope.$apply();
scope.loadFromMenu();
});
setPause(scope.currentTutorial.pause);
video[0].load();
video[0].play();
});
scope.$watch(attrs.congrats, function(){
var cT = scope.currentTutorial;
if (scope.questionNumber === cT.material.length){
video[0].play();
setTimeout(function () {
video[0].play();
}, 500);
}
});
};
})