Otomatik video oynatma, Safari ve Chrome masaüstü tarayıcısında çalışmıyor

Neden videonun buraya gömülü olduğunu anlamaya çalışırken epey zaman harcadım:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Sayfa FireFox'a yüklendiğinde otomatik olarak oynatılmaya başlar, ancak Webkit tabanlı tarayıcılarda otomatik oynatılamaz. Bu sadece bazı rastgele sayfalarda oldu. Şimdiye kadar sebebini bulamadım. Bazı kapatılmamış etiketlerden veya CMS editörleri tarafından oluşturulan kapsamlı JS'den şüpheleniyorum.

Alabileceğim en iyi düzeltme, bu kodu, </video>

<script>
    document.getElementById('vid').play();
</script>

... hoş değil ama bir şekilde çalışıyor.

GÜNCELLEME Son zamanlarda birçok tarayıcı, videoları yalnızca ses kapalıyken otomatik olarak oynatabilir, bu nedenle mutedvideo etiketine de öznitelik eklemeniz gerekir

<video autoplay muted>
...
</video>

play()Diğer yanıtların önerdiği şekilde jQuery veya DOM manipülasyonunu kullandıktan sonra , Android için Chrome'da (Sürüm 56.0) hala çalışmıyordu (Video otomatik oynatılmıyordu).

Bu gereğince yazı içinde developers.google.com , Chrome 53 itibaren otomatik oynatma seçeneği tarayıcı tarafından saygı duyulur videonun sesini eğer .

Dolayısıyla autoplay muted, video etiketinde özniteliklerin kullanılması , videonun Chrome tarayıcılarda sürüm 53'ten itibaren otomatik olarak oynatılmasını sağlar.

Yukarıdaki bağlantıdan alıntı:

Video için sessiz otomatik oynatma, sürüm 53'ten itibaren Android için Chrome tarafından desteklenmektedir. Her ikisi de görüntüleniyorsa autoplayve mutedayarlandıysa bir video öğesi için oynatma otomatik olarak başlayacaktır [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• Sessiz otomatik oynatma, iOS 10 ve sonraki sürümlerde Safari tarafından desteklenir.
• Otomatik oynatma, sessiz olsun ya da olmasın, Android'de Firefox ve UC Tarayıcısı tarafından zaten desteklenmektedir: herhangi bir otomatik oynatmayı engellemezler.

Safari ve Masaüstündeki Chrome, video etiketi etrafındaki DOM işleminden hoşlanmaz. İlk sayfa yüklemesinden sonra video etiketinin etrafındaki DOM değiştiğinde canplaythrough etkinliği tetiklenmiş olsa bile , autoplay özelliği ayarlandığında oynatma sırasını tetiklemezler. Temelde, video etiketinin etrafındaki bir .wrap () jQuery'yi silene ve ardından beklendiği gibi otomatik olarak oynatılana kadar aynı sorunu yaşadım.

Google, otomatik oynatılan videolar için politikasını değiştirdi muted

Burayı kontrol edebilirsiniz

bu yüzden sadece sessiz ekle

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Benim için sorun, mutedözniteliğin videoetikete eklenmesi gerektiğiydi . yani:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Chrome, ses açıkken videonun otomatik olarak oynatılmasına izin vermiyor, bu nedenle etikete şunun gibi bir mutedöznitelik eklediğinizden emin olunvideo

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

Şimdi videomla aynı sorunu yaşıyorum

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Aramadan sonra bir çözüm buldum:

"Preload" özelliklerini "true" olarak ayarlarsam video normal şekilde başlar

Sayfanın altına aşağıdaki kodu eklemek benim için çalıştı. Neden işe yaradığını bilmiyorum :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Bunu dene:

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

var video = document.querySelector('video'); video.muted = true; video.play()

Sadece bu çözüm bana yardımcı oldu, <video autoplay muted ...>...</video>işe yaramadı ...

Diğer cevapların hiçbiri benim için işe yaramadı. Çözümüm, videonun kendisine bir tıklama tetiklemekti; hacky (gereken zaman aşımı nedeniyle) ancak iyi çalışıyor:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Yakın zamanda gömülü bir videoyla ilgili benzer bir sorunu ele aldık ve otomatik oynatma ve sessize alma özelliklerinin uygulamamız için yeterli olmadığını gördük.

Koda üçüncü bir "playsinline" özelliği ekledik ve iOS kullanıcıları için sorunu çözdü.

Bu düzeltme, satır içinde oynatılacak videolara özeldir. Gönderen https://webkit.org/blog/6784/new-video-policies-for-ios/ :

İPhone'da öğelerin artık satır içinde oynatılmasına izin verilecek ve oynatma başladığında otomatik olarak tam ekran moduna girmeyecek. playsinline özellikleri olmayan öğeler, iPhone'da oynatmak için tam ekran modunu gerektirmeye devam edecek. Bir kıstırma hareketiyle tam ekrandan çıkıldığında, oyun çizgisi olmayan öğeler satır içinde oynatılmaya devam eder.

Google, Otomatik Oynatma Politikasını güncelledi. Otomatik oynatma yalnızca sessiz modda çalışır. Https://developers.google.com/web/updates/2017/09/autoplay-policy-changes bağlantısını kontrol edin

Bunu dene:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

Normalde böyle yaparım. döngü, kontroller ve otomatik oynatma, boole öznitelikleri olan bir değer gerektirmez.

Bunun nedeni artık Chrome'un html5 videoda otomatik oynatmayı engellemesidir, bu nedenle varsayılan olarak otomatik oynatmaya izin vermezler. bu yüzden bu ayarları krom bayrak ayarlarını kullanarak değiştirebiliriz. bu normal durum için mümkün değildir, bu yüzden başka bir çözüm buldum. bu mükemmel çalışıyor ... (preload = "auto" ekleyin)

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Yukarıda belirtilen tüm çözümleri denemek için iki saat harcadım.

Sonunda benim için işe yarayan şey buydu:

var vid = document.getElementById("myVideo");
vid.muted = true;

Safari iPhone'da, tereyağı azaldığında ve iphone Düşük Güç Modu'ndayken , aşağıdaki özelliklere sahip olsanız bile otomatik olarak oynatılmaz : video html etiketinizde otomatik oynatma, döngü, sessiz, playsinline ayarlı.

Etrafta dolaşın, çalışmanın video oynatmayı tetiklemek için kullanıcı hareketi olayına sahip olmak olduğunu gördüm :

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

webkit sitesinde kullanıcı hareketi ve iOS için Video Politikaları hakkında daha fazla bilgi edinebilirsiniz:

https://webkit.org/blog/6784/new-video-policies-for-ios/

Farklı dosya türlerinin sıralanmasıyla bir ilgisi olduğu bir vakam vardı. Değiştirmeye çalışın ve bunun yardımcı olup olmadığına bakın.

Görünen tüm videoları oynatmakla başladım, ancak eski telefonlar iyi performans göstermiyordu. Şu anda pencerenin ortasına en yakın olan videoyu oynatıyorum ve geri kalanını duraklatıyorum. Vanilya JS. Hangi algoritmayı tercih edeceğinizi seçebilirsiniz.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Ben de aynı sorunu çözdüm

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Videoları, sayfa gösterildikten sonra başlatmalısınız.

İçinde takas edin autoPlayiçinautoplay .

Bazen büyük / küçük harfe duyarlı görünüyor. Çok tuhaf çünkü benim için işe yaradı autoplay, ancak yalnızca dahil edersemcontrols