Javascript/jquery-当另一个视频启动时暂停当前播放视频（iframes）

我有一个包含多个视频嵌入（iFrame）的页面。嵌入来源多种多样：youtube视频、facebook帖子（包括视频）、仅嵌入facebook视频、instagram视频、twitter视频

我想通过javascript或jquery在另一个视频启动时暂停一个视频，也就是说，阻止两个视频同时播放

我尝试过暂停不在视口中的视频，但无法使用这种策略，因为我可能会遇到多个视频在同一视口中的情况

我无法访问iframe中的事件

这是我的页面的中间部分

• 基本JSFIDLE：

• 整版结果：

HTML

而最佳sip将转到…如果
iframe
的来源与当前页面不同，则无法访问其
内容文档，更不用说其中的侦听/触发事件了。这是出于安全考虑。访问操作将在这种情况下进行

然而，有一个解决办法。您可以在自己的后端创建一个“转发”路由（例如，
/iframeAddr
），并将此路由用于所有iframe src URL，将真实视频页面URL作为参数传递。在服务器端，当HTTP请求到达
/iframeAddr
时，将提取视频页面URL，并通过服务器端编程检索相应的页面内容。最后，视频页面内容被发送回浏览器。由于
/iframeAddr
与页面上的JavaScript具有相同的来源，因此您可以访问其
内容文档
并收听播放视频事件，或触发暂停操作。
通常，您应该使用YouTube的iframe API和Facebook的JavaScript SDK来控制iframe视频。但当然，还有一个解决办法；）您可以简单地使用：

https://codepen.io/mcakir/pen/JpQpwm

将消息发送到iframeWindow（从父窗口）。这些消息可以包括“播放视频”、“暂停视频”、“停止视频”、“静音视频”等。。（视频提供商支持的任何内容）

不幸的是，只有Youtube、Vimeo和Dailymotion（可能还有其他人）支持这一开箱即用的功能

对于Facebook视频，还有另一个解决方案。当视频位于视口之外或单击另一个iframe时，应重新加载iframe。这还提出了另一个问题：“我应该如何捕获iframe的click事件，这在简单的click eventListener中是不可能的，对吧？”。。。嗯，是的！。可以将click eventListener附加到iframe元素。因为它有不同的作用域，并且您不能从父窗口访问它的作用域。但这方面也有解决办法；）

查看我在这方面的研究：

看看JS代码。您将找到您的答案：））


干杯
能否将代码笔示例的一部分编辑到答案中？非常感谢您的工作。我现在正在检查你的代码，非常令人印象深刻。我现在负责iframe和co，访问iframe内容，控制视频嵌入。。。你的工作/研究非常有洞察力！顺便说一句，出于好奇，我有时很难理解，仅仅使用chrome开发工具，当你暂停视频时，就像你在视频看不见时所做的那样：视频是否停止“流”=下载剩余的视频流数据？或者只是“视觉”=你暂停视频，但在幕后，视频继续下载剩余视频数据的字节数？@Mathieu for Youtube；当你暂停视频时，它也会停止流媒体，因为除非你观看，否则YouTube不会流媒体。我想有一个15秒或30秒的阈值（取决于视频的完整长度）@MustafaCakir我正在研究视频。您是否发现可以使用Facebook视频嵌入功能开始播放视频，以使用contentWindow.postMessage访问其iframe？我没能做到
https://codepen.io/mcakir/pen/JpQpwm