Javascript/jquery - 在另一个视频开始时暂停当前播放的视频(iframe)

Question

我有一个包含多个视频嵌入 (iframe) 的页面。嵌入来源多种多样:youtube 视频、包含视频的 facebook 帖子、仅限 facebook 的视频嵌入、带有视频的 instagram、带有视频的 twitter...

我想通过 javascript 或 jquery 在一个视频开始时暂停一个视频，也就是说防止 2 个视频同时播放。

我试过但不能使用暂停不在视口(viewport)内的视频的策略，因为我可能会遇到多个视频在同一个视口(viewport)中的情况。

我无法访问 iframe 中的事件。

这是我页面的jsfiddle

• 基本 jsfiddle:https://jsfiddle.net/0zedLvdm/

• 整页结果:https://jsfiddle.net/0zedLvdm/embedded/result/

HTML

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">And best sip goes to… 🎬 🎥 <a href="https://twitter.com/CocaCola/status/836010516493529088/video/1">pic.twitter.com/vDcpmcYFMJ</a></p>&mdash; Coca-Cola (@CocaCola) <a href="https://twitter.com/CocaCola/status/836010516493529088">27 février 2017</a></blockquote>

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: rgb(255, 255, 255); border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px;"></iframe>
<script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FGoProinFrance%2Fvideos%2F1956721507884735%2F&show_text=1&width=560" width="560" height="420" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FGoProinFrance%2Fvideos%2F1955803827976503%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/EDwb9jOVRtU" frameborder="0" allowfullscreen></iframe>

如何实现？

Answer 1

如果 iframe 的来源与当前页面不同，则无法访问其 contentDocument，更不用说其中的监听/触发事件了。这是出于安全考虑。访问操作会案例SecurityError

但是，有一个解决方法。您可以在自己的后端(例如 /iframeAddr)创建一个“转发”路由，并将此路由用于所有 iframe src URL，将真实视频页面 URL 作为参数传递。在服务器端，当HTTP请求到达/iframeAddr时，将提取视频页面URL，并通过服务器端编程检索相应的页面内容。最后，将视频页面内容发送回浏览器。由于 /iframeAddr 与页面上的 JavaScript 同源，您可以访问其 contentDocument 并监听播放视频事件，或触发暂停操作。