Chromecast + Youtube 嵌入 + HTML5 视频标签 = 错误
Posted
技术标签:
【中文标题】Chromecast + Youtube 嵌入 + HTML5 视频标签 = 错误【英文标题】：Chromecast + Youtube embed + HTML5 video tag = bug 【发布时间】：2014-10-22 01:20:33 【问题描述】：我一直在尝试在 Chromecast 应用上播放两个视频（不一定同时）。其中一个是通过 Youtube API 嵌入的，另一个是通过标签加载的标准 html5 视频。
事实证明，如果我的 HTML5 页面中还有标准标记，则 Youtube 视频根本不会在 Chromecast 上播放。但是如果我删除那个视频标签，那么 Youtube 视频就会很好地播放。
非常感谢任何建议！
【问题讨论】：
【参考方案1】：Chromecast 仅支持一个活动视频流。
【讨论】：
【参考方案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()
【讨论】：
以上是关于Chromecast + Youtube 嵌入 + HTML5 视频标签 = 错误的主要内容，如果未能解决你的问题，请参考以下文章
Chromecast 上的 YouTube iframe api 行为
使用 JAVA/Android 和 Http 的 Chromecast 通信