Chromecast上的YouTube iframe API行为 [英] YouTube iframe api behavior on Chromecast
问题描述
尝试在Chromecast上播放YouTube视频，而不是使用YouTube接收器，而只是使用iframe YouTube API。将接收者的网址加载到台式机Chrome浏览器中后，它可以正常播放，但是当将相同的网址加载到Chromecast上时，我收到消息此视频当前不可用-了解详情。如果我一直尝试获取创建后的小部件以播放不同的视频，有时它还会显示需要Adobe Flash Player才能播放视频。
Trying to get a YouTube video playing on Chromecast, not using the YouTube receiver but simply the iframe YouTube api. When the receiver url is loaded in a desktop chrome browser it plays ok but when the same url is loaded onto Chromecast I get the message 'This video is currently unavailable - Learn More'. If I keep trying to get the widget, once created, to play different videos it sometimes also says 'The Adobe Flash Player is required for video playback'.
小部件是如文档所示，使用新的YT.Player在onYouTubeIframeAPIReady（）回调中创建。也许我很困惑，但我认为iframe API是基于html5的，而不是基于Flash的。有没有人成功做到这一点，或者Chromecast不支持此功能，因此这是奇怪的行为吗？我还偶然发现了这个 http://www.youtube.com/html5
The widget is created in the onYouTubeIframeAPIReady() callback using new YT.Player as shown in the docs. Maybe I'm confused but I thought the iframe api was html5 based, not flash based. Has anyone successfully achieved this or is this unsupported on Chromecast, hence the weird behaviour? I also stumbled across this http://www.youtube.com/html5
推荐答案
这是我当前在接收器上使用的代码。消息处理（双向）都是碰碰运气的，我目前正在努力中……但是iFrame库的加载，视频的嵌入等都可以。如果您无法正常使用，我们可以开始调查您的设置可能有何不同。我试图在可能有帮助的地方添加评论。
Here's the code I'm currently using on my receiver. The message handling (both directions) is hit and miss, and I'm currently working through that ... but the loading of the iFrame library, the embedding of the video, etc. all works. If it doesn't work on your end, we can start to investigate how your setup might be different. I've tried to add comments where it might be helpful.
<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>
这篇关于Chromecast上的YouTube iframe API行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
