在我的 Web 文档中未启用画中画的可能原因是啥？

Posted 2023-02-19

【中文标题】在我的 Web 文档中未启用画中画的可能原因是啥？

【英文标题】：What is a possible causes that Picture-in-Picture is not enabled inside my web document?在我的 Web 文档中未启用画中画的可能原因是什么？

【发布时间】：2020-04-10 12:11:42

【问题描述】：

我认为我的问题从标题来看很简单，下面是附加信息。

我在 Laravel 有一个小项目，我想使用 ApiRTC 实现实时视频通话。 当 Local Stream 被加载时（我可以在一个元素中看到自己），它应该也有 PIP 功能。但不幸的是，事实并非如此。

错误是“requestPictureInPicture is not a function”，从中我得出的结论是PIP API未启用..但我不明白为什么？

附：它在我的浏览器中启用，我在 about:config 中检查了它。

【问题讨论】：

about:config 这表示你在 Firefox 中，对吧？

是的，我使用的是 Firefox，但它也无法在 Chrome 中使用。

【参考方案1】：

Firefox 仍然不支持PictureInPicture webAPI。 他们正在开始实施 "user initiated Picture-in-Picture" 并允许 right-click -> Picture-in-Picture 在当前 Nightly 中指向视频的元素上，或者在更稳定版本中的标志后面，但那不是一回事。

无论出于何种原因，当视频指向 MediaStream 时，他们确实仍然不允许这样做。在当前稳定（带有标志）中，您可以通过首先从“正常”视频启用画中画来解决此问题，然后才将视频的源切换到 MediaStream，但这只会在当前的 Nightly 中崩溃浏览器，所以这不是一个好的解决方案...

最好等它稳定下来，同时使用支持该API的浏览器。

【讨论】：

但是，我如何通过 Firefox 在许多其他网站上使用 PiP？ YouTube，在 *** 和许多其他网站上......另外，我在使用 Google Chrome 时也遇到了同样的问题。

在这些网站上使用画中画是什么意思？ FF 中根本没有实现画中画 Web API，因此这些网站没有使用它。你的意思是你点击出现的画中画图标？这不是 Web API 的一部分，这仍然是实验性的，并且仍然不支持 MediaStreams。不过that 应该可以在 Chrome 上正常运行。

是的，我的意思是我可以单击 Pip 图标并将视频移动到屏幕上的任何位置。这怎么可能？

因为他们确实开始实现 “用户发起的画中画”，这与 Web API 不同。您是否单击了我答案中的链接？

不是 Youtube 或其他网站在做任何事情，只是 FF 将其添加到他们的 UI，但我们程序员无权访问。

【参考方案2】：

这可能很愚蠢，但我遇到了这个错误，然后意识到我只是在驼峰式中犯了一个错误（在谷歌浏览器中使用时）！我输入了“.requestPictureinPicture”而不是“.requestPictureInPicture”（“In”中的“i”大写）。一旦我做了这个更正，一切当然都完美无缺。