// ==UserScript== // @name 哔哩哔哩画中画弹幕 // @namespace qwq0 // @version 0.14 // @description 哔哩哔哩画中画支持显示弹幕 // @author QwQ~ // @match https://www.bilibili.com/video/* // @match https://www.bilibili.com/medialist/play/* // @match https://www.bilibili.com/bangumi/play/* // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== // @grant none // @downloadURL none // ==/UserScript== setTimeout(function() { 'use strict'; var videoHolder = null; var video = null; var width = 0; var height = 0; var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var canvasWidth = canvas.width = 0; var canvasHeight = canvas.height = 0; var danmuFontsize = 0; var textCanvas = document.createElement("canvas"); var textCanvasContext = textCanvas.getContext("2d"); var nVideo = document.createElement("video"); var requestAnimationFrameId = 0; var danmuList = []; var danmuLine = []; var danmuCount = 0; var danmuHolder = null; async function addDanmu(text, color) { if(requestAnimationFrameId && (danmuList.length <= 20 || Math.random() < 20 / danmuList.length)) { danmuCount++; var lineNum = 0; for(var i=0;i < 5 && danmuLine[lineNum] + 6 >= danmuCount;i++) { lineNum = Math.floor(Math.random() * 12); } danmuLine[lineNum] = danmuCount; var textWidth = textCanvasContext.measureText(text).width; textCanvasContext.clearRect(0, 0, textWidth, danmuFontsize); textCanvasContext.fillStyle = color; textCanvasContext.fillText(text, 0, 0); danmuList.push({text: text, color: (color ? color : "rgb(255, 255, 255)"), x: canvasWidth, y: lineNum * danmuFontsize, w: textWidth,i: await createImageBitmap(textCanvas, 0, 0, textWidth, danmuFontsize) }); } } var danmuObserver = new MutationObserver(e => { e.forEach(o=>{ // console.log("danmu(all)", o); if(o.type == "childList") { o.addedNodes.forEach(ele =>{ if(ele.innerText) { let text = ele.innerText; addDanmu(text, ele.style.color); console.log("danmu(it)", ele.style.color, text); } else if(ele.textContent) { let text = ele.textContent; addDanmu(text, o.target.style.color); console.log("danmu(ct)", o.target.color, text); } }); } }); }); setInterval(()=>{ if(videoHolder == null) { videoHolder = document.getElementsByClassName("bilibili-player-video")[0] || document.getElementsByClassName("bpx-player-video-wrap")[0]; video = videoHolder.children[0]; video.addEventListener("enterpictureinpicture",() => { if(!requestAnimationFrameId) { requestAnimationFrameId = requestAnimationFrame(draw); setTimeout(()=>{ nVideo.requestPictureInPicture(); nVideo.play(); }, 250); } else { nVideo.requestPictureInPicture(); nVideo.play(); } }); var style = document.createElement("style"); style.innerText = ` .bpx-player-ctrl-btn.bpx-player-ctrl-pip, .bilibili-player-video-btn.bilibili-player-video-btn-pip.closed { filter: drop-shadow(1px 1px 3px #49e3dc); } `; document.body.appendChild(style); } var nowDanmuHolder = document.getElementsByClassName("bilibili-player-video-danmaku")[0] || document.getElementsByClassName("bpx-player-row-dm-wrap")[0]; if(nowDanmuHolder != danmuHolder || width != video.videoWidth || height != video.videoHeight) { danmuHolder = nowDanmuHolder; danmuObserver.disconnect(); width = video.videoWidth; height = video.videoHeight; canvasWidth = canvas.width = (Math.min(height, width) < 700 ? width : Math.floor(width / 2)); canvasHeight = canvas.height = (Math.min(height, width) < 700 ? height : Math.floor(height / 2)); textCanvas.height = danmuFontsize = Math.floor(Math.min(canvasWidth, canvasHeight) / 14.5); textCanvas.width = danmuFontsize * 35; textCanvasContext.textBaseline = "top"; textCanvasContext.shadowBlur = 3; textCanvasContext.shadowColor = "rgb(0, 0, 0)"; textCanvasContext.font = danmuFontsize + 'px SimHei,"Microsoft JhengHei",Arial,Helvetica,sans-serif'; nVideo.srcObject = canvas.captureStream(60); setTimeout(() => nVideo.play(), 1500); danmuObserver.observe(danmuHolder, { childList: true, subtree: true }); console.log("[哔哩哔哩画中画弹幕]", "视频切换") console.log("[哔哩哔哩画中画弹幕]", "视频分辨率", width, height); console.log("[哔哩哔哩画中画弹幕]", "渲染分辨率", canvasWidth, canvasHeight); } }, 900); var lastTime = Date.now(); function draw() { var nowTime = Date.now(); var timeInterval = nowTime - lastTime; lastTime = nowTime; if(video) { context.globalAlpha = 1; context.drawImage(video, 0, 0, width, height, 0, 0, canvasWidth, canvasHeight); if(video.readyState >= 1) { context.globalAlpha = 0.7; danmuList.forEach(o => { context.drawImage(o.i, Math.floor(o.x), Math.floor(o.y)); if(!video.paused) { o.x -= timeInterval * 0.16; } }); danmuList = danmuList.filter(o => (o.x >= -o.w)); } else { danmuList = []; } } requestAnimationFrameId = requestAnimationFrame(draw); } console.log("[哔哩哔哩画中画弹幕]", "已加载") }, 500);