Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wait until an HTML5 video loads

I have a video tag, that I dynamically change its source as I am letting the user to choose from a number of videos from the database. The problem is that when I change the src attribute the video doesn't load even if I tell it to.

Here is my code:

$("#video").attr('src', 'my_video_'+value+'.ogg'); $("#video").load(); while($("#video").readyState !== 4) {         console.log("Video is not ready"); }; 

The code still stays in a infinite loop.

Any help?

EDIT:

To Ian Devlin:

//add an listener on loaded metadata v.addEventListener('loadeddata', function() {     console.log("Loaded the video's data!");     console.log("Video Source: "+ $('#video').attr('src'));     console.log("Video Duration: "+ $('#video').duration); }, false); 

Ok this is the code I have now. The source prints great, but I still can't get the duration :/

like image 470
Test Test Avatar asked Dec 13 '12 17:12

Test Test


People also ask

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

Why video is not playing in HTML5?

For playing the videos on web browsers, there is a new type of video element designed that is HTML5. If you see the message “HTML5 video not found” while playing a video on a web page, it means your browser doesn't support the HTML5 format codecs or missed some video codecs.

Why is my video not loading in HTML?

If you encountered “HTML5 video not found” error while playing a video on any website then it implies your browser doesn't support the HTML5 format codecs or your browser doesn't have the proper video codec installed.

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.


1 Answers

You don't really need jQuery for this as there is a Media API that provides you with all you need.

var video = document.getElementById('myVideo'); video.src = 'my_video_' + value + '.ogg'; video.load(); 

The Media API also contains a load() method which: "Causes the element to reset and start selecting and loading a new media resource from scratch."

(Ogg isn't the best format to use, as it's only supported by a limited number of browsers. I'd suggest using WebM and MP4 to cover all major browsers - you can use the canPlayType() function to decide on which one to play).

You can then wait for either the loadedmetadata or loadeddata (depending on what you want) events to fire:

video.addEventListener('loadeddata', function() {    // Video is loaded and can be played }, false); 
like image 126
Ian Devlin Avatar answered Sep 21 '22 04:09

Ian Devlin