我正在尝试使用以下代码在 HTML 视频上触发画中画 (PiP)：
await videoElement.requestPictureInPicture().catch((error) =>
alert(`PiP failed, ${error}`);
);
这在 Safari 中运行良好，但是当您在清单中设置 "display": "standalone" 的情况下使用“添加到主屏幕”时，此代码返回一个错误，指出不支持画中画。
此外，视频播放器中缺少内置的画中画控件。
任何想法为什么会发生这种情况或如何解决它？我假设 PWA/独立版本在幕后使用与设备上的常规 Safari 相同的浏览器/js 引擎，但看起来可能会有所不同？
【问题讨论】：
标签： javascript ios safari html5-video progressive-web-apps
截至 2021 年 3 月：
不幸的是，我不认为有办法在 PWA 中触发画中画模式（目前）。 独立模式下缺少 API。
我做了一些研究并试图找到一些解决方法。
唯一可行的方法是强制用户在 Safari 中加载包含视频的页面。为了使其工作，您必须在清单中使用范围参数。
/pwa 这样的子文件夹中并设置 "scope": "/pwa"
/videos
每次用户导航到视频页面时，您的 PWA 范围都将被保留。一旦发生这种情况，您的 PWA 将离开全屏模式，Safari 将呈现其顶部和底部栏。 底部栏内将是一个小的 Safari 图标。用户必须单击它。 Safari 将打开，PiP 将可用。
为了使过程更顺畅，您可以将自定义画中画按钮呈现为视频控件。如果用户单击它，您可以通过检查window.navigator.standalone 检查您的应用程序是否在独立模式下运行。如果是false，只需请求 PiP。
否则，您将导航到 PWA 范围之外。使用历史 API (history.pushState) 在不重新加载页面的情况下更改位置。您可以添加一个查询参数，如autopip=true。最后，您显示一个覆盖图，描述用户应该单击右下角的 safari 按钮。
Safari 将打开您推送到历史记录的页面。在 Safari 中，检查是否设置了查询参数autopip=true，并在视频加载后使用 JS 请求画中画。
大问题：无法将用户重定向回您的 PWA。
【讨论】：