Bilibili直播画中画

为B站直播添加PictureInPicture（画中画）
当前为 2021-03-08 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Bilibili直播画中画
// @namespace    None
// @version      1.0
// @description  为B站直播添加PictureInPicture（画中画）
// @author       Damon
// @match        https://live.bilibili.com/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var controllerBar = document.getElementsByClassName('bilibili-live-player-video-controller')[0];
    if(!controllerBar) {
        return;
    }

    var pipBtn = document.createElement('div');
    pipBtn.className = 'svelte-73epzt';
    pipBtn.innerHTML = '<span class="text">画中画</span>';
    pipBtn.addEventListener('click', function(){
        if(document.pictureInPictureElement == null){
            var videoDom = document.getElementsByClassName('bilibili-live-player-video')[0].getElementsByTagName('video')[0];
            console.log('video DOM found - Bilibili直播画中画');
            videoDom.requestPictureInPicture().then(()=>{console.log('已开启画中画 - Bilibili直播画中画');}, ()=>{console.log('画中画开启失败 - Bilibili直播画中画');});
        } else {
            document.exitPictureInPicture().then(()=>{console.log('画中画已关闭 - Bilibili直播画中画');}, ()=>{console.log('画中画关闭失败 - Bilibili直播画中画');});
        }
    });

    const observer = new MutationObserver(function(){
        var rightArea = controllerBar.getElementsByClassName('right-area')[0];
        if(!rightArea) {
            return;
        }
        rightArea.appendChild(pipBtn);
    });

    const config = { childList: true };
    observer.observe(controllerBar, config);

})();
欢迎访问Greasy Fork镜像
