YouTube Cross-Tab Picture-in-Picture/Miniplayer

Press Shift+P to toggle Picture-in-Picture/Miniplayer mode on YouTube videos

当前为 2025-03-21 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         YouTube Cross-Tab Picture-in-Picture/Miniplayer
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  Press Shift+P to toggle Picture-in-Picture/Miniplayer mode on YouTube videos
// @author       aspen138
// @match        https://www.youtube.com/*
// @grant        none
// @icon         https://www.youtube.com/favicon.ico
// @license      MIT
// ==/UserScript==


(function() {
    'use strict';

    // Function to toggle Picture-in-Picture
    function togglePictureInPicture(video) {
        if (document.pictureInPictureElement) {
            document.exitPictureInPicture()
                .then(() => {
                    console.log('Exited Picture-in-Picture mode');
                    // Clear the flag when exiting
                    localStorage.removeItem('pipActive');
                })
                .catch(error => {
                    console.error('Error exiting Picture-in-Picture:', error);
                });
        } else if (video) {
            video.requestPictureInPicture()
                .then(() => {
                    console.log('Entered Picture-in-Picture mode');
                    // Set a flag in localStorage
                    localStorage.setItem('pipActive', 'true');
                })
                .catch(error => {
                    console.error('Error entering Picture-in-Picture:', error);
                });
        }
    }

    // Keydown event listener
    document.addEventListener('keydown', function(e) {
        if (e.shiftKey && e.key === 'P') {
            const video = document.querySelector('video');
            togglePictureInPicture(video);
        }
    });

    // Storage event listener for cross-tab communication
    window.addEventListener('storage', function(e) {
        if (e.key === 'pipActive' && e.newValue === null) {
            // If another tab exited PiP, try to exit in this tab too
            if (document.pictureInPictureElement) {
                document.exitPictureInPicture()
                    .then(() => {
                        console.log('Cross-tab exit Picture-in-Picture mode');
                    })
                    .catch(error => {
                        console.error('Cross-tab exit error:', error);
                    });
            }
        }
    });

    // Check initial state on load
    window.addEventListener('load', function() {
        if (localStorage.getItem('pipActive') === 'true' && !document.pictureInPictureElement) {
            const video = document.querySelector('video');
            if (video) {
                togglePictureInPicture(video);
            }
        }
    });
})();