一次暂停同一页面上的多个YouTube视频

时间:2014-04-09 14:02:52

标签: javascript jquery iframe youtube cross-browser

在一个HTML网页上嵌入了多个YouTube iframe。任务是在用户单击特定链接/按钮时暂停这些视频。我已经用这种方式实现了它,但Firefox和IE似乎没有考虑到它。我花了很长时间在谷歌搜索,没有找到任何更好的方法。如果您可以建议重构代码并使其在所有主流浏览器(以及IE9 +)中运行,那将会很高兴。

videos = (function() {
  var
    players = [],
    pauseMatchers = ".close-overlay, .owl-next, .owl-prev, a.btn-contact";

  var bind = function(e) {
    var pauseButtons = $(pauseMatchers);

    pauseButtons.each(function(index, el) {
      $(el).on("click", function() {
        pauseAll();
      });
    });
  };

  var push = function(object) {
    players.push(object);
  };

  var pauseAll = function() {
    $(players).each(function(index, el) {
      el.pauseVideo();
    });
  };

  return {
    bind: bind,
    push: push,
    players: players
  };
})();

// Inject YouTube, baby
var youtubePlayer, firstScriptTag, tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  $("[data-behaviour~=embed]").each(function(index, el) {
    var player, $el = $(el);

    player = new YT.Player($el.attr("id"), {
      events: {
        "onReady": videos.bind
      }
    });

    videos.push(player);
  });
}

这是fiddle

0 个答案:

没有答案