使用Youtube Iframe API

时间:2015-04-17 13:56:01

标签: jquery iframe youtube youtube-api

我正在尝试使用Youtube播放器API,以便在关闭模式框时切换视频。

这是我的代码,它正在创建iframe,但按钮没有API控制iframe。

<div id="player"></div>    

<script type="text/javascript">
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 player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '500',
        width: '800',
        videoId: 'f37MOGHMrlI'
      });
}

$(".toggle1").click(function(){
  alert("Pausing " + player);//is undefined :(
  player.pauseVideo();
});

</script>

有人知道缺少什么吗?

1 个答案:

答案 0 :(得分:0)

虽然有必要确保您的网页的整个结构可以确定,因为您的脚本位于body我的猜测是没有添加类toggle1的按钮在分配click处理程序时到DOM。在$(document).ready中包装该处理程序赋值,或者:

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '500',
        width: '800',
        videoId: 'f37MOGHMrlI'
        events: {
          onReady: configureButton
        }
      });
}

function configureButton() {
  $(".toggle1").click(function(){
    player.pauseVideo();
  });
}