1. ホーム
  2. javascript

[解決済み] HTML5 動画の読み込み時に特定の位置から開始させる?

2022-10-27 18:51:34

質問

HTML5動画をある時点から開始させたい。 例えば、50秒からとします。

試してみましたが、期待通りに動作しません。何か間違ったことをしているのでしょうか?

以下はそのコードです。

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script> 

ページを読み込むと、最初から再生が始まってしまいます。 しかし、しばらくしてから再生中にこれを呼び出すと、正常に動作します。 何か見落としがあるのでしょうか?

どのように解決するのですか?

特定の時間にシークするためには、ブラウザが動画の継続時間を知るまで待つ必要があります。そこで、次のような 'loadedmetadata' イベントを待ちたいのだと思います。

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);