Chromecast上的YouTube iframe api行为

发布时间：2020-12-14 21:17:45 所属栏目：资源来源：网络整理

导读：尝试在Chromecast上播放YouTube视频,而不是使用YouTube接收器,而只使用iframe YouTube API.当接收器URL加载到桌面铬浏览器中时,它可以正常播放,但是当同一个网址加载到Chromecast时,我收到消息“此视频当前不可用 – 了解更多”.如果我一直试图获取小部件,一

尝试在Chromecast上播放YouTube视频,而不是使用YouTube接收器,而只使用iframe YouTube API.当接收器URL加载到桌面铬浏览器中时,它可以正常播放,但是当同一个网址加载到Chromecast时,我收到消息“此视频当前不可用 – 了解更多”.如果我一直试图获取小部件,一旦创建,播放不同的视频,它有时也会说“视频播放需要Adobe Flash Player”.

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

解决方法

这是我目前在接收器上使用的代码.消息处理(两个方向)是命中和未命中,我正在解决这个问题……但是iFrame库的加载,视频的嵌入等等都有效.如果它不适用于您,我们可以开始调查您的设置可能会有所不同.我试图在可能有帮助的地方添加评论.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!