我正在尝试使用YouTube API来控制幻灯片中的一组播放器。我希望能够根据幻灯片播放的帧来停止和播放视频。所以我将根据帧的id将玩家推入一个数组。当名声改变时,我叫停止当前的名声,开始新的名声。然而,即使在最基本的情况下,我也会收到这个错误:
Uncaught TypeError: Object #<S> has no method 'playVideo'
这是简单测试的代码
<!-- WIDGET YOUTUBE VIDEO -->
<div class="widget_youtube_video" id="wyv_1-5">
<iframe id="ytplayer_1-5" width="560" height="315" src="//www.youtube.com/embed/CxW8TLtUMfM?autoplay=0&enablejsapi=1&origin=http://mmgi.localhost/" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var yt_players = {};
function onYouTubeIframeAPIReady() {
yt_players['1-5'] = new YT.Player('ytplayer_1-5');
yt_players['1-5'].playVideo();
}
</script>
</div><!-- end widget_youtube_video -->
我已经尝试从url中删除origin标记,以检查是否是这导致了问题,但它仍然给了我同样的错误。任何帮助都将不胜感激,因为我不知道从这里去哪里。
提前谢谢。
编辑:
我还试着把玩家放在一个没有排列的物体里,但也没有成功。
我看到了一些可能有用的事情。首先,删除origin参数将在开发过程中有所帮助,因为如果A)它不完全匹配,B)在本地主机上时,它通常会阻止对API的访问,有时会无故访问。
然而,正如您所注意到的,即使在您的情况下删除它,API也没有响应。这是因为创建一个YT.player对象需要花费一些时间,因此您试图在对象完全初始化之前触发一个playVideo方法。相反,您应该使用YT.Player对象的onReady回调参数,如下所示:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var yt_players = {};
function onYouTubeIframeAPIReady() {
yt_players['1-5'] = new YT.Player('ytplayer_1-5', {
events: {'onReady': onPlayerReady} // bind to callback for when object is ready
});
}
function onPlayerReady(event) {
event.target.playVideo(); // this is kept generic so the same callback can be used with any player object
}
以下是工作代码:http://jsfiddle.net/jlmcdonald/dEjXL/