这是我目前在接收器上使用的代码。消息处理(两个方向)是命中注定的,我目前正在努力解决这个问题……但是 iFrame 库的加载、视频的嵌入等一切正常。如果它对您不起作用,我们可以开始调查您的设置可能有何不同。我试图在可能有帮助的地方添加评论。
<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>