web-dev-qa-db-ja.com

HTML5でロード中に無限ループのビデオを再生する

ページ読み込みで再生を開始するHTML5ページにビデオを配置し、完了すると、中断することなく最初にループバックすることを探しています。また、ビデオにはではなくが関連付けられており、すべての「モダン」ブラウザと互換性があるか、ポリフィルのオプションが必要です。

以前は、FlashおよびFLVPlaybackを介してこれを実行していましたが、HTML5領域ではFlashを避けたいと思います。 JavaScriptのsetTimeoutを使用してスムーズなループを作成できると考えていますが、ビデオ自体を埋め込むために何を使用する必要がありますか？ FLVPlaybackのようにビデオをストリーミングするものはありますか？

html5videovideo-streaminghtml5-video
80
stefmikhail

loop属性はそれを行う必要があります：

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

（以前のように）ループ属性に問題がある場合は、videoEndイベントをリッスンし、起動時にplay()メソッドを呼び出します。

注1：AppleのiPad/iPhoneの動作については、autoplayに対していくつかの制限があるためわかりません。

注2：loop="true"とautoplay="autoplay"は非推奨です

134
longilong

2018年4月の時点で、Chrome（他のいくつかの主要なブラウザーと一緒） 必須 もmuted属性です。

したがって、使用する必要があります

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>
17
micah5

IPhoneの場合、playsinlineも追加すると機能します。

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
2
Raluca Albu

これは、次の2つの方法で実行できます。

1）ビデオ要素でloop属性を使用（最初の回答で言及）：

2）そして、endedメディアイベントを使用できます：

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});
1
asmmahmud