javascript - 如何更改暂停的 html5 视频的当前时间并从该位置开始播放？

Question

我在这样的页面上有一个 html 5 视频:

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

在该视频下方，我有一个导航，您可以在其中跳至视频中的不同时间。视频播放时效果很好，但暂停时会出现以下错误:

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

这里的函数:

$('#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();
}

我添加了一个 if/else 语句来判断视频是否暂停:

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

然后尝试像上面那样设置当前时间，甚至使用设置超时功能，以便它会等到视频加载并正在播放，但这不起作用。我做错了什么或者我忘记了什么？

Answer 1

您应该更改媒体元素的 currentTime 字段，如您所见 here在 API 文档中。这里还有一个示例代码，位于 MDN

作为引用，示例代码如下:

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

其中 mediaElementID 是 audio 或 video 标记的 ID。

编辑:看来我误读了你的问题。我会进一步看看。