web-dev-qa-db-ja.com

ロード時に特定の位置でHTML5ビデオを開始しますか？

HTML5ビデオ（VP8エンコード）を再生しようとしています。私が欲しいのは、特定の位置でそれをプレイすることです。時刻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>

試しましたが、うまくいきません。ビデオが読み込まれると、最初から再生が開始されます。ただし、ビデオの再生後など、再生中にこれを呼び出すと、正常に機能します。何か足りないものはありますか？

javascripthtml5-video
74
Johnydep

特定の時間を探すには、ブラウザがビデオの長さを知るまで待つ必要があります。したがって、次のような「loadedmetadata」イベントを待ちたいと思います。

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

Media Fragments URI で直接リンクでき、ファイル名をfile.webm＃t = 50に変更するだけです

ここに例があります

これはかなりクールで、あらゆる種類のことができます。しかし、ブラウザサポートの現在の状態はわかりません。

43
rlovtang

JAVASCRIPTを使用せずに

メディアURLの最後に#t=[(start_time), (end_time)]を追加するだけです。唯一のset折（そのように見たい場合）は、ビデオが終了時間を示すまでの時間を知る必要があるということです。 例：

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

注： IEではサポートされていません

42
anita

html5でビデオタグを使用する場合、ビデオの開始時間と終了時間を調整します。

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

ここで、コンマの左は開始時間（秒）、コンマの右は終了時間（秒）です。コンマと終了時間を削除して、開始時間のみを有効にします。

26
BobK

#t=10,20フラグメントを使用するとうまくいきました。

4
Kamila

HLSソースのSafari Macでは、メタデータイベントの代わりにloadeddataイベントを使用する必要がありました。

3
Robert Reinhardt