页面隐藏时暂停 Youtube 视频答案

【问题标题】：Pausing a You Tube video when the page is hidden页面隐藏时暂停 Youtube 视频
【发布时间】：2013-06-07 15:54:36
【问题描述】：

我创建了一个站点，而不是“页面”，我使用下面的代码创建了在不同的菜单点击上显示/隐藏的 div。

唯一的问题是其中一个页面上的 You Tube 视频，当用户播放视频时，他们必须停止播放，否则在访问其他页面时视频会继续播放。

有没有办法在用户离开页面时暂停视频，或者在点击其他内容时直接停止视频。

这是页面导航的代码

$('#homePage').show();

$('.nav').click(function () {
    $('.page:visible').slideUp('slow'); // or .hide()
    $($(this).data('target')).slideDown('slow'); // or.show()
})

非常感谢任何帮助

【问题讨论】：

这应该会有所帮助：stackoverflow.com/a/11284045/2454376
用 JS 制作 Youtube 播放器比 iframe 更好。如果您通过 Javascript 代码制作它们，您可以轻松更好地控制它们。
@misik 在视频页面 div 隐藏时不会停止视频
如果你破坏了 iframe 容器的 innerHTML，视频将停止。

标签： javascript

【解决方案1】：

嗨，这个页面应该有很大帮助。 https://developers.google.com/youtube/iframe_api_reference。您只需将视频“包装”在 youtube Api 中，并使用他们已经绑定的事件和方法。

基本上，您需要做的是当 div 关闭或单击视频中的 x 按钮时，您将需要执行类似的操作。

$("#myDiv").click(function () {
    player.stopVideo();
  });

需要注意的一点是，如果您要隐藏显示包含 iframe 的 div，则每次显示播放器时都需要重新添加播放器，否则您将丢失与之相关的事件。我希望这有帮助。

【讨论】：