requestPictureInPicture 不适用于 iOS PWA
requestPictureInPicture not working on iOS PWA
我正在尝试使用以下代码在 HTML 视频上触发画中画 (PiP)：
await videoElement.requestPictureInPicture().catch((error) =>
alert(`PiP failed, ${error}`);
);
这在 Safari 中工作正常，但是当您使用 'Add to home screen' 并在清单中设置 "display": "standalone" 时，此代码 returns 出现错误，指出画中画不受支持。
此外，视频播放器缺少内置画中画控件。
知道为什么会发生这种情况或如何解决吗？我假设 PWA/standalone 版本在幕后使用与设备上常规 Safari 相同的 browser/js 引擎，但看起来可能有所不同？
截至 2021 年 3 月：
不幸的是，我不认为有一种方法可以在 PWA 中触发画中画模式（目前）。
API 在独立模式下丢失。
我做了一些研究并试图找到一些解决方法。
唯一能以某种方式起作用的方法是强制用户在 Safari 中加载包含视频的页面。为了让它工作，你必须在你的清单中使用范围参数。
- 将你的 PWA 放在像
/pwa 这样的子文件夹中并设置 "scope": "/pwa"
- 将您的视频页面放在另一个子文件夹中，例如
/videos
每次用户导航到视频页面时，您的 PWA 的范围就会离开。一旦发生这种情况，您的 PWA 将离开全屏模式，Safari 将呈现其顶部和底部栏。
底部栏内将是一个小的 safari 图标。用户必须单击它。 Safari 将打开，PiP 将可用。
为了使过程更顺畅一些，您可以将自定义画中画按钮呈现为视频控件。如果用户单击它，您可以通过检查 window.navigator.standalone 来检查您的应用程序是否处于独立模式 运行。如果是false，就请求画中画。
否则，您将导航到 PWA 范围之外。使用历史记录 API (history.pushState) 无需重新加载页面即可更改位置。您可以添加一个查询参数，例如 autopip=true。最后，您显示一个叠加层，说明用户应单击右下角的 safari 按钮。
Safari 将打开您推送到历史记录的页面。在 Safari 中，检查是否设置了查询参数 autopip=true 并在视频加载后使用 JS 请求画中画。
大问题： 无法将用户重定向回您的 PWA。
我正在尝试使用以下代码在 HTML 视频上触发画中画 (PiP)：
await videoElement.requestPictureInPicture().catch((error) =>
alert(`PiP failed, ${error}`);
);
这在 Safari 中工作正常，但是当您使用 'Add to home screen' 并在清单中设置 "display": "standalone" 时，此代码 returns 出现错误，指出画中画不受支持。
此外，视频播放器缺少内置画中画控件。
知道为什么会发生这种情况或如何解决吗？我假设 PWA/standalone 版本在幕后使用与设备上常规 Safari 相同的 browser/js 引擎，但看起来可能有所不同？
截至 2021 年 3 月：
不幸的是，我不认为有一种方法可以在 PWA 中触发画中画模式（目前）。 API 在独立模式下丢失。
我做了一些研究并试图找到一些解决方法。
唯一能以某种方式起作用的方法是强制用户在 Safari 中加载包含视频的页面。为了让它工作，你必须在你的清单中使用范围参数。
- 将你的 PWA 放在像
/pwa这样的子文件夹中并设置"scope": "/pwa" - 将您的视频页面放在另一个子文件夹中，例如
/videos
每次用户导航到视频页面时，您的 PWA 的范围就会离开。一旦发生这种情况，您的 PWA 将离开全屏模式，Safari 将呈现其顶部和底部栏。 底部栏内将是一个小的 safari 图标。用户必须单击它。 Safari 将打开，PiP 将可用。
为了使过程更顺畅一些，您可以将自定义画中画按钮呈现为视频控件。如果用户单击它，您可以通过检查 window.navigator.standalone 来检查您的应用程序是否处于独立模式 运行。如果是false，就请求画中画。
否则，您将导航到 PWA 范围之外。使用历史记录 API (history.pushState) 无需重新加载页面即可更改位置。您可以添加一个查询参数，例如 autopip=true。最后，您显示一个叠加层，说明用户应单击右下角的 safari 按钮。
Safari 将打开您推送到历史记录的页面。在 Safari 中，检查是否设置了查询参数 autopip=true 并在视频加载后使用 JS 请求画中画。
大问题： 无法将用户重定向回您的 PWA。