Auto Picture-in-Picture

lIeW HoNg
2024-11-10T21:19:39Z

Automatically enables picture-in-picture mode for YouTube and Bilibili with improved Edge and Brave support

☕支持作者

爱发电 Github

Github:

Auto-Picture-in-Picture

Auto Picture-in-Picture

这是一个高级用户脚本，可自动为 YouTube 和哔哩哔哩视频触发画中画 (PiP) 模式。该脚本在多种浏览器中提供流畅的视频观看体验，通过额外功能和更广泛的兼容性增强了原生画中画功能。

注意：现在许多浏览器在测试/实验模式中提供了原生自动画中画功能。

🎉 享受最顺滑的 PiP 体验吧！

🌟 功能亮点

1. 自动触发画中画 (PiP) 模式

🔄 视频播放时自动进入 PiP 模式，让您在浏览其他页面时也能浮动观看。

⚡ 如果标签切换后视频继续播放，PiP 会等待用户交互后再自动触发。

2. 防止暂停时误触发 PiP

❌ 点击暂停按钮时不会触发 PiP，避免误入 PiP 模式。

3. 标签切换处理

🔄 返回播放视频的标签时，PiP 会保持待机，需用户点击视频后才会激活。

4. 视频点击触发

🎬 当用户点击视频且视频在播放时，脚本会自动进入 PiP 模式。

5. 支持媒体会话 API（Chrome 120 以上）

📱 利用 navigator.mediaSession API 设置“进入 PiP”操作，允许通过媒体会话控制 PiP。

6. 绕过用户交互限制

✅ 不同于一些受限于浏览器安全性的脚本，此脚本不需要用户交互即可激活 PiP 模式。

⚡ 安装与设置

1. 打开 Chrome 设置

点击 Chrome 浏览器右上角的“三个点”图标，选择“设置”。

2. 进入网站设置

在左侧菜单中选择“隐私和安全”，然后点击“网站设置”。

3. 设置自动进入画中画权限

在“权限”中找到“其他权限设置”。

找到“自动进入画中画模式”并设置为“网站可以自动进入画中画模式”。

4. 启用开发者模式

5. Chrome 实验性功能

访问 chrome://flags，启用以下功能：

#auto-picture-in-picture-for-video-playback

#video-picture-in-picture-controls-update-2024

#media-session-enter-picture-in-picture

#document-picture-in-picture-animate-resize

⚠️ Chrome 137.0.7151.15+ 用户重要提示: 如果您使用的是 Chrome Beta 137.0.7151.15 或更高版本，还需启用：

#browser-initiated-automatic-picture-in-picture

启用此 flag 并配置原生自动画中画后，此用户脚本变为可选，因为浏览器现在可以原生处理自动画中画功能。

Firefox 设置

使用原生自动画中画 (实验性)

1. 启用实验性自动画中画功能在地址栏输入: about:settings#experimental

2. 勾选"picture-in-picture auto-open on tab switch"（标签页切换时自动打开画中画）选项

3. 对于手动画中画控制：

设置 → 常规 → 浏览

确保勾选"启用画中画视频控件 (E)"

画中画界面 (Chrome 更新后的控件)