动态创建的 iFrame 上的 YouTube iFrame API

Posted 2023-05-09

【中文标题】动态创建的 iFrame 上的 YouTube iFrame API

【英文标题】：YouTube iFrame API on dynamically created iFrame

【发布时间】：2014-12-19 06:39:11

【问题描述】：

我正在使用 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   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();
    
  );

但是，我收到此错误： 未捕获的类型错误：无法读取未定义的属性“pauseVideo”

谁能指出我正确的方向。任何帮助表示赞赏。

【参考方案1】：

您再次使用关键字“var”将“播放器”重新定义为首次点击回调的局部变量。去掉第二个“var”

(function() 

  var player;

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

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

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

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

  )