Question

我在Bootstrap标签内容中有多个YouTube视频。我打算暂停Bootstrap选项卡的click事件。我编码的是：

function stopIframeonTabClick(){

$('.video-nav-tab a').click(function (e) {

 var selected = $(this).parent().index();

  $('.video-nav-tab a').each(function(index){

 if(index != selected){

   var iframe = $(".tab-content").children().eq(index).find('iframe');

   //console.log(iframe.attr('class'));

   var data = {"event":"command","func":"pauseVideo","args":""};
   var message = JSON.stringify(data);
   $("iframe", index)[0].contentWindow.postMessage(message, '*');

   }
    });
});
};//stopIframeonTabClick()

stopIframeonTabClick();

它无法正常工作，我发现控制台错误：

Uncaught TypeError: Cannot read property 'contentWindow' of undefined

我确信$("iframe", index)[0].contentWindow.postMessage(message, '*');索引在这里做错了，但我无法弄清楚要做什么。

同样在IE中检查，即使由于错误，视频也无法播放。

基本上我使用youtube-video.js在slick slider内播放视频并包含在引导标签内容中

如果有人能帮助我解决这个问题，我将非常感激。

提前致谢。

Answer 1

经过漫长的R＆amp; D，我完成了它。我错误地在活动标签内容和活动光滑滑块中拾取实际iframe。我需要拥有实际的window DOM。感谢Jivings answer

我正在分享代码，以便将来帮助他人： -

 $(window).load(function(){

    function stopIframeonTabClick(){

    $('.video-nav-tab a').click(function (e) {

    var selected = $(this).parent().index();

    $('.video-nav-tab a').each(function(index){

    if(index != selected){

    var iframe = $(".video-tab-content.tab-content .tab-pane.active .slick-active .video-wrapper ").find('iframe');
       var iframeID = iframe.attr('id');
      console.log(iframeID); 
       var data = {"event":"command","func":"pauseVideo","args":""};
       var message = JSON.stringify(data);
        $('#'+iframeID )[0].contentWindow.postMessage(message, '*');

          }
         });
        });
     };//stopIframeonTabClick()

 stopIframeonTabClick();
});

在引导选项卡上暂停Youtube视频单击

1 个答案: