html video progress bar with js
February 21, 2017 12:00 AM
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.
undefined
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);
});
});
Discussion (3)
figured it out,
Had to make all the variables global.
undefined
$( 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);
});
});
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/
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;
Discussions have been disabled for this post