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?

— stefmikhail
źródło

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