YouTube iframe api behavior on Chromecast

后端未结

关注

 3  1311

Trying to get a YouTube video playing on Chromecast, not using the YouTube receiver but simply the iframe YouTube api. When the receiver url is loaded in a desktop chrome browse

相关标签:

3条回答

抹茶落季

2021-02-11 01:47

I also ran into this issue and found the cause to be the fact that I was using html5 audio to play some sound effects just before the video began. Removing the sound effects made the youtube player work again.

0 讨论(0)
发布评论:

提交评论
- 加载中...
感动是毒

2021-02-11 02:03

Current behavior: it now seems to be fixed with Chromecast firmware 16041 and if the country code is set correctly during Chromecast setup. See the latest comment here https://code.google.com/p/gdata-issues/issues/detail?id=5923

Old answer: Here is the root cause of the issue: https://support.google.com/chromecast/answer/2995235?hl=en Some videos may not play using Chromecast. Private videos, live content, and videos not approved for mobile playback will not work with Chromecast. Hopefully this will change, kills a primary Chromecast use case.

0 讨论(0)
发布评论:

提交评论
- 加载中...

青春惊慌失措

2021-02-11 02:04

Here's the code I'm currently using on my receiver. The message handling (both directions) is hit and miss, and I'm currently working through that ... but the loading of the iFrame library, the embedding of the video, etc. all works. If it doesn't work on your end, we can start to investigate how your setup might be different. I've tried to add comments where it might be helpful.

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

0 讨论(0)