HTML5视频中设置currentTime的问题

Issue setting currentTime in HTML5 video

本文关键字：问题 currentTime 设置 视频 HTML5      更新时间：2023-10-27

我的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，也会出现同样的错误。

控制台中显示的错误如下："Uncaught InvalidStateError:试图使用一个不可用或不再可用的对象。"（在currentTime行中），但当我搜索这个问题时，我无法将其与视频联系起来，只能与画布联系起来。

提前感谢

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

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

如上所述，当视频不可见时，您尝试设置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;
  }
}

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

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

myVid.play();
myVid.media.addEventListener('playing', function(){
    myVid.setCurrentTime(5);
});
相关文章：