Controle o loop de player de vídeo html5 com javascript
-
27-09-2019 - |
Pergunta
Estou procurando ativar o looping de vídeo HTML5 em navegadores que não suportam a tag loop (FF) com JavaScript. Alguém conhece a viabilidade de acessar o final do vídeo e reverter reproduza para zero?
Solução
Você pode detectar se o loop
a propriedade é suportada e defina -a true
.
Para navegadores que não o apoiam, você pode simplesmente vincular o ended
evento de mídia e comece:
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();
Outras dicas
Você pode simplesmente fazer o vídeo dentro ou fora do vídeo loop="false"
Para parar o vídeo de vídeo repente.
<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>
este loop="true"
permitirá o loop de player de vídeo.
<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
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow