我正在将 YouTube 视频添加到公司网站,并希望它们显示在非闪存设备上。我一直在使用 youtube iframe API 并更新了其中一个示例,以允许用户单击链接来更改 iframe 中的视频。编辑后的代码是:
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function loadVideo(videoID) {
if(player) { player.loadVideoById(videoID); }
}
</script>
<a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a>
</body>
</html>
我唯一添加的是:
function loadVideo(videoID) {
if(player) { player.loadVideoById(videoID); }
}
这在 Safari、Chrome 和 Firefox 中工作正常,但在 IE7、8 或 9 中不起作用。在 IE7 和 8 中,它返回错误“对象不支持此属性或方法”。
这是 API 的问题还是我做错了什么?
我遇到了类似的问题,事实证明,只要
loadVideoById
尚未被调用,您就不应该调用 YT.Player 对象上的任何方法(包括 onPlayerReady
)。
仅进行检查
if(player) {...}
是不够的,将创建 Player
对象,并且某些属性已经在 out 中可用,而无需提供您需要的方法。
您需要从 onPlayerReady 事件调用加载视频函数。
例如,如果您想在单击缩略图时加载视频,请执行此操作(这需要 jquery,但它应该能够表达要点):
function onPlayerReady(evt) {
evt.target.playVideo();
//declare the click even function you want
$('#thumbs a).click(function(){
//get a data-video-id attr from the <a data-video-id="XXXXXX">
var myvideo = $(this).attr('data-video-id');
//call your custom function
loadVideo(myvideo);
//prevent click propagation
return false;
});
}
这样您就可以确定播放器已加载。
在我的点击事件处理程序中调用
return false
后,使用 player.loadVideoById
防止点击传播对我来说很有效。
使用player._player.loadVideoById(yourvideoid)通过id手动触发事件