HTML5'te sonsuz döngü halinde yüklenen videoyu oynatın

92

HTML5 sayfasına, sayfa yüklemede oynatılmaya başlayacak ve tamamlandıktan sonra ara vermeden başa dönecek bir video yerleştirmek istiyorum. Video da gerekir DEĞİL onunla ilişkili herhangi bir kontrole sahip ve ya tüm 'modern' tarayıcılarla uyumlu veya Polyfill seçeneği vardır.

Daha önce bunu Flashve aracılığıyla yapardım FLVPlayback, ancak FlashHTML5 küresinden uzak durmayı tercih ederim . setTimeoutSorunsuz bir döngü oluşturmak için javascript kullanabileceğimi düşünüyorum , ancak videonun kendisini gömmek için ne kullanmalıyım? Videoyu olduğu gibi yayınlayacak bir şey var FLVPlaybackmı?

— stefmikhail
kaynak

156

Döngü niteliği yapmalı:

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

Döngü özniteliğiyle ilgili bir sorununuz olursa (geçmişte olduğu gibi), videoEndolayı dinleyin ve tetiklendiğinde play()yöntemi çağırın .

Not 1: Apple'ın iPad / iPhone'undaki davranıştan emin değilim, çünkü bazı kısıtlamaları var autoplay.

Not2: loop="true"ve autoplay="autoplay" kullanımdan kaldırıldı

— Longi
kaynak

1

Gerçekten iyi bir tavsiye efendim. Sonunda olayı javascriptdinlemek için kullanmayı bıraktım videoEndve söyleyebildiğim kadarıyla başa dönerek, loopöznitelik tüm tarayıcılar tarafından desteklenmiyor. İOS cihazlar için, autoplayiOS 5'e göre herhangi bir şekli veya formu desteklemiyorlar , bu yüzden mobil için bir yedek resim kullandım. Tekrar teşekkürler.

— stefmikhail

10

<video loop = "true"> kullanmak geçersiz w3.org/TR/html-markup/video.html - <video loop = "loop"> veya sadece <video loop> kullanın - bu kural neredeyse TÜM HTML5 etiketleri için geçerlidir (XHTML5 için sadece tagname veya tagname = "tagname")

@vaxquis güncelleme için teşekkürler, bir dahaki sefere api değişikliklerini düzenleyebilirsiniz!

— longi

5

Sorun değil dostum, her zaman yardım etmekten mutluluk duyarım. Yine de, XHTML türü nitelikleri 'autoplay = "autoplay"' ile HTML türü 'döngü' arasında karıştırmazdım - HTML5 veya <video olarak ayrıştırılabilir <video ... autoplay döngü> ile giderdim .. . autoplay = "autoplay" loop = "loop">, HTML5 veya XHTML5 olarak ayrıştırılabilir. stilleri karıştırmak, XHTML olarak hala geçersiz olan ancak HTML için gereksiz yere ayrıntılı olan bir işaretleme yapar.

1

Genel olarak, autoplaySafari'de yalnızca şunu da kullanırsanız çalışır muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

39

Nisan 2018 tarihi itibariyle (birkaç diğer büyük tarayıcılarla birlikte) Chrome artık ihtiyaçmuted çok özniteliği.

Bu nedenle kullanmalısınız

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

— micah5
kaynak

14

İPhone için ayrıca playsinline eklerseniz çalışır:

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

— Raluca Albu
kaynak

JSX için aksesuarlar:autoPlay loop muted playsInline

— pomber

2

Bunu aşağıdaki iki yolla yapabilirsiniz:

1) loopVideo öğesinde özniteliğin kullanılması (ilk yanıtta belirtilmiştir):

2) ve endedmedya olayını kullanabilirsiniz :

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

    newVideo.play();

});

— asmmahmud
kaynak