Selecting the HTML5 Video Object with jQuery

Question

Im having problems getting at the HTML5 video tag with 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 on the .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 the bit that I cant figure out - the first console.log shows the object I would expect, inside this object is another object called 0 and this holds all the HTML5 video properties and methods you would expect, including .currentTime.

However as soon as I do the second log of $('#vid')[0] it shows the HTML code for the video tag, and not the object I was after called 0. I get the exact same results for console.log($('#vid')["0"]) and console.log($('#vid').get(0)).

Is there a way of getting at the object called 0 in the object returned by $('#vid') that works in jQuery?

Answer 1

I think you are trying to interact with the video element before 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 - Error settings currentTime