Instantly share code, notes, and snippets.
bilibili播放器右键菜单添加变速按钮
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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); | |
| } | |
| } | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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