B站和油管html视频截图

2024/7/21 20:52:22
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name        B站和油管html视频截图
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @match       https://www.bilibili.com/video/*
// @match       https://www.bilibili.com/bangumi/play/*
// @match       https://www.bilibili.com/list/watchlater*
// @grant       none
// @version     1.1
// @author      weixia
// @description 2024/7/21 20:52:22
// ==/UserScript==

(function () {
    function localElement() {
        let domain = window.location.host;
        if (domain === 'www.youtube.com') {
            return {
                host: 'youtube',
                video: document.querySelector('#container .html5-video-container video'),
                control: document.querySelector('#container .ytp-right-controls')
            };
        } else if (domain === 'www.bilibili.com') {
            return {
                host: 'bilibili',
                video: document.querySelector('#bilibili-player .bpx-player-video-wrap video'),
                control: document.querySelector('#bilibili-player .bpx-player-control-bottom-right')
            };
        }
    }

    // 复制当前帧到剪贴板
    function captureImage(video) {
        let canvas = document.createElement('canvas');
        // 设置画布与当前帧宽高一致
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        // 返回base64编码url
        //let baseUrl = canvas.toDataURL('image/png');
        // 转为Blob对象，写入剪贴板
        canvas.toBlob(async (blob) => {
            let data = new ClipboardItem({ "image/png": blob });
            await navigator.clipboard.write([data]);
        }, 'image/png');

        canvas.remove();
    }

    // 截图流程：播放状态先暂停再截图和继续播放
    function capture(video) {
        if (!video.paused) {
            video.pause();
            captureImage(video);
            video.play();
        } else {
            captureImage(video);
        }
    }

    // 创建Trusted Types API策略，解决youtube无法注入问题
    let policy;
    if (window.trustedTypes && window.trustedTypes.createPolicy) {
        policy = window.trustedTypes.createPolicy('user-script', {
            createHTML: (string, sink) => string
        });
    }

    // 创建截图按钮
    let button;
    let content;
    if (localElement().host === 'youtube') {
        button = document.createElement('button');
        content = `<svg t="1721465122238" class="icon" height="100%" width="100%" viewBox="-320 -320 1600 1600" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12138" width="200" height="200"><path d="M815.296 902.336h-179.2c-19.2 0-32-12.8-32-32s12.8-32 32-32h179.2c19.2 0 32-12.8 32-32v-140.8c0-19.2 12.8-32 32-32s32 12.8 32 32v147.2c-6.4 51.2-51.2 89.6-96 89.6z m-454.4 0h-147.2c-51.2 0-89.6-38.4-89.6-89.6v-153.6c0-19.2 12.8-32 32-32s32 12.8 32 32v147.2c0 19.2 12.8 32 32 32h153.6c19.2 0 32 12.8 32 32-12.8 19.2-25.6 32-44.8 32z m-211.2-512c-19.2 0-32-12.8-32-32v-147.2c0-51.2 38.4-89.6 89.6-89.6h153.6c19.2 0 32 12.8 32 32s-12.8 32-32 32h-147.2c-19.2 0-32 12.8-32 32v147.2c0 12.8-12.8 25.6-32 25.6z m723.2 0c-19.2 0-32-12.8-32-32v-147.2c0-19.2-12.8-32-32-32h-172.8c-12.8 0-32-12.8-32-32s12.8-32 25.6-32h185.6c51.2 0 89.6 38.4 89.6 89.6v147.2c0 25.6-12.8 38.4-32 38.4z m-588.8-64h70.4v-32h-70.4v32z" p-id="12139" fill="#ffffff"></path><path d="M764.096 345.536c19.2 0 32 12.8 32 32v281.6c0 19.2-12.8 38.4-32 38.4h-473.6c-19.2 0-32-12.8-32-32v-281.6c0-19.2 12.8-38.4 32-38.4h108.8c12.8-6.4 19.2-19.2 25.6-32 12.8-19.2 25.6-19.2 25.6-19.2h128s38.4 0 51.2 19.2c6.4 12.8 12.8 25.6 25.6 32h108.8z m-236.8 89.6c-25.6 0-51.2 12.8-70.4 38.4-12.8 25.6-12.8 51.2 0 76.8 12.8 25.6 38.4 38.4 70.4 38.4 44.8 0 76.8-32 76.8-76.8 0-19.2-6.4-38.4-25.6-57.6-6.4-6.4-25.6-19.2-51.2-19.2z m179.2 38.4c12.8 0 25.6-6.4 32-19.2 6.4-12.8 6.4-25.6 0-32-6.4-6.4-19.2-12.8-32-12.8-19.2 0-32 12.8-32 32s12.8 32 32 32z" p-id="12140" fill="#ffffff"></path></svg>`;
        button.classList.add('ytp-button');

    } else if (localElement().host === 'bilibili') {
        button = document.createElement('div');
        content = `<div class="bpx-player-ctrl-btn bpx-player-ctrl-playbackrate-result" style="font-size: 14px;margin-right: 20px;">截屏</div>`;
    }

    button.innerHTML = policy.createHTML(content) || content;

    // 点击事件监听
    button.addEventListener('click', function () {
        let video = localElement().video;
        capture(video);

    });

    // 按键P进行截图
    document.querySelector('body').addEventListener('keydown', function(event) {
        if (event.key === 'P') {
            let video = localElement().video;
            capture(video);
        }
    });


    // 若播放器控制条出现，添加截图按钮，并取消元素监听
    observer = new MutationObserver((mutationList, observer) => {
        let = control = localElement().control;
        if (control && control.childElementCount > 0) {
            control.insertBefore(button, control.firstChild);
            observer.disconnect();
        }
    });


    observer.observe(document.querySelector('body'), {
        childList: true, // 观察目标子节点的变化，是否有添加或者删除
        attributes: true, // 观察属性变动
        subtree: true, // 观察后代节点，默认为 false
    });


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