Question

我有一个包含多个视频嵌入（iframe）的页面。嵌入源是多种多样的：youtube视频，facebook帖子包括视频，facebook仅限视频嵌入，Instagram带视频，twitter带视频......

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

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

我无法访问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网址，并将实际视频页面网址作为参数传递。在服务器端，当HTTP请求到达/iframeAddr时，将提取视频页面URL，并通过服务器端编程检索相应的页面内容。最后，视频页面内容被发送回浏览器。由于/iframeAddr与您在页面上的JavaScript具有相同的来源，因此您可以访问其contentDocument并收听播放视频事件或触发暂停操作。

Answer 2

通常，您应该使用YouTube的iframe API和Facebook的JavaScript SDK来控制iframed视频。但当然，有一种解决方法;）你可以简单地使用：

iframe.contentWindow.postMessage(message, origin);

将消息发送到iframeWindow（来自parentWindow）。这些消息可以包括＆＃34; playVideo＆＃34;，＆＃34; pauseVideo＆＃34;，＆＃34; stopVideo＆＃34;，＆＃34; muteVideo＆＃34;等等......（无论视频提供商支持什么）

不幸的是，只有Youtube，Vimeo和Dailymotion（可能还有其他人）支持这个功能。

对于Facebook视频，还有另一项工作。您应该在视频位于viewPort之外或单击另一个iframe时重新加载iframe。这也提出了另一个问题：＆＃34;我应该如何捕获iframe的click事件，这不可能通过简单的单击eventListener，对吧？＆＃34; ......好吧，是的！您可以将单击eventListener附加到iframe元素。因为它具有不同的范围，您无法从父窗口访问其范围。但也有一个解决方法;）

查看我对该领域的研究：

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

并查看JS代码。你会找到你的答案：））

干杯

Javascript / jquery - 当另一个开始播放视频时暂停播放视频（iframe）

2 个答案: