Chromecast+；Youtube嵌入&x2B；HTML5视频标签=错误
我一直在尝试在Chromecast应用程序上播放两个视频（不一定同时播放）。一个是通过Youtube API嵌入的，另一个是通过标签加载的标准HTML5视频 事实证明，如果我的HTML5页面中也有一个标准标签，Youtube视频就不会在Chromecast上播放。但是如果我删除了这个视频标签，那么Youtube视频就会播放得很好Chromecast+；Youtube嵌入&x2B；HTML5视频标签=错误,youtube,html5-video,chromecast,youtube-javascript-api,television,Youtube,Html5 Video,Chromecast,Youtube Javascript Api,Television,我一直在尝试在Chromecast应用程序上播放两个视频（不一定同时播放）。一个是通过Youtube API嵌入的，另一个是通过标签加载的标准HTML5视频 事实证明，如果我的HTML5页面中也有一个标准标签，Youtube视频就不会在Chromecast上播放。但是如果我删除了这个视频标签，那么Youtube视频就会播放得很好 非常感谢您的建议 Chromecast上只支持一个活动视频流。我遇到了同样的问题 解决这个问题的关键因素是，卸载cast播放器，并且在尝试播放Youtube时，不要让设
非常感谢您的建议 Chromecast上只支持一个活动视频流。我遇到了同样的问题 解决这个问题的关键因素是，卸载cast播放器，并且在尝试播放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>
playDirect()
playYT()