Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #346637 Score: 0
    Profile photo of kc raven
    kc raven
    Member
    beginner
    intermediate
    wise owl
    friend finder
    curious george
    contributor
    1 pt
    @kraven7771

    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);
    });

    });

    #346691 Score: 0
    Profile photo of kc raven
    kc raven
    Member
    beginner
    intermediate
    wise owl
    friend finder
    curious george
    contributor
    1 pt
    @kraven7771

    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);

    });

    });

    • This reply was modified 9 months ago by Profile photo of kc raven kc raven.
    #353752 Score: 0
    Profile photo of Jurg van der Vlies
    Jurg van der Vlies
    Member
    beginner
    intermediate
    advanced
    curious george
    wise owl
    contributor
    2 pts
    @Jurg

    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;

    #353759 Score: 0
    Profile photo of kc raven
    kc raven
    Member
    beginner
    intermediate
    wise owl
    friend finder
    curious george
    contributor
    1 pt
    @kraven7771

    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.

    custom play bar with html extention

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.