html video progress bar with js

kraven7771
kraven7771 Community Member Posts: 50
I'm working with Lectora 17, and I'm trying to figure out a way to have a custom playbar done with html and js.

I'm using a HTML video with the html extensions, and it seems a like most of my javascript is working expect for  2 crucial parts.  The parts that updates the information on screen. I can see it working in console.log perfectly, but when it comes to updating the text on screen with the current time and add on to the width for the progressbar, they appear to be completely being ignored in the 'timeupdate' function. Does Lectora require an extra step to make this work or it needs to be done a different way? I've tested this on a regular HTML setup and it worked perfectly fine. I haven't found anything about this being an issue for anyone.

 

JS

$( document ).ready(function() {

var video = $("video")[0];

//Play/Pause control clicked
$('.btnPlay').on('click', function() {
if(video.paused) {
video.play();
}
else {
video.pause();
}
});

//get HTML5 video time duration
$("video").on('loadedmetadata', function() {
$('.duration').text(video.duration);
});

//update HTML5 video current play time
$("video").on('timeupdate', function() {
var currentPos = video.currentTime; //get currentime
var maxduration = video.duration; //get video duration
var percentage = (100 * currentPos / maxduration)+'%';
$('.currentPos').text(currentPos); //Not working
$('.timeBar').css('width', percentage); //Not working

console.log('currentPos: '+ currentPos);
console.log('percentage: '+ percentage);
});

});

Comments

  • kraven7771
    kraven7771 Community Member Posts: 50
    figured it out,

    Had to make all the variables global.

     

    $( document ).ready(function() {
    var video = $("video")[0];
    var current = $('span.currentPos');
    var time = $('div.timeBar');
    var currentPos;
    var maxduration;
    var percentage;

    //Play/Pause control clicked
    $('.btnPlay').on('click', function() {
    if(video.paused) {
    video.play();
    }
    else {
    video.pause();
    }
    });

    //get HTML5 video time duration
    $("video").on('loadedmetadata', function() {
    $('.duration').text(video.duration);
    });

    //update HTML5 video current play time
    $("video").on('timeupdate', function() {
    currentPos = video.currentTime; //get currentime
    maxduration = video.duration; //get video duration
    percentage = (100 * currentPos / maxduration)+'%';
    if(percentage === 'NaN%') {
    percentage= "0%";
    }
    current.text(currentPos);
    time.css('width', percentage);
    $('.trythis').text('im working');

    console.log('currentPos: '+ currentPos);
    console.log('percentage: '+ percentage);

    });

    });
  • jurg
    jurg Community Member Posts: 28
    Hi Raven,

    Great work. I am trying to skip parts in the video with javascript. But my script seems to go wrong somewhere. Do you have any ideas as on how to skip video to  a certain point in time?

    Currently:

    var vid = document.getElementById("video10"); vid.currentTime=5;
  • kraven7771
    kraven7771 Community Member Posts: 50
    Hi,

    I have a complete file setup available here.

    It looks like you're on the right. I'm not sure how you're activating the action to get it to skip  seconds.

    Feel free to look at the file setup. I have skipping on videos setup on it too.

    http://community.trivantis.com/forums/topic/custom-play-bar-with-html-extention/
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!