CODEWITHSUNDEEP
jqueryhtmlhtml5-video
Jimmery
Jimmery

Reputation: 10139

Selecting the HTML5 Video Object with jQuery

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?

Upvotes: 13

Views: 22562

Answers (7)

TheJeff
TheJeff

Reputation: 4101

I had the same problem with audio. It is a disaster :). You have to play the audio before you can set currentTime. I found no other way around it. Here is a good thread for reference: https://github.com/johndyer/mediaelement/issues/243

Play the element, then set an event listener for the 'playing' event that will set the current time. I had to prevent an infinite loop, so I set a 'loadPlayed' outside the method. It may not be elegant, but it is what works so I'm keeping 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);
    }
});

Upvotes: 2

user2718671
user2718671

Reputation: 2976

I had a similiar problem but can't use the event listener because I work with timecodes and click functions to set the current time. But I also found a working solution. Whenever I click on one button (every single button has a different time variable) this is the code within the click function:

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

So with waiting 0.5 seconds before firing the function the InvalidStateError won't occur anymore. Maybe it's a quick and dirty solution but it works ;)

Upvotes: 1

zauni
zauni

Reputation: 76

You could also use a 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();
    }

});

Upvotes: 1

Adriano di Lauro
Adriano di Lauro

Reputation: 589

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;
    });
  }
});

Upvotes: 6

brennanyoung
brennanyoung

Reputation: 6524

I am having the exact same problem (with audio). I don't believe that the accepted answer resolves or explains the problem at all, largely because it is not a jquery solution.

The odd thing is I can get the currentTime property, and I can even make sure that the sound has already played before trying to set currentTime and the same error occurs, so I don't believe this has anything to do with the media being '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

A workaround is to use a setTimeout

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

...but I would like to understand why it is failing!

Upvotes: 6

Oswaldo Acauan
Oswaldo Acauan

Reputation: 2740

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

$(window).load(function(){
  playVid();
});

Here is a jsfiddle exemple.

Upvotes: 3

Crake
Crake

Reputation: 1679

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

Upvotes: 9

Related Questions