在 HTML5 视频中设置 currentTime 问题答案

【问题标题】：Issue setting currentTime in HTML5 video在 HTML5 视频中设置 currentTime 问题
【发布时间】：2013-12-12 22:54:17
【问题描述】：

我的 html 中间有一个视频。正如你所看到的，我没有任何来源

<video id="videoPrincipal" src="" width="640" height="360" controls preload></video>

当我点击一个按钮时，我会触发一个函数：

myVid = document.getElementById('videoPrincipal');
myVid.src = 'video.mp4';
myVid.play();
myVid.currentTime ='5';

视频开始正常播放，但我无法设置当前时间（我设置的时间与我们在http://www.w3schools.com/tags/av_prop_currenttime.asp 中看到的一样）

如果我在调用 play 函数之前设置 currentTime，它会给我同样的错误。

控制台中显示的错误如下：“未捕获的 InvalidStateError：尝试使用不可用或不再可用的对象。” （在 currentTime 行中）但是当我搜索这个问题时，我无法与视频相关联，只能与画布相关联。

提前致谢

【问题讨论】：

标签： javascript html video html5-video

【解决方案1】：

您不必等待它开始播放，但它必须准备好播放。有 canplay 事件可以做到这一点，所以这样的事情应该可以工作：

myVid.play();
myVid.addEventListener('canplay', function() {
    this.currentTime = 5;
});

【讨论】：

这让我发疯了。这样就解决了。谢谢。
这很好，所有支持video标签的浏览器都可以处理canplay。
您好，您知道自动播放发生时对应的事件是什么吗？是在“canplay”之后发生的吗？
可能只是“播放”，也就是视频开始播放的时候。
设置currentTime 会触发canplay 事件，所以这个例子创建了一个循环。

【解决方案2】：

如上所述，当视频不可搜索时，您尝试设置 currentTime。因此，作为替代用例（例如，当用户单击按钮时将时间重置为 0），您可以执行以下操作：

function resetVideo() {
  myVid.pause();
   
  if (myVid.seekable.length > 0) {
    myVid.currentTime = 0;
  }
}

或者，您也可以仅在之前播放过视频时尝试重置。

function resetVideo() {
  myVid.pause();
   
  if (myVid.currentTime !== 0) {
    myVid.currentTime = 0;
  }
}

【讨论】：

【解决方案3】：

video = document.getElementById('video');
begin_play  = 50;
play_video_first = true; //if you want to run only first time    
video.addEventListener("play", capture, false);

function capture(event) 
{
     if (event.type == "play"){
         if(play_video_first){
             play_video_first = false;
             video.currentTime = begin_play;
          }
     }
}

【讨论】：

【解决方案4】：

你必须等到它准备好播放，
即不要指望play 是一个阻塞函数
更改您的代码如下：

myVid.play();
myVid.media.addEventListener('playing', function(){
    myVid.setCurrentTime(5);
});

【讨论】：