在一个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。