即使关闭弹出层，弹出页面上的视频仍在播放

Posted 2023-02-24

【中文标题】即使关闭弹出层，弹出页面上的视频仍在播放

【英文标题】：Video on popup page still playing even when I close the popup layer

【发布时间】：2013-02-13 23:35:16

【问题描述】：

我的网站上有一个弹出层，上面显示最新消息。现在我想在上面嵌入一个 YouTube 视频，一旦用户打开网站就会播放。我希望它在用户关闭弹出页面后停止播放。我试过 SoundCloud 播放器，当我关闭它时它就停止了。

Here is the live link.

您也可以在此处下载文件源文件 (.zip)： Source Files

所以我想让视频在用户关闭弹出页面时停止播放。

有什么想法吗？ 提前致谢。

【参考方案1】：

朋友的

不要试图关闭 facebox/fancybox 弹出窗口。尝试创建一个包含视频文件/嵌入代码的容器。单击关闭链接后，只需删除该嵌入/视频文件容器的 html。

例如。 <div id="myVideoFilePlay">Video File/Embed Data</div>

脚本文件：

document.getElementById('remodeVideoPlayer').innerHTML ="";

然后关闭花式框

【参考方案2】：

以下是有关嵌入 YouTube 的自动播放功能的一些信息。

http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821

“要使其自动播放，只需将 &autoplay=1 放在视频 ID 之后，如下所示：”

<object  >
<param name="movie" value="http://www.youtube.com/v/XXXXXXX&autoplay=1"></param>
<embed src="http://www.youtube.com/v/XXXXXXX&autoplay=1" type="application/x-shockwave-flash"  >
</embed></object>

关于停止视频，我建议你看看这里并设置一些简单的功能来实现点击“X”时的暂停。见：How to pause a YouTube player when hiding the iframe?

编辑：添加更多信息..

我可以看到您在网站加载时将 jQuery 设置为#dialogjj，然后 HTML 位于 div 内，因此将其设置为 display:none;它不会停止播放。我有一个让它工作的想法 - 可能会有更好的 jQuery 更好，但这工作正常。不幸的是，由于提出问题的方式/不太容易调查，我觉得没有人会进一步回答。这也许就是为什么您对这个问题投反对票的原因，看看其他人如何在这里提出问题以获取未来指南，它通常不仅仅是提供指向您网站的链接以期待人们查看，而是尝试指出您的问题和您有什么尝试过这样其他人可以对此有所了解，但我们都从某个地方开始，所以不要担心:)。

我的想法是，您实际上使用 jQuery 设置了 FOR #dialogjj 的内容（因此嵌入代码是通过 JS 文件而不是 HTML 页面放入的），并且您可以以同样的方式实际附加它以摆脱它嵌入代码。我已经设置了一个简单的 JSfiddle，它可以按照您想要的方式执行此操作。不过，您可以将其合并到您的代码中:)

JS Fiddle链接http://jsfiddle.net/ivandude/vLrvA/2/

如果您喜欢该解决方案，请单击勾选作为答案：D 我的第一个也许.. 哈哈

【讨论】：

感谢您的回复。单击“X”后关闭视频或停止视频，我仍然不确定该怎么做。我检查了提供的链接，但它对于该特定示例非常具体（在我看来）。所以我找不到解决方案。我在 JS 方面也很基础。如果您给我更多提示或与我正在使用的插件相关的答案，那就太好了。谢谢

我已经更新了我的答案，并花了一些时间来帮助你解决一个 JS Fiddle 链接，展示了它是如何工作的。单击“运行”（并确保左侧选择了 jQuery）。

非常感谢您的回复和解决方案。关于我的问题，我在 *** 中真的很新，甚至不确定这里是否是提出这个问题的正确地方，如果它不是以通用方式编写的，请见谅。

没关系！没问题。这不是很多工作，但我认为您可能需要自己解决这个问题，因为我没有足够的时间在工作中完成它。如果你理解它并复习一些功能，它应该是有意义的。您可以让它在您现有的代码和窗口启动中工作，或者您可以决定对其进行一些清理。 (1st) 删除 Youtube IFrame 代码，保留 存在但当然没有任何标签 - 它将由用 jQuery 编写的 .HTML 填充。

(2) 在您的 LaunchWindow 下，您可以将实际的对象标签放置在那里，但不能放置 dialogjj-overlay，因为这只是我为 DialogJJ 复制背景容器的示例代码。您创建后台容器的方式比它需要的要复杂一些。 JS Fiddle 易于分析代码，也是开始理解更多功能的良好基础——单击运行后，您实际上可以在右下角的框中单击查看源代码并在一个文本文件中获取完整的源代码。我可能会建议重新编写代码以适应我提供的 JS Fiddle？

【参考方案3】：

答案很简单。当我使用旧的对象嵌入代码时，它就可以工作了。感谢您提出的解决方案，但它适用于 iframe。但不需要任何额外的代码。