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

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

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

 <video width="400" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls  disablePictureInPicture></video>

【问题讨论】:

    标签: 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 &lt;iframe&gt; 画中画功能。没有显示。

      <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
      猜你喜欢
      • 2014-07-01
      • 2021-07-28
      • 1970-01-01
      • 2016-10-28
      • 2011-10-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-27
      相关资源
      最近更新 更多