有什么方法可以使用javascript或css在firefox中删除图片中的图片？答案

【问题标题】：Any way to remove picture in picture in firefox using javascript or css?有什么方法可以使用javascript或css在firefox中删除图片中的图片？
【发布时间】：2020-05-07 09:00:23
【问题描述】：

由于某些认证要求，我想为我的网站禁用 <Video> 标签的画中画功能，但 Firefox 不允许关闭。任何帮助将不胜感激。

Firefox 使用shadow-root 和{mode:"closed"} 来强制显示画中画工具(See the image)。
Firefox 也不支持画中画 API - check this link

注意：我还添加了 disablePictureInPicture 属性，但它仍然不适用于 firefox。

 &lt;video width="400" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls  disablePictureInPicture&gt;&lt;/video&gt;

【问题讨论】：

标签： javascript firefox html5-video shadow-dom firefox-developer-tools

【解决方案1】：

据我所知，目前（从 Firefox 72 开始）网站作者没有选项可以禁用该按钮。只有用户可以hide it via the Firefox settings。

虽然request to add an API 是在几个小时前创建的。

【讨论】：

【解决方案2】：

没有音频的视频在 Firefox 中没有画中画按钮。这不适用于所有用例，但在某些情况下可能有用。如果你真的依赖它并且有音频，你可以尝试使用单独的音频标签，但这可能会导致不同步问题。

您可以这样做，例如使用 this 问题中描述的 ffmpeg。

【讨论】：

使用视频作为背景的绝佳解决方案
我有一个没有音频的背景 MP4，并且 PIP ui 仍然显示 (FF 96.0b9)。这种行为是否发生了变化，或者视频格式是否有问题？
这仍然适用于我的网站。确保视频中没有音频流。没有音量/没有声音的音频流将不起作用。您可以使用链接问题中的ffmpeg -i inputfile -c copy -an outputfile 命令来实现此目的。请注意，在没有任何 html 的情况下直接在 firefox 中打开视频 url 时，该按钮也是隐藏的。所以这不依赖于 HTML 标签。

【解决方案3】：

document.head.innerHTML += ` <style>
.pip-expanded, .pip-small, .pip-icon, .pip-explainer {
    position: absolute;
    left: 0;
    top: 0;
    display :block;
}</style>`

【讨论】：

我意识到这有点老了，但这对我不起作用。关于你在这里尝试什么的任何解释？也许我需要以一种我没有立即看到的方式对其进行修改。
尝试添加

【解决方案4】：

我找到了一个解决此错误 1610522 的解决方案 - 开发人员能够隐藏/禁用画中画按钮。

如果您将视频放入 Iframe <iframe> 画中画功能。没有显示。

<div class="video-foreground">
          <iframe frameborder="0" width="350" height="250" allowfullscreen srcdoc="<html><head><style>body{margin: 0;padding: 0;}.bg-video-wrap {position: relative;overflow: hidden;width: 100%;height: 100vh;display: flex;}video {object-fit: cover;min-width: 100%;min-height: 100vh;z-index: 1;}</style></head><body><div class='bg-video-wrap'><video loop muted autoplay><source src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' type='video/mp4'></video></div></body></html>" >
             
          </iframe>
        </div>

here is the example

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。