blocks|key|2386564|text|用户可以右击两次(调出html5菜单)并选择图片中的图片，但似乎不可能从iframe外部以编程方式触发它，因为iframe的同源策略。我认为iframe+URL中的&origin=参数实际上不会更改从youtube发送的头文件，它在我的测试中似乎不起作用。SecurityError:+Blocked+a+frame+with+origin+from+accessing+a+cross-origin+frame|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2386565|youtube+iframe+api通过使用postMessage实现了gets+around+this，但是目前还没有实现执行video.requestPictureInPicture()的消息。在播放器base.js脚本内部似乎定义了一个togglePictureInPicture函数，但这似乎没有通过消息传递API公开|2386566|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame|1|https://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html^0|2A|8|3K|26|0|0|1S|V|3D|M|10|G|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

Users may be able to right click twice (to bring up the html5 menu) and select Picture in Picture, but it seems to be impossible to trigger it programmatically from outside the iframe due to the same origin policy for iframes. I don't imagine that the <code>&amp;origin=</code> parameter in the iframe URL actually changes the headers sent from youtube, it didn't seem to work in my testing.
<a href="https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame">SecurityError: Blocked a frame with origin from accessing a cross-origin frame</a>
The youtube iframe api <a href="https://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html">gets around this</a> by using postMessage, however there are no messages implemented at the moment to execute <code>video.requestPictureInPicture()</code>. There seems to be a <code>togglePictureInPicture</code> function defined inside the player base.js script but this doesn't seem to be exposed through the message passing API

blocks|key|3535226|text|我总是在控制台的youtube页面上使用下一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3535227|document.getElementsByTagName('video');|code-block|syntax|javascript|3535228|这将显示一个HTML+Collection，打开它，右键单击集合的第一个位置，将其存储为全局变量，这将生成类似temp1的内容。然后你必须写下一行：|offset|length|style|CODE|3535229|temp1.requestPictureInPicture();|3535230|就是这样。|3535231|entityMap^0|0|0|1J|5|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I always use the next line in the console, on the youtube page:
<pre><code>document.getElementsByTagName('video');
</code></pre>
This will show a HTML Collection, open it and right click on the first position of the collection, store it as global variable, this will generate something like <code>temp1</code>. Then you have to write the next line:
<pre><code>temp1.requestPictureInPicture();
</code></pre>
And that's it.

blocks|key|5646888|text|你不能使用Youtube的iframe+以编程的方式启用+PiP。唯一的选择是将URL直接连接到Google的流媒体服务器，或者自己流式传输视频数据。无论哪种方式，您都需要一个stream+URL来设置为视频元素的src，然后对视频调用video.requestPictureInPicture()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|5646889|https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...|code-block|syntax|javascript|5646890|这就是google托管的视频的流URL的样子。一个叫Levi的家伙写了一个library来检索一个给定Youtube视频的网址。但是该库向他的代理服务器yt2html.com发出请求，以便检索这个URL。|5646891|在这篇blog+post中，我将更详细地介绍YT+PiP的问题。|5646892|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5157377/show-youtube-video-source-into-html5-video-tag/64894396#64894396|1|https://github.com/thelevicole/youtube-to-html5-loader/|2|https://dev.to/spankyed/enable-pip-on-youtube-video-embeds-2gel^0|K|8|3A|V|0|0|Q|4|0|11|7|1|0|3|9|2|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|16|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|17|8|@]|E|@$9|18|A|19|1|1A]|$9|1B|A|1C|1|1D]]|F|$]]|$1|N|3|O|5|6|7|1E|8|@]|E|@$9|1F|A|1G|1|1H]]|F|$]]|$1|P|3|-4|5|6|7|1I|8|@]|E|@]|F|$]]]|Q|$R|$5|S|T|U|F|$V|W]]|X|$5|S|T|U|F|$V|Y]]|Z|$5|S|T|U|F|$V|10]]]]

You cannot enable PiP programatically using Youtube's iframe embed. The only option is to get the URL directly to Google's streaming servers or stream the video data yourself. Either way you need a stream URL to set as the src for a video element, then call <code>video.requestPictureInPicture()</code> on the video.
<pre><code>https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&amp;ei=15...
</code></pre>
Thats what a stream URL for a video hosted by google looks like. A guy name <a href="https://stackoverflow.com/questions/5157377/show-youtube-video-source-into-html5-video-tag/64894396#64894396">Levi</a> wrote a <a href="https://github.com/thelevicole/youtube-to-html5-loader/" rel="nofollow noreferrer">library</a> to retrieve this URL for a given Youtube video. But the library makes request to his proxy server yt2html.com in order to retrieve this URL.
I go in more detail on the issues with YT PiP in this <a href="https://dev.to/spankyed/enable-pip-on-youtube-video-embeds-2gel" rel="nofollow noreferrer">blog post</a>.

blocks|key|2386531|text|以下是来自开发人员的测试用例:使用PiP的https://beaufortfrancois.github.io/sandbox/media/iframe-video.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2386532|文档中有很多示例：|2386533|阅读有关该主题的更多信息：https://developers.google.com/youtube/iframe_api_reference|2386534|关于PiP-Api：|2386535|画中画Web+API规范：https://wicg.github.io/picture-in-picture、https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa|2386536|entityMap|0|LINK|mutability|MUTABLE|url|https://beaufortfrancois.github.io/sandbox/media/iframe-video.html|1|https://developers.google.com/youtube/iframe_api_reference|2|https://wicg.github.io/picture-in-picture|3|https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa^0|L|1U|0|0|0|D|1M|1|0|0|D|15|2|1J|2L|3|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]|$A|1D|B|1E|1|1F]]|C|$]]|$1|L|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|O|P|Q|C|$R|W]]|X|$5|O|P|Q|C|$R|Y]]]]

Here is a test case from the developers: <a href="https://beaufortfrancois.github.io/sandbox/media/iframe-video.html" rel="nofollow noreferrer">https://beaufortfrancois.github.io/sandbox/media/iframe-video.html</a> with PiP

There are lots of examples in the documentation: 

Read more about that topic: <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow noreferrer">https://developers.google.com/youtube/iframe_api_reference</a> and about PiP-Api: Picture-in-Picture Web API Spec: <a href="https://wicg.github.io/picture-in-picture" rel="nofollow noreferrer">https://wicg.github.io/picture-in-picture</a> , <a href="https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa" rel="nofollow noreferrer">https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa</a>

I'd like to use JavaScript to enable PiP on Youtube videos. I am able to do so on html <code>&lt;video&gt;</code>s but it seems impossible to do so on Youtube <code>&lt;iframe&gt;</code>s. Has someone any lead on this?

Youtube iframe picture-in-picture mode

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想使用JavaScript在Youtube视频上启用PiP。我可以在html <video>%s上这样做，但在Youtube <iframe>%s上似乎不可能这样做。有人在这方面有什么线索吗？

问Youtube iframe画中画模式
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Youtube iframe画中画模式EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Youtube iframe画中画模式
EN