弹出窗口中的 Youtube 视频自动播放
Posted
技术标签:
【中文标题】弹出窗口中的 Youtube 视频自动播放【英文标题】：Youtube Video Autoplay in popup 【发布时间】：2014-09-30 06:15:54 【问题描述】：我制作了一个弹出窗口并在其中放置了一个 youtube 视频。我将视频设置为自动播放。但问题是当我打开页面时播放视频。它在全球范围内自动播放，我希望它在弹出窗口显示时自动播放。我没有找到任何解决方案。
目前，它的播放就像我有背景鬼在说些什么。 有人可以帮忙吗？
视频 html
<iframe src="http://www.youtube.com/embed/?wmode=opaque&autoplay=1&rel=0&color=white" frameborder="0"></iframe><a href="http://www.youtube.com" target="_blank"><img class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /></a></div>
</div>
来电弹窗
<a href="#" data-reveal-id="video_pop"><img src="kaow.png"/></a>
</div>
弹出内容
<div id="video_pop" class="reveal-modal medium">
<a class="close-reveal-modal"></a>
<div>
<iframe src="http://www.youtube.com/embed/?wmode=opaque&autoplay=1&rel=0&color=white" frameborder="0"></iframe><a href="http://www.youtube.com" target="_blank"><img class="watermark" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHcbyVSjHQlwCy3tYqOyLwSWDO4tblhxTVVjKV5R0PtFsPy9TwfA" /></a></div>
</div>
JS
Foundation.libs.reveal =
name: "reveal",
version: "4.2.2",
locked: !1,
settings:
animation: "fadeAndPop",
animationSpeed: 250,
closeOnBackgroundClick: !0,
closeOnEsc: !0,
dismissModalClass: "close-reveal-modal",
bgClass: "reveal-modal-bg",
open: function() ,
opened: function() ,
close: function() ,
closed: function() ,
bg: a(".reveal-modal-bg"),
css:
open:
opacity: 0,
visibility: "visible",
display: "block"
,
close:
opacity: 1,
visibility: "hidden",
display: "none"
,
init: function(b, c, d)
return Foundation.inherit(this, "data_options delay"), "object" == typeof c ? a.extend(!0, this.settings, c) : "undefined" != typeof d && a.extend(!0, this.settings, d),
"string" != typeof c ? (this.events(), this.settings.init) : this[c].call(this, d);
,
events: function()
var b = this;
return a(this.scope).off(".fndtn.reveal").on("click.fndtn.reveal", "[data-reveal-id]", function(c)
c.preventDefault();
if (!b.locked)
var d = a(this), e = d.data("reveal-ajax");
b.locked = !0;
if ("undefined" == typeof e) b.open.call(b, d); else
var f = e === !0 ? d.attr("href") : e;
b.open.call(b, d,
url: f
);
).on("click.fndtn.reveal", this.close_targets(), function(c)
c.preventDefault();
if (!b.locked)
var d = a.extend(, b.settings, b.data_options(a(".reveal-modal.open")));
if (a(c.target)[0] === a("." + d.bgClass)[0] && !d.closeOnBackgroundClick) return;
b.locked = !0, b.close.call(b, a(this).closest(".reveal-modal"));
).on("open.fndtn.reveal", ".reveal-modal", this.settings.open).on("opened.fndtn.reveal", ".reveal-modal", this.settings.opened).on("opened.fndtn.reveal", ".reveal-modal", this.open_video).on("close.fndtn.reveal", ".reveal-modal", this.settings.close).on("closed.fndtn.reveal", ".reveal-modal", this.settings.closed).on("closed.fndtn.reveal", ".reveal-modal", this.close_video),
a("body").bind("keyup.reveal", function(c)
var d = a(".reveal-modal.open"), e = a.extend(, b.settings, b.data_options(d));
27 === c.which && e.closeOnEsc && d.foundation("reveal", "close");
), !0;
,
open: function(b, c)
if (b) if ("undefined" != typeof b.selector) var d = a("#" + b.data("reveal-id")); else
var d = a(this.scope);
c = b;
else var d = a(this.scope);
if (!d.hasClass("open"))
var e = a(".reveal-modal.open");
"undefined" == typeof d.data("css-top") && d.data("css-top", parseInt(d.css("top"), 10)).data("offset", this.cache_offset(d)),
d.trigger("open"), e.length < 1 && this.toggle_bg(d);
if ("undefined" == typeof c || !c.url) this.hide(e, this.settings.css.close), this.show(d, this.settings.css.open); else
var f = this, g = "undefined" != typeof c.success ? c.success : null;
a.extend(c,
success: function(b, c, h)
a.isFunction(g) && g(b, c, h), d.html(b), a(d).foundation("section", "reflow"),
f.hide(e, f.settings.css.close), f.show(d, f.settings.css.open);
), a.ajax(c);
,
close: function(b)
var b = b && b.length ? b : a(this.scope), c = a(".reveal-modal.open");
c.length > 0 && (this.locked = !0, b.trigger("close"), this.toggle_bg(b), this.hide(c, this.settings.css.close));
,
close_targets: function()
var a = "." + this.settings.dismissModalClass;
return this.settings.closeOnBackgroundClick ? a + ", ." + this.settings.bgClass : a;
,
toggle_bg: function(b)
0 === a(".reveal-modal-bg").length && (this.settings.bg = a("<div />",
"class": this.settings.bgClass
).appendTo("body")), this.settings.bg.filter(":visible").length > 0 ? this.hide(this.settings.bg) : this.show(this.settings.bg);
,
已编辑：
我正在使用 Foundation 5 Reveal Model 弹出：http://foundation.zurb.com/docs/components/reveal.html
【问题讨论】：
【参考方案1】：我想你想要这样的东西：
LIVE EXAMPLE
基本上我使用 API javascript 将动作 play 和 pause 添加到视频中。
并且我使用 Foundation 的默认功能向播放器添加事件。
HTML
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome</h2>
<div id="player"></div>
<a class="close-reveal-modal">×</a>
</div>
JS
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady()
player = new YT.Player('player',
height: '315',
width: '560',
videoId: 'l-gQLqv9f4o',
events:
'onStateChange': onPlayerStateChange
);
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.PLAYING)
//player is playing
else
//player is paused
function stopVideo()
player.stopVideo();
function playVideo()
player.playVideo();
function pauseVideo()
player.pauseVideo();
$(document).on('opened.fndtn.reveal', '[data-reveal]', function ()
playVideo();
);
$(document).on('closed.fndtn.reveal', '[data-reveal]', function ()
pauseVideo();
);
【讨论】：
【参考方案2】：From the YouTube JavaScript Player API Reference:
JavaScript API 允许用户控制 YouTube 无铬或 通过 JavaScript 嵌入视频播放器。可以打电话来玩， 暂停，在视频中寻找特定时间，设置音量，静音 播放器和其他有用的功能。
您可以使用 API 的 player.playVideo()、player.pauseVideo() 和 player.stopVideo() 方法。
【讨论】：
嗯，现在更混乱了。您能具体说明任何解决方案吗？【参考方案3】：所以，我已经阅读了很多关于此的不同主题，而我所看到的大部分内容都非常复杂。我走了一条更简单的路线。
$('.reveal-overlay').click(function(e)
var loc = document.getElementById('myFrame').src;
var stoploc = loc.replace("?autoplay=1", "");
document.getElementById('myFrame').setAttribute('src', stoploc);
);
$('.playVideo').click(function(e)
var loc = document.getElementById('myFrame').src;
var autoloc = loc + "?autoplay=1";
document.getElementById('myFrame').setAttribute('src', autoloc);
);
这基本上只会在打开模式后将 ?autoplay=1 附加到 YouTube 视频中。 .playVideo 类位于您用来打开模态窗口的任何按钮上。
.reveal-overlay 类由 Foundation 创建。因此，当点击叠加层时，它会从视频网址中删除任何 ?autoplay=1。
希望这可以帮助遇到此问题的任何人。这很简单，应该适用于多个不同的视频，另外，如果有人关闭了 js，它不会在后台播放任何内容。
还有一点，您加载的视频应该是普通的非自动播放视频。这将在单击后将其变为自动播放，并在关闭时将其恢复为非自动播放。
【讨论】：
【参考方案4】：感谢@Jarod Means 脚本！它有效，我使用它，因为它只需要 jQuery（简单的解决方案 = 很好的解决方案）。但是我为多个视频剪辑开发了它，这在幻灯片中非常有用，作为一个例子，或者当你需要这个解决方案来处理同一个 dom 中的多个剪辑时。我也做到了，所以它完全在 jQuery 中。
只是发布它，以便您可以随意使用它。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Youtube-player test</title>
<style>
.youtube-player iframe
display: none;
.youtube-player.active iframe
display: block;
</style>
</head>
<body>
<div class="youtube-player">
<iframe src="https://www.youtube.com/embed/XzXjuDM_Z54" frameborder="0" allowfullscreen></iframe>
<a href="#" class="youtube-link-start">Open window</a>
<a href="#" class="youtube-link-stop">Close window</a>
</div>
<div class="youtube-player">
<iframe src="https://www.youtube.com/embed/l2EYyzXJIdE" frameborder="0" allowfullscreen></iframe>
<a href="#" class="youtube-link-start">Open window</a>
<a href="#" class="youtube-link-stop">Close window</a>
</div>
<script>
jQuery('.youtube-player').each(function()
jQuery(this).on('click', '.youtube-link-start', function()
jQuery(this).parent().addClass('active');
var loc = $(this).siblings('iframe').attr('src');
var startloc = loc + "?autoplay=1";
$(this).siblings('iframe').attr('src', startloc);
);
jQuery(this).on('click', '.youtube-link-stop', function()
jQuery(this).parent().removeClass('active');
var loc = $(this).siblings('iframe').attr('src');
var stoploc = loc.replace("?autoplay=1", "");
$(this).siblings('iframe').attr('src', stoploc);
);
);
</script>
</body>
</html>
我想您可以继续使用 html、css 和 jQuery 更改/开发它，以满足您的需求。 :)
【讨论】：
以上是关于弹出窗口中的 Youtube 视频自动播放的主要内容，如果未能解决你的问题，请参考以下文章