EnablePIP-bilibili

Enable Picture in Picture mode in Bilibli 在b站中打开画中画模式,使chrome能够使用画中画。

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         EnablePIP-bilibili
// @namespace    EnablePIP
// @version      2.2.0
// @description  Enable Picture in Picture mode in Bilibli 在b站中打开画中画模式,使chrome能够使用画中画。
// @author       LXG_Shadow & XenoAmess
// @match        https://www.bilibili.com/video/*
// @match        https://www.bilibili.com/bangumi/play/*
// @match        https://live.bilibili.com/*
// @run-at       document-end
// @grant        none
// @supportURL   https://github.com/XenoAmess/EnablePIP.git
// ==/UserScript==

var REFRESH_TIME = 500;
var STRING_OPEN_PICTURE_IN_PICTURE = "显示画中画面板";
var STRING_CLOSE_PICTURE_IN_PICTURE = "隐藏画中画面板";
var STRING_ENTER_PICTURE_IN_PICTURE_DIRECT = "直接进入画中画";
var STRING_EXIT_PICTURE_IN_PICTURE_DIRECT = "直接退出画中画";

var BILIBILI_LIVE_REG = RegExp(/^http(s)?:\/\/([a-zA-Z0-9\.]+)?live\.bilibili/);

var IS_BILIBILI_LIVE = (window.location.href.match(BILIBILI_LIVE_REG) != null);
var STRING_POPUP_MENU_SELECTOR = IS_BILIBILI_LIVE ?
    "div.bilibili-live-player > div.bilibili-live-player-context-menu-container > ul" :
    "#bilibiliPlayer > div.bilibili-player-context-menu-container.bilibili-player-context-menu-origin > ul";
var STRING_CONTROL_BAR_SELECTOR = IS_BILIBILI_LIVE ? "div.bilibili-live-player-video-controller" : "div.bilibili-player-video-subtitle";
var STRING_VIDEO_SELECTOR = IS_BILIBILI_LIVE ? "div.bilibili-live-player-video > video" : "div.bilibili-player-video > video";
var STRING_PIC_IN_PIC_SWITCH = "pictureInPictureSwitch";
var STRING_PIC_IN_PIC_DIRECT_SWITCH = "pictureInPictureDirectSwitch";

var b_pipMode = false;
var b_pipMode_direct = false;

function switchPictureInPictureMode() {
    if (b_pipMode) {
        $("video").removeAttr("controls");
        $(STRING_CONTROL_BAR_SELECTOR).css("z-index", "");
        $(STRING_VIDEO_SELECTOR).css("z-index", "");
    } else {
        $("video").attr("controls", "controls");
        $(STRING_CONTROL_BAR_SELECTOR).css("z-index", "-1");
        $(STRING_VIDEO_SELECTOR).css("z-index", "10");
    }
    b_pipMode = !b_pipMode;
    $("#" + STRING_PIC_IN_PIC_SWITCH).text(b_pipMode ? STRING_CLOSE_PICTURE_IN_PICTURE : STRING_OPEN_PICTURE_IN_PICTURE);
}

function switchPictureInPictureModeDirect() {
    if (b_pipMode_direct) {
        document.exitPictureInPicture();
    } else {
        $(STRING_VIDEO_SELECTOR)[0].requestPictureInPicture();
    }
    b_pipMode_direct = !b_pipMode_direct;
    $("#" + STRING_PIC_IN_PIC_DIRECT_SWITCH).text(b_pipMode_direct ? STRING_EXIT_PICTURE_IN_PICTURE_DIRECT : STRING_ENTER_PICTURE_IN_PICTURE_DIRECT);
}

function addToToolBar() {
    if ($(STRING_POPUP_MENU_SELECTOR) != null && document.getElementById(STRING_PIC_IN_PIC_SWITCH) === null) {
        var $il0 = $("<li></li>");
        $il0.addClass("context-line context-menu-function");
        $il0.attr("data-append", "1");
        var $a0 = $("<a></a>");
        $a0.addClass("context-menu-a js-action");
        $a0.attr("title", null);
        $a0.attr("href", "javascript:void(0);");
        $a0.attr("id", STRING_PIC_IN_PIC_SWITCH);
        $a0.attr("data-disabled", "0");
        $a0.text(b_pipMode ? STRING_CLOSE_PICTURE_IN_PICTURE : STRING_OPEN_PICTURE_IN_PICTURE);
        $a0.click(switchPictureInPictureMode);
        $il0.append($a0);
        $(STRING_POPUP_MENU_SELECTOR).append($il0);

        var $il1 = $("<li></li>");
        $il1.addClass("context-line context-menu-function");
        $il1.attr("data-append", "1");
        var $a1 = $("<a></a>");
        $a1.addClass("context-menu-a js-action");
        $a1.attr("title", null);
        $a1.attr("href", "javascript:void(0);");
        $a1.attr("id", STRING_PIC_IN_PIC_DIRECT_SWITCH);
        $a1.attr("data-disabled", "0");
        $a1.text(b_pipMode_direct ? STRING_EXIT_PICTURE_IN_PICTURE_DIRECT : STRING_ENTER_PICTURE_IN_PICTURE_DIRECT);
        $a1.click(switchPictureInPictureModeDirect);
        $il1.append($a1);
        $(STRING_POPUP_MENU_SELECTOR).append($il1);
    }
}

(function () {
    'use strict';
    if (!window.jQuery) {
        var oScript = document.createElement('script');
        oScript.type = "text/javascript";
        oScript.src = "//s1.hdslb.com/bfs/static/jinkela/long/js/jquery/jquery1.7.2.min.js";
        document.head.appendChild(oScript);
    }
    window.onload = window.setInterval(addToToolBar, REFRESH_TIME);
})();