Chromecast 上的 YouTube iframe api 行为答案

【问题标题】：YouTube iframe api behavior on ChromecastChromecast 上的 YouTube iframe api 行为
【发布时间】：2013-09-06 02:55:47
【问题描述】：

尝试在 Chromecast 上播放 YouTube 视频，而不是使用 YouTube 接收器，而只是使用 iframe YouTube api。当接收器 url 在桌面 chrome 浏览器中加载时，它可以正常播放，但是当相同的 url 加载到 Chromecast 上时，我收到消息“此视频当前不可用 - 了解更多”。如果我一直尝试让小部件在创建后播放不同的视频，它有时还会显示“视频播放需要 Adobe Flash Player”。

小部件是在 onYouTubeIframeAPIReady() 回调中使用新的 YT.Player 创建的，如文档中所示。也许我很困惑，但我认为 iframe api 是基于 html5，而不是基于 flash。有没有人成功地实现了这一点，或者 Chromecast 不支持这一点，因此出现了奇怪的行为？我也偶然发现了这个http://www.youtube.com/html5

【问题讨论】：

我已经成功构建了一个使用 iFrame API 的接收器，并且我尝试过的任何视频都没有任何问题。哪些视频 ID 给您带来了错误，因此我可以在接收器中试用它们，如果成功，请在此处分享代码作为答案？
我试过的每一个。例如，来自 youtube api 参考示例 - 'M7lc1UVf-VE'
但是你让它工作是非常令人鼓舞的——可能只是配置/初始化。如果您可以发布一些非常有用的代码。

标签： youtube youtube-api chromecast

【解决方案1】：

这是我目前在接收器上使用的代码。消息处理（两个方向）是命中注定的，我目前正在努力解决这个问题……但是 iFrame 库的加载、视频的嵌入等一切正常。如果它对您不起作用，我们可以开始调查您的设置可能有何不同。我尝试在可能有用的地方添加 cmets。

<html>
<head>
<script src="https://www.gstatic.com/cast/js/receiver/1.0/cast_receiver.js">
</script>
<script type="text/javascript">
 // first create our receiver object and our channel handler
        var receiver = new cast.receiver.Receiver('{YOUR_APP_ID}', ['ChromecastYoutube'],"",5);
        var ytChannelHandler = new cast.receiver.ChannelHandler('ChromecastYoutube'); //  'using 'ChromecastYoutube' as my dev namespace. Wouldn't really be that in production.
        ytChannelHandler.addChannelFactory(receiver.createChannelFactory('ChromecastYoutube'));
        ytChannelHandler.addEventListener(
                cast.receiver.Channel.EventType.MESSAGE,
                onMessage.bind(this)
        );

        receiver.start();

        window.addEventListener('load', function() { // we won't try to load the iframe libraries until the chromecast window is fully loaded.
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        });

        var player;
        function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                        height: '562',
                        width: '1000',
                        videoId: 'jLlSqucqXB0',
                        playerVars: { 'autoplay': 0, 'controls': 0 },
                        events: {
                                'onReady': onPlayerReady,
                                'onPlayerStateChange': onStateChange
                        }
                });
        }

        function onPlayerReady(event) {
                document.getElementById('annotation').innerHTML="We're ready to go";
        }

        function onStateChange(event) {
                switch (event.data) {
                        case YT.PlayerState.ENDED:
                                // TODO let sender know we're done, then close casting 
                                break;
                        case YT.PlayerState.PLAYING:
                                // TODO let sender know we're playing 
                                break;
                        case YT.PlayerState.PAUSED:
                                // TODO let sender know we're paused 
                                break;
                }
        }

        function onMessage(event) { // currently, any one of these will work, but subsequent ones seem to falter. Investigating...
                ytBindings={"playVideo":player.playVideo(),"pauseVideo":player.pauseVideo(),"stopVideo":player.stopVideo(),"getStatus":player.getPlayerState()}
                ytBindings[event.message];
        }


</script>
<style>
#wrapper {
        width: 1000px;
        margin: 10px auto;
        text-align: center;
}
#annotation {
        color: #ffffcc;
        font-size: 200%;
        margin-top:25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="player"></div>
<div id="annotation"></div>
</div>
</body>
</html>

【讨论】：

它在各方面都与我的相似，除了一个。我先设置了一个 SoundCloud 小部件，也在 iframe 中，然后随便在同一页面上添加了一个 YouTube iframe。似乎它们不能共存，但我不知道为什么。如果我删除 SoundCloud 小部件，则视频播放正常。如果你觉得如此倾向然后添加这个... w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/…">
似乎更复杂，可能与额外的 iframe 无关。仅使用 YouTube iframe，它适用于我最初使用的一组视频 id，但我现在收到以下任何 id 的 flash 错误.... ktvTqknDobU 、 5NV6Rdv1a3I 、 e9SeJIgWRPk
这些都是 Vevo 视频。不幸的是，Vevo（和其他一些内容提供商，通常与音乐有关）在他们的视频中设置了限制，因此它们根本不能嵌入，或者只能嵌入到 Flash 播放器等中。如果有阻止阻止HTML5 嵌入，它将尝试默认为 Flash 嵌入（当然，这就是 iFrame 的用途），这会触发错误，因为 Chromecast 没有 Flash 播放器。如果您尝试强制使用 HTML5 模式，则会收到错误 150，表明它无法嵌入。
就 Soundcloud 小部件而言，这是一个奇怪的问题。它自己运行良好，但确实会引发一些 DOM 错误。当与 YouTube iframe 结合使用时，YouTube 嵌入会抛出错误 5，这是 HTML5 播放器中的一般错误（我想知道这是否是由 soundcloud 小部件抛出的错误触发的）。
非常有帮助 - 谢谢。我需要找出客户端上的不可嵌入视频以避免请求。关于 SoundCloud，我不需要两者共存，但很高兴知道那里有问题。

【解决方案2】：

当前行为：现在似乎已通过 Chromecast 固件 16041 以及在 Chromecast 设置期间正确设置了国家/地区代码进行了修复。在此处查看最新评论https://code.google.com/p/gdata-issues/issues/detail?id=5923

旧答案：这是问题的根本原因：https://support.google.com/chromecast/answer/2995235?hl=en 某些视频可能无法使用 Chromecast 播放。私人视频、直播内容和未获准用于移动播放的视频将无法与 Chromecast 一起使用。 希望这会改变，杀死一个主要的 Chromecast 用例。

【讨论】：

获取请求以尝试解决此问题....我认为 Vevo 视频无法在 Chromecast 上播放，因为它们不可嵌入。对于 iframe youtube 播放器，情况确实如此。但是，Android YouTube 应用可以毫无问题地投射（并且没有广告）。显然谷歌可以做我们做不到的事情，但你认为如果我改用 YouTube 接收器而不是 iframe 小部件，这会解决问题吗？
查看更新后的答案。似乎 Chromecast Youtube 限制已解除。

【解决方案3】：

我也遇到了这个问题，发现原因是我在视频开始之前使用 html5 音频播放一些音效。删除音效使 youtube 播放器再次工作。

【讨论】：