I have a html 5 video on a page like this:

<video preload="none" id="movie" poster=".jpeg" controls>
     <source id="mp4" type="video/mp4" src=".mp4"></source>
     <source id="webm" type="video/webm" src=".webm"></source>
</video>

Below that video I have a navigation where you can skip to different times in the video. It works perfectly when the video is playing, but when paused following error occurs:

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

Here the function:

$('#my_video_navigation a').click(function () {
    var start_in_seconds=...//a variable that gets the time from a json based on the navigation index
    $("#movie").get(0).currentTime = start_in_seconds;
    $("#movie").get(0).play();
}

I added an if/else statement wether the video is paused or not:

if ($('#movie').get(0).paused) {
    $("#movie").get(0).play(); 
}

and then tried to set the current time like above and even with a set timeout function so that it will wait till the video loaded and is playing but that didn't work. What am I doing wrong or what did I forget?

I have a html 5 video on a page like this:

<video preload="none" id="movie" poster="http://my_poster_url./sourcefile.jpeg" controls>
     <source id="mp4" type="video/mp4" src="http://my_mp4./sourcefile.mp4"></source>
     <source id="webm" type="video/webm" src="http://my_webm./sourcefile.webm"></source>
</video>

Below that video I have a navigation where you can skip to different times in the video. It works perfectly when the video is playing, but when paused following error occurs:

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

Here the function:

$('#my_video_navigation a').click(function () {
    var start_in_seconds=...//a variable that gets the time from a json based on the navigation index
    $("#movie").get(0).currentTime = start_in_seconds;
    $("#movie").get(0).play();
}

I added an if/else statement wether the video is paused or not:

if ($('#movie').get(0).paused) {
    $("#movie").get(0).play(); 
}

and then tried to set the current time like above and even with a set timeout function so that it will wait till the video loaded and is playing but that didn't work. What am I doing wrong or what did I forget?

• javascript
• jquery
• html
• video

• Did you solve this issue? – savram Commented Jul 4, 2022 at 15:47

1 Answer 1

You should change the currentTime field of the media element, as you can see here in the API doc. There is also an example code here, at MDN

For reference, the sample code there:

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Returns the starting time (in seconds)
mediaElement.seekable.end();    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end();      // Returns the number of seconds the browser has played

where the mediaElementID is the id of the audio or video tag.

Edit: It seems I've misread your question. I will take a further look.