Chromecast + Youtube 嵌入 + HTML5 视频标签 = 错误

Question

我一直在尝试在 Chromecast 应用上播放两个视频（不一定同时）。其中一个是通过 Youtube API 嵌入的，另一个是通过标签加载的标准 HTML5 视频。

事实证明，如果我的 HTML5 页面中还有标准标记，则 Youtube 视频根本不会在 Chromecast 上播放。但是如果我删除那个视频标签，那么 Youtube 视频就会很好地播放。

非常感谢任何建议！

Answer 1

Chromecast 仅支持一个活动视频流。

Answer 2

我遇到了同样的问题。

解决这个问题的关键是，卸载演员表播放器，并且当您尝试播放 Youtube 时，不要让带有 SRC 属性集的视频标签在 DOM 中逗留。

对于 YouTube，在尝试使用 HTML5 视频标签时，也不要让包含其视频播放器的 IFRAME 留在 DOM 中。

您需要先关闭前一个播放器，然后再尝试通过相反机制触发播放。

这是我用来排除故障和解决问题的示例接收器。这是一个工作示例。

<html>
<head>
    <title></title>
    <style type="text/css">
    body {
        background-color: #000;
        overflow: hidden;
    }

    </style>
</head>
<body>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/1.0.0/media_player.js"></script>
    <video id="chromecast" style="width: 50%; height: 50%;"></video>

    <script>
    var ytCode = 'sSwLhYhYgI0'
    var hlsUrl = 'http://host.com/playlist.m3u8'
    </script>


    <!-- Chromecast -->
    <script type="text/javascript">
        var castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
        var messageBus = castReceiverManager.getCastMessageBus('urn:x-cast:tv.domain');

        cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
        cast.player.api.setLoggerLevel(cast.player.api.LoggerLevel.DEBUG);


        castReceiverManager.onReady = function() {
            console.info('[castReceiverManager.onReady]');
            castReceiverManager.setApplicationState('Ready');
        };

        castReceiverManager.onSenderConnected = function(sender) {
            console.info('[castReceiverManager.onSenderConnected]', sender.userAgent);
        };

        messageBus.onMessage = function(event) {
            var message = JSON.parse(event.data);
            console.info('[messageBus.onMessage]', message);
        };

        // Normal
        castReceiverManager.start({
            maxInactivity: 8,
            statusText: 'Ready to play',
            dialData: undefined
        });

        window.playDirect = function(id) {

            // Tear down any YT player
            $('#youtube').remove();

            if(!id) id = 'chromecast'; 
            var mediaElement = document.getElementById(id);
            window.host = new cast.player.api.Host({'mediaElement':mediaElement, 'url':hlsUrl});
            window.host.onError = function(errorCode) {
              console.log('ERROR ' + errorCode);
            };

            var protocol = cast.player.api.CreateHlsStreamingProtocol(window.host);
            window.CCplayer = new cast.player.api.Player(window.host);
            window.CCplayer.load(protocol, 25);
            setTimeout(function() {
                mediaElement.play();
            }, 1000);
        };
    </script>




    <!-- Youtube -->
    <script>
        window.onYouTubeIframeAPIReady = function() {
            console.log('Initialized Youtube');
        };

        var playYT = function() {

            // Tear down any direct player
            if(window.CCplayer) {
                window.CCplayer.unload();
            }
            $('video').attr('src', '');


            // Inject div tag that will be converted to iframe with player
            $('body').append('<div id="youtube" style="width: 50%; height: 50%;"></div>');

            window.YTPlayer = new YT.Player(
                'youtube', 
                {
                    height: '100%',
                    width: '100%',
                    playerVars: {
                        'autoplay': 0,
                        'controls': 0,
                        'cc_load_policy': 0,
                        'fs': 0,
                        'iv_load_policy': 0,
                        'modestbranding': 0,
                        'rel': 0,
                        'showinfo': 0,
                        'enablejsapi': 1
                    },
                    events: {
                    'onReady': function() {
                        var params = { videoId: ytCode, startSeconds: 170 };
                        window.YTPlayer.cueVideoById(params);
                        window.YTPlayer.playVideo();
                    },
                    'onError': function(err) {
                        console.log('YT Error ' + err);
                    }
                }
            });
        };


        var iframeScript = document.createElement('script');
        iframeScript.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(iframeScript, firstScriptTag);
    </script>

</body>
</html>

测试：

加载上面的示例接收器，并在 chrome 调试控制台中替换以下内容：

playDirect()

或

playYT()