Question

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

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

非常感谢任何建议！

Answer 1

Chromecast仅支持一个有效的视频流。

Answer 2

我遇到了同样的问题。

要解决这个问题的关键因素是，卸载演员，当你尝试播放Youtube时，不要让视频标签留在DOM中并设置SRC属性。

至于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()

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

2 个答案: