Skip to content

Instantly share code, notes, and snippets.

@JiaJiaJiang

JiaJiaJiang/bilibiliContextMenuTool.user.js

Last active July 10, 2023 16:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JiaJiaJiang/c54abe1227917af3d3825dfa098b9473 to your computer and use it in GitHub Desktop.
Save JiaJiaJiang/c54abe1227917af3d3825dfa098b9473 to your computer and use it in GitHub Desktop.
Download ZIP
bilibili播放器右键菜单添加变速按钮
Raw
bilibiliContextMenuTool.user.js
// ==UserScript==
// @name bilibili播放器右键菜单添加变速按钮
// @namespace https://gist.github.com/JiaJiaJiang/c54abe1227917af3d3825dfa098b9473
// @version 0.10.5
// @description 添加新版播放器中被砍掉的右键菜单视频变速按钮,右键添加截图按钮
// @author JiaJiaJiang
// @match https://www.bilibili.com/bangumi/play/*
// @match https://www.bilibili.com/video/*
// @downloadURL https://gist.github.com/JiaJiaJiang/c54abe1227917af3d3825dfa098b9473/raw/bilibiliContextMenuVideoRate.user.js
// @grant none
// ==/UserScript==
let createdBlobURLs=new Set();
window.addEventListener('beforeunload',()=>{
for(let u of createdBlobURLs){
URL.revokeObjectURL(u);
}
});
async function getImgBlob(v){//跨域无法获取
let OC=new OffscreenCanvas(v.videoWidth,v.videoHeight),
ctx=OC.getContext('2d');
ctx.drawImage(v, 0, 0);
let blob=await OC.convertToBlob({
type:"image/jpeg",
quality: 1
});
let url=URL.createObjectURL(blob);
createdBlobURLs.add(url);
window.open(url,"_blank");
}
(function insertSpeedRate() {
let video,warp;
function selectVideo(){
return document.querySelector('bwp-video')||document.querySelector('.bpx-player-video-wrap video')||document.querySelector('video');
}
function selectVideoWrap(){
return document.querySelector('.bilibili-player-video-wrap')||document.querySelector('.bpx-player-video-wrap');
}
function insert(){
let innerMenu=false;
let firstMenuItem=document.querySelector('.bilibili-player-context-menu-container > ul > li:nth-child(1)')
||document.querySelector('.bpx-player-contextmenu > li:nth-child(1)');
if(!firstMenuItem){
requestAnimationFrame(insert);
return;
}
let contentMenuDiv=firstMenuItem.parentNode.parentNode;
console.log(firstMenuItem);
styleChecker();
if(contentMenuDiv.classList.contains('bpx-player-context-area')){
innerMenu=true;
}
if(oldToolMenu=contentMenuDiv.querySelector("#JiaContextTools")){
contentMenuDiv.removeChild(oldToolMenu);
}
let JiaTools=document.createElement('ul');
JiaTools.id='JiaContextTools';
JiaTools.addEventListener('click',e=>{document.body.click();video.focus();});
let speedOptions=document.createElement('li');
speedOptions.id='speedOptions';
speedOptions.classList.remove('hover');
speedOptions.classList.add('menuSpeedRate');
[0.5,0.75,1,1.25,1.5,1.75,2,2.5,3].forEach(i=>{
let d=document.createElement('span');
d.innerHTML=i;
video=selectVideo();
if(i==video.playbackRate){
d.classList.add('active');
}
d.addEventListener('mousedown',e=>{
console.log('rate',video.playbackRate=Number(e.target.innerHTML));
},true);
speedOptions.appendChild(d);
});
JiaTools.appendChild(speedOptions);
//截图按钮
let shortcutDiv=document.createElement('li');
shortcutDiv.classList.add('contentMenu');
shortcutDiv.innerHTML='截图';
shortcutDiv.addEventListener('mousedown',()=>{getImgBlob(video)});
JiaTools.appendChild(shortcutDiv);
let container=innerMenu?contentMenuDiv.querySelector('ul'):contentMenuDiv;
container.insertAdjacentElement('afterbegin',JiaTools);
}
function videoChecker(){
if(!warp?.isConnected || !video?.isConnected){
console.log('waiting video');
video=selectVideo();
warp=selectVideoWrap();
if(video){
warp.addEventListener('contextmenu',()=>{
insert();
});
setTimeout(videoChecker,1500);
}else{
requestAnimationFrame(videoChecker);
}
}else
setTimeout(videoChecker,500);
}
var ruleArr=[];
function cssRule(css){
if(css instanceof Array === false)css=[css];
ruleArr.push(...css);
}
cssRule(`#JiaContextTools li{padding:4px 20px;font-size:12px;color: #fff;border-bottom: 1px solid hsla(0,0%,100%,.12);}`);
cssRule(`#JiaContextTools li.contentMenu{cursor:pointer;line-height:30px;height:30px;padding:4px 20px;line-height:30px;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#eee;text-align:left;}`);
cssRule(`#JiaContextTools li.contentMenu:hover {background: hsla(0,0%,100%,.12);}`);
cssRule(`#JiaContextTools li>span{height:30px;cursor: pointer;box-sizing: border-box;display: inline-block;width: 3em;text-align: center;line-height: 30px;margin: 0.2em;}`);
cssRule(`.menuSpeedRate{display: flex!important;font-size: 1.2em;justify-content: space-around;}`);
cssRule(`.menuSpeedRate span:hover,.menuSpeedRate span.active{background: hsla(0,0%,100%,.12);border-radius: 0.4em;}`);
let style=document.createElement('style');
style.innerHTML=ruleArr.join('');
document.head.appendChild(style);
videoChecker();
function styleChecker(){
if(!document.querySelector('style[from="bilibiliContextSpeedButton"]')){
document.head.appendChild(style);
}
}
})();
Raw
bilibiliContextMenuVideoRate.user.js
// ==UserScript==
// @name bilibili播放器右键菜单添加变速按钮（旧版）
// @namespace https://gist.github.com/JiaJiaJiang/c54abe1227917af3d3825dfa098b9473
// @version 0.10.0
// @description 添加新版播放器中被砍掉的右键菜单视频变速按钮,ctrl+左右键可以跳过op和ed长度的时间,右键添加截图按钮
// @author JiaJiaJiang
// @match https://www.bilibili.com/bangumi/play/*
// @match https://www.bilibili.com/video/*
// @downloadURL https://gist.github.com/JiaJiaJiang/c54abe1227917af3d3825dfa098b9473/raw/bilibiliContextMenuTool.user.js
// @grant none
// ==/UserScript==
let createdBlobURLs=new Set();
window.addEventListener('beforeunload',()=>{
for(let u of createdBlobURLs){
URL.revokeObjectURL(u);
}
});
async function getImgBlob(v){//跨域无法获取
let OC=new OffscreenCanvas(v.videoWidth,v.videoHeight),
ctx=OC.getContext('2d');
ctx.drawImage(v, 0, 0);
let blob=await OC.convertToBlob({
type:"image/jpeg",
quality: 1
});
let url=URL.createObjectURL(blob);
createdBlobURLs.add(url);
window.open(url,"_blank");
}
(function insertSpeedRate() {
let video,warp;
function selectVideo(){
return document.querySelector('bwp-video')||document.querySelector('.bpx-player-video-wrap video')||document.querySelector('video');
}
function selectVideoWrap(){
return document.querySelector('.bilibili-player-video-wrap')||document.querySelector('.bpx-player-video-wrap');
}
function insert(){
styleChecker();
let firstMenuItem=document.querySelector('.bilibili-player-context-menu-container > ul > li:nth-child(1)')
||document.querySelector('.bpx-player-contextmenu li:nth-child(1)');
if(!firstMenuItem){
requestAnimationFrame(insert);
return;
}
if(oldToolMenu=firstMenuItem.parentNode.querySelector("#JiaContextTools")){
firstMenuItem.parentNode.removeChild(oldToolMenu);
}
let JiaTools=document.createElement('div');
JiaTools.id='JiaContextTools';
JiaTools.addEventListener('click',e=>{document.body.click();video.focus();});
let speedOptions=document.createElement('div');
speedOptions.id='speedOptions';
speedOptions.className=firstMenuItem.className;
speedOptions.classList.remove('hover');
speedOptions.classList.add('menuSpeedRate');
[0.5,0.75,1,1.25,1.5,1.75,2].forEach(i=>{
let d=document.createElement('span');
d.innerHTML=i;
video=selectVideo();
if(i==video.playbackRate){
d.classList.add('active');
}
d.addEventListener('mousedown',e=>{
console.log('rate',video.playbackRate=Number(e.target.innerHTML));
},true);
speedOptions.appendChild(d);
});
JiaTools.appendChild(speedOptions);
//截图按钮
let shortcutDiv=document.createElement('div');
shortcutDiv.classList.add('contentMenu');
shortcutDiv.innerHTML='截图';
shortcutDiv.addEventListener('click',()=>{getImgBlob(video)});
JiaTools.appendChild(shortcutDiv);
firstMenuItem.parentNode.insertBefore(JiaTools,firstMenuItem);
}
function videoChecker(){
if(!warp?.isConnected || !video?.isConnected){
console.log('waiting video');
video=selectVideo();
warp=selectVideoWrap();
if(video){
warp.addEventListener('contextmenu',()=>{
insert();
});
setTimeout(videoChecker,1500);
}else{
requestAnimationFrame(videoChecker);
}
}else
setTimeout(videoChecker,500);
}
window.addEventListener('keydown',e=>{
if(!video || !e.ctrlKey || e.repeat)return;
if(e.code==='ArrowRight'){
video.currentTime+=85;
}else if(e.code==='ArrowLeft'){
video.currentTime-=90;
}
});
var ruleArr=[];
function cssRule(css){
if(css instanceof Array === false)css=[css];
ruleArr.push(...css);
}
cssRule(`#JiaContextTools>div{padding:4px 20px;font-size:12px;color: #fff;border-bottom: 1px solid hsla(0,0%,100%,.12);}`);
cssRule(`#JiaContextTools>div.contentMenu{cursor:pointer;line-height:30px;height:30px;padding:4px 20px;line-height:30px;font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#eee;text-align:left;}`);
cssRule(`#JiaContextTools>div.contentMenu:hover {background: hsla(0,0%,100%,.12);}`);
cssRule(`#JiaContextTools>div>span{height:30px;cursor: pointer;box-sizing: border-box;display: inline-block;width: 3em;text-align: center;line-height: 30px;margin: 0.2em;}`);
cssRule(`.menuSpeedRate{display: flex!important;font-size: 1.2em;justify-content: space-around;}`);
cssRule(`.menuSpeedRate span:hover,.menuSpeedRate span.active{background: hsla(0,0%,100%,.12);border-radius: 0.4em;}`);
let style=document.createElement('style');
style.innerHTML=ruleArr.join('');
document.head.appendChild(style);
videoChecker();
function styleChecker(){
if(!document.querySelector('style[from="bilibiliContextSpeedButton"]')){
document.head.appendChild(style);
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment