YouTube iframe api behavior on Chromecast

问题

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 browser it plays ok but when the same url is loaded onto Chromecast I get the message 'This video is currently unavailable - Learn More'. If I keep trying to get the widget, once created, to play different videos it sometimes also says 'The Adobe Flash Player is required for video playback'.

The widget is created in the onYouTubeIframeAPIReady() callback using new YT.Player as shown in the docs. Maybe I'm confused but I thought the iframe api was html5 based, not flash based. Has anyone successfully achieved this or is this unsupported on Chromecast, hence the weird behaviour? I also stumbled across this http://www.youtube.com/html5

回答1:

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>

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/18582694/youtube-iframe-api-behavior-on-chromecast

标签

youtube

youtube-api

chromecast