最近几天 YouTube 嵌入 API 出现了一个问题。问题是，当您使用官方 API 嵌入视频时，它根本不允许您访问 API。当您尝试访问 API 时，您在日志 (IOS) 上收到错误消息，如果您尝试通过 API 播放视频，视频会中断。如果您通过 API 加载它，但您不使用 API，则用户可以点击播放视频。

此问题在以下浏览器上仍然存在:

iPad 和 iPhone 上的 IOS 7 Safari iPad 和 iPhone 上的 IOS 7 Chrome 安卓 4 Chrome

(我的播放按钮使用 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 服务器只是 LOCATION: 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;
                        }
                    }
                }
            });
}

最佳答案

首先，我认为这是以下问题的重复:YouTube IFrame API play method doesn't work before touch on some Android tablets

我可以在 YouTube Player Demo page 上重现同样的问题.

错误

Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net.

仅出现在您的 jsfiddle 上。在演示页面上没有发生此错误，因此您观察到的错误似乎与控制台中记录的错误无关。我在 Android 4.4.4 上用 chrome 检查了这个。

解决方法

我有一个肮脏的解决方法，适用于 Android 4.4.4 (Nexus5) 和 4.1.2 (S2) 上的 chrome。我没有 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);

关于javascript - IOS 和 Android 上的 YouTube 嵌入 API 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25685366/