创建您自己的画中画视频功能书签

封面图片由 charlesdeluvio

...

一些网站和视频流服务具有允许您以画中画模式观看视频的功能，但他们将此功能锁定在某种付费专区后面，或者使其成为订阅的福利。

有些网站根本没有此功能！

我觉得这很令人恼火，因为这是所有现代网络浏览器中内置的功能，并且对于那些知道如何做到这一点的人来说是免费使用的，无需特殊的努力，购买，插件或黑客。

具体操作方法如下：

选项 1 - 通过网络浏览器开发工具输入代码

• 打开网络浏览器的开发工具（通常按 F12 键/右键单击并选择“检查元素”）
• 转到“控制台”选项卡
• 粘贴以下代码：

// find the video element (may not work on sites with multiple video elements, but works for most of the main sites)
var vid = document.querySelector("video");

// remove the attribute that might stop us from launching the video in PiP
vid.removeAttribute("disablePictureInPicture");

// finally, request the PiP
vid.requestPictureInPicture();

一切顺利，您现在应该可以弹出视频了。如果没有，您可能需要调整 document.querySelector("video") 以选择页面上的特定视频元素。

选项 2 - 创建书签按钮以启动画中画

此代码与选项 1 中的示例相同，但被精简为一行，以便可以作为 URL 执行。

要使用它，只需：

• 选择以下所有内容并将其拖放到浏览器的书签栏中，或者
• 创建一个名为 PiP 的新书签，并将以下内容粘贴为书签的 URL： javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
• 单击书签启动画中画

“书签”如何运作？

书签通常会将您带到新网页。小书签是一种在当前页面上运行 javascript 的书签，而不是将您带到新页面。要声明它是一个小书签，它指向的“位置”以 javascript:.

开头

—凯西瓦茨

这里的神奇之处在于将 javascript 添加到 URL 的开头。这告诉浏览器在当前页面上执行操作，而不是将您带到新页面。

有关小书签的更多信息以及如何利用它们获得更多创意，请参阅 @caseywatts 关于制作小书签的精彩解释

...

原创文章：https://mothy.dev/posts/free-picture-in-picture

以上是创建您自己的画中画视频功能书签的详细内容。更多信息请关注PHP中文网其他相关文章！