JavaScriptを使用したHTML5ビデオプレーヤーループを制御します

StackOverflow https://stackoverflow.com/questions/3455229

  •  27-09-2019
  •  | 
  •  

質問

JavaScriptを使用してループタグ（FF）をサポートしていないブラウザでHTML5ビデオのループを有効にしたいと考えています。ビデオプレイの終わりにアクセスし、再生をゼロに戻すことの実現可能性を知っている人はいますか？

役に立ちましたか？

解決

あなたは次のことを検出できます loop プロパティがサポートされ、それを設定します true.

それをサポートしていないブラウザの場合、あなたは単にバインドすることができます ended メディアイベント、そしてそれをやり直す：

var myVideo = document.getElementById('videoId');
if (typeof myVideo.loop == 'boolean') { // loop supported
  myVideo.loop = true;
} else { // loop property not supported
  myVideo.addEventListener('ended', function () {
    this.currentTime = 0;
    this.play();
  }, false);
}
//...
myVideo.play();

他のヒント

あなたは単にビデオをオンまたはオフにループすることができます loop="false" 自動ビデオの繰り返しを停止するため。

<iframe style="position: absolute; top: 0; left: 0;"
src="http://video/name.mp4" width="100%" height="100%" frameborder="0"  webkitallowfullscreen loop="true" controls="false" mozallowfullscreen allowfullscreen></iframe>

これ loop="true" ビデオプレーヤーループを有効にします。

<div>Iteration: <span id="iteration"></span></div>

<video id="video-background" autoplay="" muted="" controls>
        <source src="https://res.sdfdsf.mp4" type="video/mp4">
</video>

var iterations = 1;

    document.getElementById('iteration').innerText = iterations;

        var myVideo = document.getElementById('video-background');
    myVideo.addEventListener('ended', function () {    
                alert('end');
        if (iterations < 2) {
            this.currentTime = 0;
            this.play();
            iterations ++;          
            document.getElementById('iteration').innerText = iterations;
        }   

    }, false);


   // Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top