Odtwarzaj nieskończoną pętlę wideo przy wczytywaniu w HTML5

92

Chcę umieścić wideo na stronie HTML5, które zacznie się odtwarzać przy wczytywaniu strony, a po zakończeniu zapętlać z powrotem do początku bez przerwy. Film NIE powinien również mieć żadnych powiązanych elementów sterujących i być kompatybilny ze wszystkimi „nowoczesnymi” przeglądarkami lub mieć opcję polyfill.

Wcześniej robiłbym to za pomocą Flashi FLVPlayback, ale wolałbym unikać Flashw sferze HTML5. Myślę, że mógłbym użyć JavaScript setTimeoutdo stworzenia płynnej pętli, ale czego powinienem użyć do osadzenia samego wideo? Czy jest coś, co będzie przesyłać strumieniowo wideo w taki sposób FLVPlayback?

html video video-streaming html5-video stefmikhail
źródło

Odpowiedzi:

156

Pętla atrybut powinien to zrobić:

<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>

Jeśli masz problem z atrybutem pętli (tak jak to miało miejsce w przeszłości), wysłuchaj videoEndzdarzenia i wywołaj play()metodę po uruchomieniu .

Uwaga 1: Nie jestem pewien zachowania na iPadzie / iPhonie firmy Apple, ponieważ mają pewne ograniczenia autoplay.

Uwaga 2: loop="true"i autoplay="autoplay"są przestarzałe

longi
źródło
1
Rzeczywiście dobra rada, sir. Skończyło się javascriptna tym videoEnd, że użyłem do nasłuchiwania zdarzenia i wracając do początku, z tego, co wiem, loopatrybut nie jest obsługiwany przez wszystkie przeglądarki. W przypadku urządzeń z systemem iOS nie obsługują one autoplayw żaden sposób kształtu ani formy przez iOS 5, więc właśnie użyłem obrazu zastępczego dla urządzeń mobilnych. Dzięki jeszcze raz.
stefmikhail
10
używanie <video loop = "true"> jest nieprawidłowe w3.org/TR/html-markup/video.html - użyj <video loop = "loop"> lub po prostu <video loop> - ta reguła obowiązuje dla prawie WSZYSTKICH tagów HTML5 (tylko zmienna lub zmienna = "zmienna" dla XHTML5)
@vaxquis dzięki za aktualizację, następnym razem możesz edytować zmiany API!
longi
5
Żaden problem kolego, zawsze chętnie pomogę. Mimo to nie mieszałbym atrybutów typu XHTML „autoplay =„ autoplay ”” z „pętlą” typu HTML - wybrałbym albo <video ... autoplay loop>, analizowalny jako HTML5 lub <video .. . autoplay = "autoplay" loop = "loop">, można je przeanalizować jako HTML5 lub XHTML5. mieszanie stylów powoduje, że znacznik jest nadal nieprawidłowy jak XHTML, ale niepotrzebnie rozwlekły dla HTML.
1
Ogólnie autoplaydziała tylko w Safari, jeśli używasz również muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos
andreyrd
38

Od kwietnia 2018 r. Chrome (wraz z kilkoma innymi głównymi przeglądarkami) również wymaga tego mutedatrybutu.

Dlatego powinieneś użyć

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>
micah5
źródło
14

W przypadku iPhone'a to działa, jeśli dodasz również playsinline, więc:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
Raluca Albu
źródło
Rekwizyty dla JSX:autoPlay loop muted playsInline
pomber
2

Możesz to zrobić na dwa sposoby:

1) Korzystanie z loopatrybutu w elemencie wideo (wspomnianym w pierwszej odpowiedzi):

2) i możesz skorzystać z endedwydarzenia medialnego:

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

    newVideo.play();

});
asmmahmud
źródło