Błąd przeglądarki Safari 11/YouTube API. Szybkie odtwarzanie/wstrzymanie i niepowodzenie autoodtwarzania

Question

To dopiero zaczęło być zgłaszane mi przez użytkowników. Spędziłem mnóstwo czasu na odkrywaniu mojego własnego kodu błędów, ale wygląda na to, że jest związany z Safari 11(najnowszy).

Korzystając z prostego przykładu interfejsu API IFrame do umieszczenia na stronie YouTube, Safari szybko przełącza się pomiędzy stanami gry i zatrzymuje się, dopóki nie zakończy się pauzą.

To nie jest najbardziej zoptymalizowana wersja przykładu, ponieważ w tym miejscu znalazło się trochę informacji na temat tego, co może zdziałać. Chciałem przeskoczyć do przodu i autoodtwarzać, ale nie zadziałałoby tak, jak powinno. Próbowałem używać start i playVideo, które są udokumentowanymi przykładami interfejsu API YT.

Niedawno potwierdziłem, że jest to błąd, który wyjaśnia, dlaczego w przykładzie są jakieś szczegółowe parametry.

Uwagi:

• Czasami wideo zagra w zależności od tego, ile razy odświeżyć, ale to bardzo rzadko.
• Flagi autoplay zwykle się nie udają.
• Używanie w tym przykładzie flagi start do przeskakiwania do przodu, ponieważ startSeconds nie działa.
• przykład kod działa w innych przeglądarkach: Chrome, Opera, Firefox

Oto obraz tego, co można zobaczyć w konsoli Safari, która pokazuje panikę gracza państwa, ostatecznie lądując na 2 (wstrzymane).

Oto przykład kodu do kopiowania/wklejania, który zreplikuje błąd. Upuść go w dowolnym pliku HTML i powinien pojawić się niepowodzeniem w Safari 11.

<style> 
    body, html, iframe { 
     position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; 
     margin: 0; 
     padding: 0; 
     pointer-events: none; 
    } 
</style> 


<script> 
    var videoId = "9nwQ1F7oX-8"; 

    var playerVars = { 
     autohide: 1, 
     autopause: 0, 
     autoplay: 1, 
     cc_load_policy: "0", 
     disablekb: 1, 
     enablejsapi: 1, 
     iv_load_policy: 1, 
     modestbranding: 1, 
     origin: "*", 
     rel: 0, 
     showinfo: 0, 
     start: 122, 
     version: 3 
    }; 
</script> 


<iframe id="ytplayer" 
    frameborder="0" 
    allowfullscreen="1" 
    title="YouTube video player" 
    width="100%" 
    height="100%" 
    x-src="https://www.youtube.com/embed/9nwQ1F7oX-8?enablejsapi=1&amp;origin=*&amp;rel=0&amp;version=3&amp;iv_load_policy=3&amp;modestbranding=1&amp;showinfo=0&amp;autohide=1&amp;disablekb=1&amp;autoplay=1&amp;autopause=0&amp;cc_load_policy=0&amp;startSeconds=30&amp;widgetid=1" 
    src="https://www.youtube.com/embed/9nwQ1F7oX-8?enablejsapi=1&amp;origin=*&amp;start=122"> 
</iframe> 


<script> 
window.onYouTubeIframeAPIReady = function() { 
    console.log("YouTube is ready!", videoId, playerVars); 

    var api = new YT.Player("ytplayer", { 
     width: "100%", 
     height: "100%", 
     videoId: videoId, 
     playerVars: playerVars, 
     events: { 

      onError: function(e) { 
       // 100 – The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private. 
       // 101 – The owner of the requested video does not allow it to be played in embedded players. 
       // 150 – This error is the same as 101. It"s just a 101 error in disguise! 

       console.warn("An error has occurred", arguments); 
      }, 

      onReady: function() { 
       // log 
       console.log("YouTube player is ready to use"); 

       // 
       api.playVideo(); 
      }, 

      onStateChange: function(e) { 
       // log 
       console.log("YouTube state change ", e); 

       // Finished 
       if (e.data == 0) { 
        console.log("Finished"); 
       } 

       // Playing 
       else if (e.data === YT.PlayerState.PLAYING) { 
        console.log("Playing"); 
       } 

       // Pausing 
       else if (e.data === 2) { 
        console.log("Pausing"); 
       } 

       // Buffering 
       else if (e.data === 3) { 
        console.log("Buffering"); 
       } 
      } 
     } 
    }); 

} 
</script> 

<script src="https://www.youtube.com/iframe_api"></script> 

Answer 1

doświadczyłem wiele problemów z odtwarzaczy wideo, zwłaszcza coraz autoodtwarzanie pracy w różnych przeglądarkach i na różnych urządzeniach.

Wygląda na to, że funkcja autoodtwarzania i odtwarzanie/pauza interfejsu API mieszają się ze sobą, powodując panikę w stanie odtwarzacza.

Ostateczne rozwiązanie, które działa najlepiej w moim przypadku:

Set AutoPlay OFF, używając 'autoodtwarzanie: 0' w playerVars. 'api.playVideo();' twoje używasz w swojej 'onReady: function()' powinno zabrać ją stamtąd i doprowadzi gracza do stanu 'gra'.