Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make html5 video go to first frame when it ends?

I have a simple video html5 tag, bound to an "ended" event:

$('#video').show().trigger("play").bind('ended', function () { 
//code
}

Since I'm "showing" and "hiding" this through a button click, I wanted to make it return to the first frame on that last function, so it would start from the beginning the next time it appears (right now it starts from the ending, and it causes a nasty flicker when it goes from the last to the first frame).

Is that possible with jQuery?

Thanks in advance!

like image 750
CCrawler Avatar asked Nov 15 '11 07:11

CCrawler


People also ask

How do I show the first frame of a video in HTML?

You can set preload='auto' on the video element to load the first frame of the video automatically.

How do you prevent HTML5 video from changing size when loading a new source?

If all you want is really to avoid the width/height to return to defaults (300 x 150) when the next video is loading, you just have to set your <video> 's width and height properties to the ones of the loaded video ( videoWidth and videoHeight are the real values of the media, not the ones of the element).

How does HTML5 video work?

HTML5 video works by allowing the person uploading the video to embed it directly into a web page. It works in a variety of internet browsers, including Internet Explorer 9+, Firefox, Opera, Chrome and Safari. Unfortunately, the technology is not compatible with Internet Explorer 8 and earlier versions.

How do I view HTML5 video?

You can view HTML5 videos on all popular browsers such as Google Chrome, Internet Explorer, Mozilla Firefox, and Safari.


1 Answers

You can use something like

$('#video').show().trigger("play").bind('ended', function () { 
    this.currentTime = 0;
}

You can only set the currentTime if the loadedmetadata event has passed.

like image 97
Niels Avatar answered Sep 23 '22 01:09

Niels