Wideo Auto Play nie działa w Safari i Chrome przeglądarce pulpitu

Question

Spędziłem sporo czasu próbuje dowiedzieć się, dlaczego film osadzony jak tutaj:

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

rozpoczyna odtwarzanie automatycznie po załadowaniu strony w FireFox, ale ale nie można zrobić autoodtwarzania w przeglądarkach opartych na Webkit. Stało się tak tylko na niektórych losowych stronach. Do tej pory nie mogłem znaleźć przyczyny. Podejrzewam pewne niezamknięte znaczniki lub rozległe JS utworzone przez edytory CMS.

Answer 1

Najlepszym fix mogę dostać się dodanie tego kodu tuż po </video>

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

... nie całkiem, ale jakoś działa.

Answer 2

Spróbuj tego:

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

ten sposób normalnie zrobić. Pętla, sterowanie i autoodtwarzanie nie wymagają wartości, bo są atrybutami boolowskimi.

Answer 3

Właśnie teraz dostać ten sam problem z moim filmie

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

Po poszukiwaniach znalazłem rozwiązanie:

Jeżeli ustawić „preload” atrybuty na „true” wideo zacznij normalnie

Answer 4

Miałem przypadek, który miał coś wspólnego z kolejnością różnych typów plików. Spróbuj go zmienić i sprawdź, czy to pomaga.

Answer 5

Zdarza się, że Safari i Chrome na pulpicie nie lubią manipulacji DOM wokół tagu wideo. Nie wystrzelą kolejności odtwarzania, gdy atrybut autoplay zostanie ustawiony na , nawet, jeśli zdarzenie canplaythrough wystrzelono, gdy DOM wokół tagu wideo zmienił się po wczytaniu strony początkowej. Zasadniczo miałem ten sam problem, dopóki nie usunąłem jQuery .wrap() wokół tagu wideo, a następnie autoodtwarzanie zgodnie z oczekiwaniami.

Answer 6

Żadna z pozostałych odpowiedzi nie sprawdziła się u mnie. Moim obejściem było wywołanie kliknięcia samego filmu wideo; hacky (ze względu na wymagany limit czasu), ale działa dobrze:

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

Answer 7

Dodanie poniższego kodu u dołu strony działało dla mnie. Nie wiem, dlaczego to działa :(

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

Answer 8

Po użyciu jQuery play() lub DOM maniupulation sugerowane przez innych odpowiedzi, nie było nadal działa (wideo nie został autoodtwarzanie) w Chrome dla Androida (wersja 56,0) .

Jak na ten post w developers.google.com, Od Chrome 53, opcja autoodtwarzania jest przestrzegana przez przeglądarkę, jeśli film jest wyciszony.

Więc za pomocą autoplay muted attribu tes w tagu wideo umożliwia autoodtwarzanie wideo w przeglądarkach Chrome od wersji 53.

Wyciąg z powyższego linku:

Wyciszony autoodtwarzania dla wideo jest obsługiwany przez Chrome dla Androida od wersji 53. Odtwarzanie rozpocznie się automatycznie za pomocą elementu wideo raz przychodzi do widzenia, gdy oba są autoplay i muted ustaw [...]

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

• Wyciszony autoodtwarzania jest obsługiwany przez Safari na iOS 10 i późniejszych.
• Autoodtwarzanie, bez względu na to, czy jest wyciszone czy nie, jest już obsługiwane w systemie Android przez przeglądarkę Firefox i przeglądarkę UC: nie blokują żadnego rodzaju autoodtwarzania.

Answer 9

Dla mnie problemem było to, że atrybut muted potrzebne do dodania w tagu video. Np .:

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

Answer 10

Zacząłem od wyświetlania wszystkich widocznych filmów, ale stare telefony nie działały dobrze. Teraz odtwarzam jedno wideo, które znajduje się najbliżej środka okna i zatrzymuję resztę. Vanilla JS. Możesz wybrać preferowany algorytm.

//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(); 
} 

Answer 11

I rozwiązać ten sam problem z,

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

Trzeba uruchomić wideo po stronie zostały pokazane.