动态创建的iFrame上的YouTube iFrame API

时间:2014-10-23 14:43:01

标签: jquery iframe youtube

我正在使用YouTube iFrame API,因为我需要能够暂停使用jQuery动态创建的视频。我有以下代码:



// Load YouTube API
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

$(function() {

  var player;
  
  $(document).on('click', 'button', function(){
    
    media = $(this).data('media');
    
    $('#player').append('<div id="media"><iframe width="200" height="200" src="http://www.youtube.com/embed/' + media + '?autoplay=1" frameborder="0" allowfullscreen id="media-player"></iframe>');
    
    var player = new YT.Player('media-player');
    
  })
  
  
  $('#pause').click(function(){
    
    player.pauseVideo();
    
  });
}
&#13;
&#13;
&#13;

但是,我收到此错误: 未捕获的TypeError:无法读取属性&#39; pauseVideo&#39;未定义的

任何人都可以指出我正确的方向。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

您通过再次使用关键字“var”将“播放器”重新定义为第一次单击回调的局部变量。摆脱第二个“var”

(function() {

  var player;

  $(document).on('click', 'button', function(){

    media = $(this).data('media');

    $('#player').append('<div id="media"><iframe width="200" height="200" src="http://www.youtube.com/embed/' + media + '?autoplay=1" frameborder="0" allowfullscreen id="media-player"></iframe>');

    player = new YT.Player('media-player');

  })
相关问题