Youtube iframe 画中画模式答案

【问题标题】：Youtube iframe picture-in-picture modeYoutube iframe 画中画模式
【发布时间】：2020-07-07 16:05:09
【问题描述】：

我想使用 JavaScript 在 Youtube 视频上启用画中画。我可以在 html <video>s 上这样做，但在 Youtube <iframe>s 上似乎不可能这样做。有人对此有任何线索吗？

【问题讨论】：

标签： javascript youtube-api picture-in-picture

【解决方案1】：

这是来自开发者的一个测试用例：https://beaufortfrancois.github.io/sandbox/media/iframe-video.html with PiP

文档中有很多例子：

阅读有关该主题的更多信息：https://developers.google.com/youtube/iframe_api_reference
以及有关 PiP-Api：
画中画 Web API 规范：https://wicg.github.io/picture-in-picture、https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa

【讨论】：

谢谢，但 Youtube 视频不是像您的示例中那样具有原生控件的原生 html 视频。

【解决方案2】：

用户可能能够右键单击两次（以调出 html5 菜单）并选择画中画，但由于 iframe 的来源策略相同，似乎无法从 iframe 外部以编程方式触发它。我不认为 iframe URL 中的 &origin= 参数实际上会更改从 youtube 发送的标头，它在我的测试中似乎不起作用。 SecurityError: Blocked a frame with origin from accessing a cross-origin frame

youtube iframe api gets around this 使用 postMessage，但是目前没有实现消息来执行 video.requestPictureInPicture()。在播放器 base.js 脚本中似乎定义了一个 togglePictureInPicture 函数，但这似乎没有通过消息传递 API 公开

【讨论】：

【解决方案3】：

我总是在 youtube 页面上使用控制台中的下一行：

document.getElementsByTagName('video');

这将显示一个 HTML 集合，打开它并右键单击集合的第一个位置，将其存储为全局变量，这将生成类似 temp1 的内容。然后你必须写下一行：

temp1.requestPictureInPicture();

就是这样。

【讨论】：

如果您能详细说明如何从文本编辑器以编程方式完成，那对我来说意义重大。此功能可以大大减少服务器负载，并改善我的项目的用户体验。

【解决方案4】：

您不能使用 Youtube 的 iframe 嵌入以编程方式启用 PiP。唯一的选择是直接将 URL 获取到 Google 的流媒体服务器或自己流式传输视频数据。无论哪种方式，您都需要将流 URL 设置为视频元素的 src，然后在视频上调用 video.requestPictureInPicture()。

https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...

这就是由 google 托管的视频的流 URL 的样子。一个名叫 Levi 的人写了一个 library 来检索给定 Youtube 视频的这个 URL。但图书馆向他的代理服务器 yt2html.com 发出请求以检索此 URL。

我在blog post 中更详细地讨论了 YT PiP 的问题。

【讨论】：