javascript - How to change current time of a paused html5 video and start playing from that position? - Stack Overflow

admin管理员组

文章数量:1406949

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

Share Follow asked Dec 9, 2014 at 10:22 user2718671user2718671 2,9761212 gold badges5353 silver badges8989 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签：