HTML5 video object selection using jQuery

Question

I'm having trouble getting an HTML5 tag using jQuery. Here is my code:

HTML code:

<video id="vid" height="400" width="550"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </video> 

Javascript Code:

 function playVid(){ console.log($('#vid')); console.log($('#vid')[0]); $('#vid')[0].currentTime=5; $('#vid')[0].play() } $(document).ready(){ playVid(); } 

The code breaks into a .currentTime line with the following error:

 InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable 

Here is a bit that I can’t compute - the first console.log shows an object that I would expect, inside this object is another object named 0 , and it contains all the properties and methods of the HTML5 video that you expect, including .currentTime .

However, as soon as I make the second log $('#vid')[0] , it shows the HTML code for the video tag, and not the object that I got after calling 0 . I get accurate results for console.log($('#vid')["0"]) and console.log($('#vid').get(0)) .

Is there a way to get object 0 in the object returned by $('#vid') that works in jQuery?

Answer 1

I think you are trying to interact with the video element until it is ready.

Try something like this:

 function loadStart(event) { video.currentTime = 1.0; } function init() { video.addEventListener('loadedmetadata', loadStart, false); } document.addEventListener("DOMContentLoaded", init, false); 

Source: HTML5 Video - Chrome - CurrentTime Error Settings

Answer 2

I have the same problem (with sound). I don't think the accepted answer solves or explains the problem at all, mainly because it is not a jquery solution.

It is unclear whether I can get the currentTime property, and I can even make sure that the sound has already been played before trying to set currentTime, and the same error occurs, so I don’t believe it has anything to do with the fact that the media are “ready” "

 var a = $("#myaudio").get(0); // a html5 audio element console.log(a) // dumps the object reference in the console console.log(a.currentTime); // works fine, logs correct value a.currentTime = 100 // fails with an InvalidStateError 

The workaround is to use setTimeout

 setTimeout(function(){ a.currentTime = 0; },1); 

... but I would like to understand why he fails!

Answer 3

 var a_video = $('#video_id'); a_video.on('loadeddata', function() { if(a_video.readyState != 0) { a_video[0].currentTime = 100; } else { a_video.on('loadedmetadata', function() { a_video[0].currentTime = 100; }); } }); 

Answer 4

 function playVid(){ $('#vid').get(0).currentTime=5; $('#vid').get(0).play() } $(window).load(function(){ playVid(); }); 

Here is a jsfiddle example.

Answer 5

I had the same problem with audio. This is a catastrophe:). Before setting currentTime, you need to play audio. I did not find another way. Here is a good stream for reference: https://github.com/johndyer/mediaelement/issues/243

Play an item, and then set an event listener for a playback event that will set the current time. I had to prevent an infinite loop, so I set "loadPlayed" outside the method. It may not be elegant, but it is what works, so I keep it.

 audioplayer.src = source; audioplayer.play(); audioplayer.addEventListener('playing', function () { if (loadPlayed == false) { audioplayer.currentTime = Time; audioplayer.play(); loadPlayed = true; } else { audioplayer.removeEventListener('playing', this); } }); 

Answer 6

You can also use try - catch to avoid this problem:

 $(document).ready(function() { var $video = $('#vid'), video = $video[0]; function playVid() { video.currentTime = 5; video.play(); } try { playVid(); } catch(error) { $video.on('loadedmetadata', playVid); video.load(); } }); 

Answer 7

I had a similar problem, but I can not use the event listener because I work with time codes and click functions to set the current time. But I also found a working solution. Whenever I click on one button (each button has a different time variable), this is the code inside the click function:

 $("#movie").get(0).play(); setTimeout(function () { $("#movie").get(0).currentTime = my_time_variable; }, 500); 

So, waiting 0.5 seconds before the InvalidStateError function starts, it will no longer be. It may be a quick and dirty solution, but it works;)