Reproduzir infinitamente o vídeo em looping no HTML5
eu estou olhando para colocar um vídeo em uma página HTML5 que vai começar a tocar em carga de página, e uma vez concluído, voltar para o início sem uma pausa. O vídeo também deve não ter quaisquer controles associados a ele, e ou ser compatível com todos os navegadores 'modernos', ou ter a opção de um polifill.
Anteriormente, teria feito isto viaFlash
e FLVPlayback
, mas preferia ficar longe de Flash
na esfera HTML5. Estou a pensar que podia usar o javascript's setTimeout
para criar um loop suave, mas o que devo usar para incorporar o vídeo em si? Há alguma coisa lá fora que possa transmitir o vídeo como FLVPlayback
faria?
2 answers
O atributo loop deve fazê-lo:
<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>
Se tiver um problema com o atributo loop (como tínhamos no passado), ouça o evento videoEnd
e ligue para o método play()
quando disparar.
Note1: eu não tenho certeza sobre o comportamento no iPad/iPhone Da Apple, porque eles têm algumas restrições contra autoplay
.
Note2: loop="true"
e autoplay="autoplay"
estão depreciados
Podes fazer isto das duas formas seguintes:
1) Usando o atributo loop
no elemento vídeo (mencionado na primeira resposta):
2) e pode utilizar o ended
evento mediático:
window.addEventListener('load', function(){
var newVideo = document.getElementById('videoElementId');
newVideo.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
newVideo.play();
});