İPhone'da HTML5 Video otomatik oynatma

92

Bir tür garip problemim var. Döngülü arka plan videosu olan bir web sitesi oluşturmaya çalışıyorum. Kod şuna benzer:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

Snippet'i genişlet

Bu, çoğu tarayıcıda mükemmel şekilde çalışıyor (IE bu nesneye uygun şeyle uğraşıyor ama umurumda değil) ancak iPhone'da video otomatik olarak oynatılmıyor, ancak iPad'de yapıyor. İOS için Yeni Politikaları zaten okudum ve gereksinimleri karşıladığımı düşünüyorum (aksi takdirde iPad otomatik olarak oynatılmaz). Başka bir test daha yaptım:

Yer paylaşımlı div'leri kaldırmak sorunu çözmez
Z endeksini kaldırmak onu düzeltmez
Wifi veya Hücresel bir fark yaratmaz
Video dosya boyutu da bir fark yaratmaz

Yanlış mı yapıyorum yoksa iPhone videoları otomatik olarak oynatmıyor ve her zaman etkileşim gerektiriyor mu? Yalnızca iOS 10'u önemsiyorum, iOS 9'da gereksinimlerin farklı olduğunu biliyorum

— SeBa
kaynak

Burada biraz yardım bulabilirsiniz: stackoverflow.com/questions/41360490/… Şahsen, tüm bu ipuçlarını ve Apples politikalarını izledikten sonra bile bir iphone'da otomatik oynatılacak herhangi bir video almadım.

— Mark

Anlamak saatlerimi aldı. Herkesin saatlerini kurtarmaya çalışmak için bulgularımı bir blogda özetledim. Umarım yardımcı olur. medium.com/@BoltAssaults/…

— BoltCoder

227

Does playsinlinenitelik yardım?

İşte sahip olduğum şey:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

playsinlineBuradaki yoruma bakın : https://webkit.org/blog/6784/new-video-policies-for-ios/

— Pete Floransa
kaynak

1

Halleluja! Bunun için teşekkür ederim, boşuna bir düzine başka çözüm denedim.

— tolmark

24

playsinlinemutediPhone'daki düşük güç modu tuhaflığını akılda tutarak benim için çalıştı

— Ken

1

Cevap bu.

— JCraine

1

playsinlineGünü kurtardı !!!! Teşekkürler dostum. BTW, yeni tarayıcı politikaları, bir videoyu otomatik olarak başlatmak istiyorsanız, onu sessiz olarak başlatmanızı veya yapamayacağınızı talep eder. +1 @ken Chrome için örnek: [ developers.google.com/web/updates/2017/09/…

— Nuno Prata

22

React kullanıyorsanız, niteliğin playsinlinecamelCase: içinde yazılması gerektiğini unutmayın playsInline. Aksi takdirde işe yaramaz.

— Quentin D

64

iOs 10+, videonun satır içi olarak otomatik oynatılmasına izin verir. ancak iPhone'unuzda "Düşük güç modunu" kapatmanız gerekir.

— Dilip Godhani
kaynak

2

harika bir ipucu ama bununla ilgili gönderdiğim bir sorum var: stackoverflow.com/questions/50400902/…

— Mathieu

8

Son bir saati, videolarımın neden otomatik olarak oynatılmadığını anlamaya çalışarak geçirdim. Bunun için teşekkür ederim!

— lior

2

Bunun için teşekkür ederim!

— Nikita Rogatnev

4

Kullanıcının cihazını kontrol edemediğimizi ve Düşük Güç Modunu açamayacağımızı belirtmek gerekir. Yapabileceğimiz tek şey, daha iyi bir deneyim yaşamak için kullanıcıdan "Düşük güç modunu kapat" ı

— Muhammed Usame

1

Benim de başıma geldi ve görevini bulana kadar beni çılgına çevirdi. Otomatik oynatmayı tamamen devre dışı bırakmış olsalar bile Safari 11 ve 11.1'in özelliklerine bakıyordum, ancak bu yalnızca düşük güç moduydu ... bir geliştirici hayatı zor olabilir. :-)

— haeki

8

İşte bir web sitesinde video otomatik oynatma için yaşadığınız tüm zorlukların üstesinden gelmek için küçük bir hack:

Videonun oynatılıp oynatılmadığını kontrol edin.
Vücut tıklama veya dokunma gibi olaylarda video oynatmayı tetikleyin.

Not: Bazı tarayıcılar, kullanıcı cihazla etkileşimde bulunmadıkça videoların otomatik olarak oynatılmasına izin vermez.

Yani videonun oynatılıp oynatılmadığını kontrol etmek için komut dosyaları:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Daha sonra gövdeye olay dinleyicileri ekleyerek videoyu otomatik olarak oynatabilirsiniz:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Not: autoplayözellik çok basittir ve bu komut dosyalarından başka video etiketine eklenmesi gerekir.

Kod içeren çalışma örneğini burada bu bağlantıda görebilirsiniz:

Cihaz düşük güç modundayken video nasıl otomatik oynatılır / veri tasarrufu modu / safari tarayıcı sorunu

— Shakti
kaynak

0

Benzer bir sorun yaşadım ve birden fazla çözümü denedim. 2 düşünceyi uygulayarak çözdüm.

Kullanılması dangerouslySetInnerHtmlgömmek için <video>kod. Örneğin:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

Video ağırlığını yeniden boyutlandırma. İPhone'umun 3 megabayttan büyük videoları otomatik oynatmadığını fark ettim . Bu yüzden 4mb'den 500kb'den daha aza gitmek için çevrimiçi bir kompresör aracı ( https://www.mp4compress.com/ ) kullandım

Ayrıca, kılavuzu için @boltcoder'a teşekkürler : Mobil cihazda React kullanarak HTML5 videoyu otomatik oynat (Safari / iOS 10+)

— maxrojas
kaynak