我想使用 JavaScript 在 Youtube 视频上启用 PiP。我可以在 html 上这样做，<video>但在 Youtube 上似乎不可能这样做<iframe>。有人对此有任何领导吗？
问问题
6099 次
4 回答
7
用户可能可以右键单击两次（以调出 html5 菜单）并选择画中画，但由于 iframe 的来源策略相同，似乎无法从 iframe 外部以编程方式触发它。我不认为&origin=iframe URL 中的参数实际上会更改从 youtube 发送的标头，它似乎在我的测试中不起作用。
SecurityError：阻止具有源的框架访问跨域框架
youtube iframe api通过使用 postMessage解决了这个问题，但是目前没有任何消息可以执行video.requestPictureInPicture()。在播放器 base.js 脚本中似乎定义了一个togglePictureInPicture函数，但这似乎没有通过消息传递 API 公开
于 2020-07-06T17:33:08.040 回答
3
我总是在 youtube 页面上使用控制台中的下一行：
document.getElementsByTagName('video');
这将显示一个 HTML 集合，打开它并右键单击集合的第一个位置，将其存储为全局变量，这将生成类似temp1. 然后你必须写下一行：
temp1.requestPictureInPicture();
就是这样。
于 2020-11-20T02:18:26.597 回答
2
您不能使用 Youtube 的 iframe 嵌入以编程方式启用 PiP。唯一的选择是直接将 URL 获取到 Google 的流媒体服务器或自己流式传输视频数据。无论哪种方式，您都需要将流 URL 设置为视频元素的 src，然后调用video.requestPictureInPicture()视频。
https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...
这就是 google 托管的视频的流 URL 的样子。一个名叫Levi的人编写了一个库来检索给定 Youtube 视频的这个 URL。但是该库向他的代理服务器 yt2html.com 发出请求以检索此 URL。
我在这篇博文中更详细地介绍了 YT PiP 的问题。
于 2021-08-06T18:46:48.423 回答
-4
这是开发人员的一个测试用例：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
于 2020-03-27T08:29:57.603 回答