☰

Auto Picture-in-Picture

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

Ekde 2024/11/11. Vidu La ĝisdata versio.

Aŭtoro
lIeW HoNg
Ratings
0 0 0
Versio
1.1
Kreita
2024/11/10
Ĝisdatigita
2024/11/11
Size
8,76 kb
Licenco
MIT
Aplikiĝas al

Support/支持作者☕

爱发电

🌟 YouTube 和 Bilibili 自动画中画 (PiP) 用户脚本

目前只适配 Chrome 和 Brave! Edge 不支持

我借助 AI 编写了 YouTube 和 Bilibili 视频播放时的自动画中画 (PiP) 模式。它能够自动处理标签切换和视频播放状态变化，提供无缝的视频观看体验。我花了一些时间，最终在 Arc 浏览器上达到了理想效果。由于是 AI 辅助开发，维护可能会不定期进行。

🎉 请享受目前最丝滑的 PiP 体验！

🌟 主要功能：

1. 自动启用画中画 (PiP) 模式

  • 🔄 当视频播放时，PiP 模式会自动触发。你可以在浮动窗口中观看视频，同时浏览其他页面或执行任务。
  • ⚡ 如果切换标签并且视频仍在播放，PiP 将在等待用户交互后自动触发。

2. 防止暂停时触发 PiP

  • ❌ 当点击暂停按钮时，PiP 模式不会被自动触发，避免误进入 PiP 模式。

3. 标签切换处理

  • 🔄 当切换回包含视频的标签时，PiP 会保持待命状态，并且只有在用户点击视频时才会触发。

4. 视频点击事件

  • 🎬 当用户点击视频时，且视频正在播放，脚本会自动触发 PiP 模式。

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

  • 📱 使用 navigator.mediaSession API 设置“进入 PiP”操作，允许用户通过媒体会话来控制 PiP 模式。

6. 绕过用户交互要求

  • ✅ 与其他可能因浏览器安全限制而受限的脚本不同，本脚本不需要用户交互（如点击页面）来激活 PiP 模式

⚡⚡⚡ 为了在 Chrome 中正确启用脚本，请按照以下步骤操作：

1. 打开 Chrome 设置

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

2. 访问网站设置

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

3. 调整自动进入画中画模式的权限

  • 在“权限”部分，找到并点击“其他权限设置”。
  • 找到“自动进入画中画模式”，确保选择“网站可以自动进入画中画模式”。这将允许支持此功能的网站在播放视频时自动进入画中画模式。

4. 为扩展启用开发者模式

5. Chrome 实验性功能

开启 chrome://flags 启用以下实验性功能：

  • Auto picture in picture video heuristics
  • Auto picture in picture for video playback

🌟 YouTube 和 Bilibili 自动画中画 (PiP) 用户脚本

Currently Only Compatible with Chrome and Brave! Edge is Not Supported

I created this userscript with the help of AI to automatically trigger Picture-in-Picture (PiP) mode while watching YouTube and Bilibili videos. It handles tab switching and video playback status changes, providing a seamless video-watching experience. It took some time, but I achieved the best results and really enjoyed the previous experience on the Arc browser. Maintenance may be sporadic since it’s AI-assisted.

🎉 Enjoy the smoothest PiP experience available!

🌟 Key Features:

1. Automatic PiP Mode Activation

  • 🔄 PiP mode is automatically triggered when the video plays, allowing you to watch the video in a floating window while performing other tasks or browsing other pages.
  • ⚡ If the tab is switched and the video is still playing, PiP will wait for user interaction to trigger.

2. Prevents PiP Trigger on Pause

  • ❌ When the pause button is clicked, PiP mode will not be automatically triggered, preventing accidental entry into PiP mode.

3. Tab Switching Handling

  • 🔄 When switching back to the tab with the video, PiP will remain in standby mode and will only activate when the user clicks on the video.

4. Video Click Event

  • 🎬 When the user clicks the video, PiP mode will be triggered if the video is playing.

5. Supports Media Session API (Chrome 120 and above)

  • 📱 The navigator.mediaSession API is used to set the "Enter PiP" action, allowing users to control PiP via media sessions.

6. Bypass User Interaction Requirement

  • ✅ Unlike other scripts that might be limited by browser security restrictions, this script doesn't require user interaction (like clicking on the page) to activate PiP mode

⚡⚡⚡ To ensure the script works, please follow the instructions below:

1. Open Chrome Settings

  • Click the "three dots" icon in the upper-right corner of Chrome and select "Settings".

2. Access Site Settings

  • In the left menu, select "Privacy and Security," then click on "Site Settings".

3. Adjust Permissions for Auto PiP Mode

  • Under the "Permissions" section, find and click on "Additional Permissions Settings".
  • Locate "Automatically enter Picture-in-Picture mode" and make sure to select "Sites can automatically enter Picture-in-Picture mode". This will allow websites that support this feature to automatically enter PiP mode when playing videos.

4. Enable developer mode for extension

5. Chrome Flags

Open chrome://flags Enable the following flags:

  • Auto picture in picture video heuristics
  • Auto picture in picture for video playback

Snipaste_2024-11-11_05-07-37

image

GIF 2024-11-11 5-04-15