Safari 11/YouTube API錯誤。快速播放/暫停和自動播放失敗

Question

剛剛開始向用戶報告。我花了很多時間去探索我自己的代碼，看看它是否與bug有關，但它似乎與Safari 11（最新）有關。

當使用YouTube IFrame Embed API的簡單示例時，Safari會快速切換播放狀態並暫停，直到暫停時結束。

這不是這個例子的最優化版本，因爲這裏有一些探索可以使它工作。我想跳過並自動播放，但它不會按照預期的方式工作。我嘗試使用start和playVideo，這些都是YT API示例。

我最近才證實這是一個錯誤，它解釋了爲什麼在示例中有一些詳細的參數。

注：

• 有時視頻會根據您刷新打多少次，但它是非常罕見的。
• 自動播放標誌通常會失敗。
• 在本示例中使用start標誌向前跳躍，因爲startSeconds不起作用。
• 代碼示例適用於其他瀏覽器：Chrome，Opera，Firefox

以下是你可能會在Safari瀏覽器的控制檯，顯示播放器狀態恐慌看，最終降落在2（暫停）的圖像。

下面是複製/粘貼代碼示例，它將複製該錯誤。將它放在任何HTML文件，你應該看到它未能在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

我經歷了許多問題與視頻播放器，尤其是讓自動播放在不同瀏覽器和設備的工作。

似乎自動播放功能和API播放/暫停與彼此混淆，導致玩家狀態恐慌。

其中效果最好在我的案件的最終解決方案：

設置自動播放功能關閉，使用「自動播放：0」的playerVars。 'api.playVideo（）;'你在'onReady'中使用：函數（）'應該從那裏拿過來，並且會使玩家進入'玩'狀態。