requestPictureInPicture 不适用于 iOS PWA

Question

我正在尝试使用以下代码在 HTML 视频上触发画中画 (PiP)：

await videoElement.requestPictureInPicture().catch((error) => 
    alert(`PiP failed, ${error}`);
);

这在 Safari 中运行良好，但是当您使用“添加到主屏幕”并在清单中设置"display": "standalone"时，此代码返回错误，指出不支持画中画。 此外，视频播放器缺少内置 PiP 控件。

任何想法为什么会发生这种情况或如何解决它？ 我假设 PWA/独立版本在幕后使用与设备上的常规 Safari 相同的浏览器/js 引擎，但看起来可能有所不同？

Answer 1

截至 2021 年 3 月：

不幸的是，我认为没有办法在 PWA 中触发 PiP 模式（目前）。 API 在独立模式下丢失。

我做了一些研究并试图找到一些解决方法。

唯一可行的方法是强制用户加载包含 Safari 中的视频的页面。 为了使它起作用，您必须在清单中使用 scope 参数。

1. 将您的 PWA 放在/pwa类的子文件夹中并设置"scope": "/pwa"
2. 将您的视频页面放在另一个子文件夹中，例如/videos

每次用户导航到视频页面时，都会留下您的 PWA 的 scope。 一旦发生这种情况，您的 PWA 将离开全屏模式，safari 将呈现其顶部和底部条。 底部栏内将是一个小的 safari 图标。 用户必须单击它。 Safari 将打开，PiP 将可用。

为了使过程更顺畅，您可以将自定义 PiP 按钮渲染为视频控件。 如果用户单击它，您可以通过检查window.navigator.standalone来检查您的应用程序是否在独立模式下运行。 如果它是false ，只需请求 PiP。

否则，您将离开您的 PWA scope。 使用历史 API ( history.pushState ) 更改位置而不重新加载页面。 您可以添加查询参数，例如autopip=true 。 最后，您显示一个覆盖图，说明用户应单击右下角的 safari 按钮。 Safari 将打开您推送到历史记录的页面。 在 Safari 中，检查是否设置了查询参数autopip=true并在视频加载后使用 JS 请求 PiP。

大问题：无法将用户重定向回您的 PWA。