YouTube-API-Problem bei IOS und Android einbetten

Question

In den letzten Tagen sind Probleme mit der YouTube-Einbettungs-API aufgetreten. Das Problem besteht darin, dass Sie beim Einbetten eines Videos mit der offiziellen API einfach nicht auf die API zugreifen können. Wenn Sie versuchen, auf die API zuzugreifen, erhalten Sie eine Fehlermeldung auf dem Protokoll (IOS) und wenn Sie versuchen, das Video über die API zu spielen, wird das Video schwarz. Wenn Sie es über die API laden, aber Sie nicht die API verwenden, kann der Benutzer das Video mit Tippen wiedergeben.

Das Problem bestehen bleiben auf den folgenden Browsern:

IOS 7 Safari auf dem iPad und iPhone IOS 7 Chrome auf iPad und iPhone Android 4 Chrome

(My Play-Taste die API verwendet, um das Video abzuspielen und dass produzieren den Fehler) JSfiddle: http://jsfiddle.net/frdd8nvr/6/

Fehlermeldung:

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. 

Einige Debug-Informationen:

Wie ich sehe die API den iframe auf der Website erstellen. Die src ist irgendwann http und irgendwann https.

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

Mein Test zeigte, dass die meisten der Zeit YouTube-Server einfach LOCATION: https: // ... die Anforderung an die https-URL, aber rund 10% sie die HTTP-Anforderung mit dem richtigen Inhalt serviert.

Ich denke irgendwie das Problem im Zusammenhang mit den erzwungenen https, aber ich war nicht in der Lage, die Lösung herauszufinden. Haben Sie das gleiche erlebt? Haben Sie eine Lösung für dieses Problem? Ist es ein YouTube-Fehler?

Mein Testcode:

<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

Erstens, ich denke, das ist ein Duplikat der folgenden Frage: YouTube IFrame API play method doesn't work before touch on some Android tablets

Ich könnte das gleiche Problem auf die reproduzieren YouTube Player Demo page.

Der Fehler

Nachricht kann nicht https://www.youtube.com schreiben. Empfänger hat Ursprung http://fiddle.jshell.net.

ist nur auf Ihrer jsfiddle. Auf der Demoseite tritt dieser Fehler nicht auf, daher scheint der beobachtete Fehler nicht mit dem in der Konsole protokollierten Fehler zusammenzuhängen. Ich habe das mit Chrome auf Android 4.4.4 überprüft.

Umgehung

Ich habe eine schmutzige Abhilfe, die auf Chrom auf Android 4.4.4 (Nexus5) und 4.1.2 (S2) arbeitet. Ich habe kein iOS-Gerät, um dies zu testen. Der Workaround funktioniert auf meinen Handys, weil das Video immer beim zweiten Klick auf den Play-Button startet.

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

Ich kann immer das Video auf Click-Events starten, nachdem die Funktion einmal vor playvideo aufgerufen wurde. In meiner Problemumgehung habe ich zwei iframes auf der Seite platziert. Einer ist verborgen, während der andere sichtbar ist. Wenn die Seite von einem mobilen Browser angezeigt wird, rufe ich nach dem OnReady-Event die playVideo-Funktion des zweiten Videos auf. Das Video wird nicht abgespielt, da der Browser dies blockiert.

Jetzt, wenn unsere Play-Taste gedrückt wird, wird das erste Video ausgeblendet und gestoppt und das zweite Video wird sichtbar und die playVideo-Funktion wird erneut aufgerufen.

Hier ist der wichtige Code ist:

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