Button to skip html5 video to the end

Question

I have a video player which contain a skip button so that the user can skip the video to the end.

Here is html

<video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay="true">
            </video>

skip function

function skipVideoTime(){
    $('.skip_button').on('click', function () {
        var vid = $("#video1")[0];
        var vidDuration = Math.floor(vid.duration);
        skipTime(vidDuration);
        console.log(vidDuration);

    })

}

function skipTime(time) {
    var vid = $("#video1")[0];
    vid.play();
    vid.pause();
    vid.currentTime = time;
    vid.play();
    console.log(vid.duration);
};

$(function () {

     skipVideoTime();


});

Here is console logs from the above functions

32.534

32

Now when I click the button it skip to 32 minutes because I used math floor function if I remove math floor so that it can skip to 32.534 , it does not work,

what do I need to change to get what I want?

Answer 1

I believe you don't need to call the play() function again. because once media is seeked to the end (till its total duration), calling play() will do nothing but run the video again from beginning. Have a look at following code snippet.

 var video = document.getElementById("myvid"); var button = document.getElementById("button"); button.addEventListener("click", function(e) { console.log(video.duration); video.play(); video.pause(); video.currentTime = video.duration; // video.play(); })

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls id="myvid"></video> <button id="button">skip</button> </body> </html>

Button to skip html5 video to the end

Question

1 answers

solution1
2 ACCPTED 2019-03-23 16:41:49

Button to skip html5 video to the end

Question

1 answers

solution1 2 ACCPTED 2019-03-23 16:41:49

solution1
2 ACCPTED 2019-03-23 16:41:49