Reproduza vídeo em loop infinito durante o carregamento em HTML5

90

Estou tentando inserir um vídeo em uma página HTML5 que começará a ser reproduzida no carregamento da página e, depois de concluída, retorne ao início sem interrupção. O vídeo NÃO deve ter nenhum controle associado a ele e ser compatível com todos os navegadores "modernos" ou ter a opção de polyfill.

Anteriormente, eu teria feito isso por meio de Flashe FLVPlayback, mas prefiro evitar Flashna esfera do HTML5. Estou pensando que poderia usar javascript setTimeoutpara criar um loop suave, mas o que devo usar para incorporar o próprio vídeo? Existe algo lá fora que irá transmitir o vídeo da maneira que FLVPlaybackfaria?

— Stefmikhail
fonte

152

O atributo loop deve fazer isso:

<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 você tiver um problema com o atributo loop (como tivemos no passado), ouça o videoEndevento e chame o play()método quando ele for disparado.

Nota1: Não tenho certeza sobre o comportamento no iPad / iPhone da Apple, porque eles têm algumas restrições contra autoplay.

Nota2: loop="true"e autoplay="autoplay"estão obsoletos

— longi
fonte

1

De fato, um bom conselho, senhor. Acabei usando javascriptpara ouvir o videoEndevento e voltando ao início, pelo que posso dizer, o loopatributo não é compatível com todos os navegadores. Para dispositivos iOS, eles não são compatíveis de autoplayforma alguma com o iOS 5, então usei apenas uma imagem reserva para celular. Obrigado novamente.

— stefmikhail

10

usar <video loop = "true"> é inválido w3.org/TR/html-markup/video.html - use <video loop = "loop"> ou apenas <video loop> - esta regra se aplica a quase TODAS as tags HTML5 (apenas tagname ou tagname = "tagname" para XHTML5)

@vaxquis obrigado pela atualização, você é bem-vindo para editar as alterações da API da próxima vez!

— longi

5

Sem problemas, companheiro, sempre feliz em ajudar. Ainda assim, eu não misturaria atributos do tipo XHTML 'autoplay = "autoplay"' com 'loop' do tipo HTML - eu escolheria com <video ... autoplay loop>, analisável como HTML5 ou <video .. . autoplay = "autoplay" loop = "loop">, analisável como HTML5 ou XHTML5. misturar estilos cria uma marcação que ainda é inválida como XHTML, mas desnecessariamente detalhada para HTML.

1

Geralmente, autoplaysó funciona no Safari se você também usar muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

34

A partir de abril de 2018, o Chrome (junto com vários outros navegadores importantes) agora exige o mutedatributo também.

Portanto, você deve usar

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

— micah5
fonte

13

Para iPhone, funciona se você adicionar também playinline para:

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

— Raluca Albu
fonte

Acessórios para JSX:autoPlay loop muted playsInline

— pomber

2

Você pode fazer isso das duas maneiras a seguir:

1) Usando loopatributo no elemento de vídeo (mencionado na primeira resposta):

2) e você pode usar o endedevento de mídia:

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

    newVideo.play();

});

— asmmahmud
fonte