Safari 11/YouTube APIのバグ。速い再生/一時停止と自動再生の失敗

Question

これはユーザーから私に報告され始めたばかりです。私はバグのために自分自身のコードを調べるのに多くの時間を費やしましたが、具体的にはSafari 11（最新）に関連しているようです。

YouTube IFrameの埋め込みAPIの簡単な例を使用すると、Safariは再生の状態と一時停止の状態が、一時停止するまで素早く切り替わります。

ここでは、何が有効になるかについていくつかの調査があったため、これは例の最適化バージョンではありません。私は先に飛び越して自動再生したいと思っていましたが、想定されていた方法ではうまくいかないでしょう。私は、とplayVideoを使用しようとしましたが、これはYTのAPIの例が文書化されています。

この例では、この例にいくつかの詳細なパラメータがある理由を説明するバグであることが確認されたばかりです。

注：

• 時々ビデオでは、リフレッシュ回数に応じて再生されますが、それは非常にまれです。
• 通常、自動再生フラグは失敗します。
• が機能していなかったので、この例ではstartフラグを使用して前方にスキップします。
• コード例、他のブラウザでは動作します、ChromeOpera、Firefox

ここでは、最終的に（がを一時停止）2の上に着陸、プレーヤー州パニックを示しており、Safariのコンソールに表示される場合があります何の画像です。

ここには、バグを複製するコピー/ペーストのコードサンプルがあります。任意のHTMLファイルにドロップし、あなたはそれが特に異なるブラウザや異なるデバイスで働いて自動再生を取得し、私はビデオプレーヤーで多くの問題を経験している

<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

サファリ11で失敗するはずです。

自動再生機能とAPI再生/一時停止機能がお互いにうんざりしているように見えて、プレイヤーの状態がパニックになっているようです。

私の場合で最高の仕事を最終溶液：playerVars中：「0自動再生」を使用して、

設定自動再生をオフにします。 'api.playVideo（）;'あなたの 'onReadyで使用しています：function（）'は、そこから取得し、プレイヤーを '再生'状態にします。