CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Chris Mowbray
Chris Mowbray

Reputation: 295

Play few seconds of video onclick

Is there a way to play html video only for few seconds?

Currently when a user clicks on a table row the video seeks to a predefined time (highlighted below). So in the below example the video would seek to 7 seconds.

Is there a way to play the video from seconds onwards for just 10 seconds? i.e seek to 00:07 and play to 00:17 and stop?

enter image description here

Thanks

Upvotes: 0

Views: 6106

Answers (3)

demux
demux

Reputation: 4654

I made a small script which might help with this. https://github.com/demux/jquery-video-cuepoints

Usage:

$(document).ready(function() {
    var $v = $('#video');
    $v.cuepoints({
        17: function() {
            $v[0].stop();
        }
    });

    $('button').click(function(){
        $v[0].play();
        try {$v[0].currentTime = 7;} catch(e) {}
    });
});

Upvotes: 0

Felix
Felix

Reputation: 38112

You can use timeupdate event along with currentTime attrribute

function playVideo() {
    var starttime = 7;  // start at 7 seconds
    var endtime = 17;    // stop at 17 seconds

    var video = document.getElementById('yourVideoId');

    video.addEventListener("timeupdate", function() {
       if (this.currentTime >= endtime) {
            this.pause();
        }
    }, false);

    //suppose that video src has been already set properly
    video.load();
    video.play();    //must call this otherwise can't seek on some browsers, e.g. Firefox 4
    try {
        video.currentTime = starttime;
    } catch (ex) {
        //handle exceptions here
    }
}

Upvotes: 1

Travis Petrie
Travis Petrie

Reputation: 417

You could create a timer so after you "seek" the video, it will stop the video in 10 seconds. so inside you seek function you would place.

var Video = $('Video Element')[0];
// After getting the video element play it.
Video.play(); 
// Now create a timer so in 10 second (1s = 1000 so 10s = 10000 ms) it will pause the video.
setTimeout(function(){
    Video.pause(); 
},10000);

Upvotes: 0

Related Questions