web-dev-qa-db-ja.com

HTML5ビデオのcurrentTimeの設定に関する問題

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行）しかし、この問題を検索すると、ビデオのみ、キャンバスのみに関連付けることができません。

前もって感謝します

javascripthtmlvideohtml5-video
16
Yises

再生が始まるのを待つ必要はありませんが、再生の準備ができている必要があります。そのための canplay イベントがあるため、次のようなものが機能するはずです。

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

上記のように、ビデオがシークできないときに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
bhongy
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;
          }
     }
}
0
Ruthe