YouTube在iOS和Android上嵌入了API問題

Question

過去幾天YouTube嵌入式API出現問題。問題是，當您使用官方API嵌入視頻時，它根本不允許您訪問API。當您嘗試訪問API時，您會在日誌（IOS）中看到錯誤消息，並且如果您嘗試通過API播放視頻，則視頻會變黑。如果您通過API加載它，但不使用該API，用戶可以通過點擊播放視頻。

問題仍然存在以下瀏覽器：

在iPad和iPhone IOS 7瀏覽器IOS 7 Safari瀏覽器在iPad和iPhone 的Android 4.0瀏覽器

（我的播放按鈕，使用API​​來播放視頻和產生錯誤） 的jsfiddle：http://jsfiddle.net/frdd8nvr/6/

錯誤消息：

Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net. 
postMessage[native code]:0 
Jwww-widgetapi.js:26:357 
Nwww-widgetapi.js:25 
(anonymous function)[native code]:0 
html5player.js:1201:97 

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://jsfiddle.net". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match. 

一些調試信息：

當我看到API在網站上創建iframe。 src是某個時間的http和某個時間的https。

http://www.youtube.com/embed/ZPy9VCovVME?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net&autoplay=0&modestbranding=1&wmode=opaque&forceSSL=false

我的測試表明，大多數時候YouTube的服務器只是位置：https：//開頭......請求到HTTPS URL，但在10％左右，他們送達適當的內容的HTTP請求。

我認爲這個問題與強制https有關，但我無法弄清楚解決方案。 你有沒有經歷過？你有這種問題的解決方案嗎？這是一個YouTube的錯誤？

我的測試代碼：

<div id="myvideo"></div> 
<button id="play-button">Play</button> 

JS：

var tag = document.createElement("script"); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName("script")[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

onYouTubeIframeAPIReady = function() { 
    var vars = { 
     enablejsapi: 1, 
     origin: window.location.protocol + "//" + window.location.host, 
     autoplay: 0, 
     modestbranding: 1, 
     wmode: "opaque", 
     forceSSL: false 
    }; 

    if (+(navigator.platform.toUpperCase().indexOf('MAC') >= 0 && navigator.userAgent.search("Firefox") > -1)){ 
     vars.html5 = 1; 
    } 
      var playerobj = new YT.Player('myvideo', { 
       videoId: 'ZPy9VCovVME', 
       wmode: 'opaque', 
       playerVars: vars, 
       events: { 
        onReady: function(){ 
         $('#play-button').on('click', function(){ 
          playerobj.playVideo(); 
         }); 
         //playerobj.playVideo(); 
        }, 
        onStateChange: function(state){ 
         switch(state.data){ 
          case YT.PlayerState.PLAYING: 
           break; 
          //case YT.PlayerState.PAUSED: 
          case YT.PlayerState.ENDED: 
           break; 
         } 
        } 
       } 
      }); 
} 

Answer 1

首先，我覺得這是以下問題的重複：YouTube IFrame API play method doesn't work before touch on some Android tablets

我能複製上同樣的問題YouTube Player Demo page。

誤差

無法投遞消息https://www.youtube.com。收件人有原產地http://fiddle.jshell.net。

只發生在你的jsfiddle上。在演示頁面上，此錯誤不會發生，因此您觀察到的錯誤似乎與控制檯中記錄的錯誤無關。我在Android 4.4.4上用chrome進行了檢查。

解決方法

我有一個骯髒的解決辦法，其上的鍍鉻適用於Android 4.4.4（Nexus5）和4.1.2（S2）。我沒有iOS設備來測試這個。該解決方法適用於我的手機，因爲視頻始終在第二次點擊播放按鈕時開始。

http://jsfiddle.net/kjwpwpx8/6/

我隨時可以開始點擊活動視頻的調用playVideo函數之前曾經被稱爲後。在我的解決方法中，我在頁面上放置了兩個iframe。一個隱藏，另一個隱藏。如果通過手機瀏覽器查看該頁面，我會在OnReady-Event之後調用第二個視頻的playVideo功能。該視頻不會播放，因爲瀏覽器會阻止該視頻。

現在，當我們按下播放按鈕時，第一個視頻變爲隱藏並停止，第二個視頻變爲可見，並且再次調用playVideo功能。

這裏是重要的代碼：

var playerOptions = { 
    videoId: 'ZPy9VCovVME', 
    wmode: 'opaque', 
    playerVars: vars, 
    events: {} 
}; 

var playerobj1 = new YT.Player('myvideo1', playerOptions); 
var playerobj2 = null; 

playerOptions.events.onReady = function(){ 
    $('#play-button').on('click', function(){ 
     $("#videowrapper .video1wrapper").hide(); 
     playerobj1.stopVideo(); 

     $("#videowrapper .video2wrapper").show(); 
     playerobj2.playVideo(); 
    }); 

    if(isMobileBrowser) 
     playerobj2.playVideo(); 
}; 

playerobj2 = new YT.Player('myvideo2', playerOptions);