哔哩哔哩(B站bilibili)-播放速度及部分操作优化

Greasy Fork is available in English.
哔哩哔哩(B站bilibili)-播放速度及部分操作优化

B站播放器速度自定义(0.25 ~ 3), 支持快捷键(z:正常, x:减少速度, c:增加速度), 支持多标签窗口速度同步, 鼠标中键切换全屏
当前为 2020-10-16 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         哔哩哔哩(B站bilibili)-播放速度及部分操作优化
// @description  B站播放器速度自定义(0.25 ~ 3), 支持快捷键(z:正常, x:减少速度, c:增加速度), 支持多标签窗口速度同步, 鼠标中键切换全屏
// @namespace    bili
// @version      1.4
// @author       vizo
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @include      *://www.bilibili.com/video*
// @include      *://www.bilibili.com/bangumi*
// @run-at       document-end
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @noframes
// ==/UserScript==
'use strict'

GM_addStyle(`
  html {
    overflow-y: scroll;
  }
  html.hideScroll {
    overflow: hidden;
  }
  body::-webkit-scrollbar {
    width: 6px;
  }
  body::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-track {
    background-color: #f8f8f8;
  }
  body::-webkit-scrollbar-thumb {
    background: #c5c5c5;
  }

  #spsy_msg {
    width: 105px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    border-radius: 4px;
    background: rgba(255,255,255,.8);
    color: #222;
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 985;
    pointer-events: none;
    display: none;
  }
  .bilibili-player-video-btn-volume {
    display: none;
  }
`)

let timer1s = null
let FRP = true

$(function() {
  let TIMER = null
  
  const timeout = (ms) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve()
      }, ms)
    })
  }
  
  const appendMsgLay = async () => {
    let v_warp = $('.bilibili-player-video-wrap')
    let s_msg = v_warp.find('#spsy_msg')
    let speedMsg = `<div id="spsy_msg"></div>`
    if (v_warp.length) {
      if(!s_msg.length) {
        v_warp.append(speedMsg)
      }
    } else {
      await timeout(200)
      appendMsgLay()
    }
  }
  
  const setPlayerSpeed = ( speed = getGmSpeed() ) => {
    appendMsgLay()
    
    let video = $('.bilibili-player-video video')
    video[0].playbackRate = speed
    let store = JSON.parse( getSSsetingCfg() )
    store.video_status.videospeed = speed
    sessionStorage.setItem('bilibili_player_settings', JSON.stringify(store))
  }
  
  const toggleVideoFullscreen = async () => {
    let video = $('.bilibili-player-video video')
    if (video.length) {
      $('.bilibili-player-video-btn-fullscreen')[0].click()
    } else {
      await timeout(100)
      toggleVideoFullscreen()
    }
  }
  
  const getGmSpeed = () => {
    return +GM_getValue('bl_player_speed') || 1
  }
  
  const getSSsetingCfg = () => {
    return sessionStorage.getItem('bilibili_player_settings')
  }
  
  const getLSsetingCfg = () => {
    return localStorage.getItem('bilibili_player_settings')
  }
  
  const setGmSpeed = (val) => {
    GM_setValue('bl_player_speed', val)
  }
  
  const isFullScreen = () => {
    return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
  }
  
  const showSpMsg = (msg, type = '速度') => {
    let mp = $('#spsy_msg')
    clearTimeout(TIMER)
    mp.fadeIn(180)
    mp.text(`${type} ${msg}`)
    
    TIMER = setTimeout(() => {
      mp.fadeOut(250)
    }, 800)
  }
  
  // 键盘上下键调节音量动作
  const setKeyboardControlVolume = (e) => {
    let videoDom = $('body').find('.bilibili-player-video video')
    let vol = +(GM_getValue('bl_player_volume') || videoDom[0].volume)
    let isUp = e.which === 38
    let isDown = e.which === 40
    if (isUp || isDown) {
      if (isUp) {
        vol = Math.min(vol + 0.05, 1)
      } else {
        vol = Math.max(vol + 0.05, 0)
      }
      GM_setValue('bl_player_volume', vol)
    }
  }
  

  // 右键菜单设置播放速度
  $('body').on('click', '.bilibili-player-contextmenu-subwrapp span', function() {
    let tis = $(this)
    let rate = tis.attr('data-rate')
    setGmSpeed(rate)
    return false
  })
  
  // 滚轮点击切换全屏
  $('body').on('mousedown', '.bilibili-player-video-wrap', function(e) {
    if (e.button === 1) {
      e.preventDefault()
      toggleVideoFullscreen()
    }
  })
  
  // 点击鼠标滚轮中键全屏
  $('body').on('mousedown', function(e) {
    if (e.button === 1) {
      e.preventDefault()
    }
  })
  
  // ctrl和alt按下后短时间内阻止zxc
  $('body').on('keydown', function(e) {
    if (e.ctrlKey || e.altKey) {
      clearTimeout(timer1s)
      FRP = false
      timer1s = setTimeout(() => {
        FRP = true
      }, 1000)
    }
  })
  
  // 键盘快捷键设置播放速度
  $('body').on('keyup', function(e) {
    if (e.target.nodeName !== 'BODY') return
    
    setKeyboardControlVolume(e)
    
    if (/^[zxc]$/.test(e.key) && FRP) {
      let val = getGmSpeed()
      if (e.key === 'z') {
        val = 1
      }
      if (e.key === 'x') {
        val = Math.max(val - 0.25, 0.25)
      }
      if (e.key === 'c') {
        val = Math.min(val + 0.25, 3)
      } 
      setGmSpeed(val)
      showSpMsg(val)
    }
  })
  
  // 滚轮调节音量
  window.addEventListener('wheel', (e) => {
    const wp = document.getElementById('bilibili-player')
    const isContains = wp.contains(e.target)
    
    if (!isContains) return
    if ( isFullScreen() ) return
    
    const video = wp.querySelector('video')
    $('html').addClass('hideScroll')
    $(wp).on('mouseleave', function() {
      $('html').removeClass('hideScroll')
    })
    
    let store = getLSsetingCfg() ? JSON.parse( getLSsetingCfg() ) : null
    let st_vol = store ? (store.video_status.volume || 0.01) : null
    
    let vol = +(st_vol || GM_getValue('bl_player_volume') || video.volume)
    if (e.deltaY > 0) {
      // 减少音量
      vol = Math.max(vol - (e.altKey ? 0.1 : 0.02), 0)
    } else {
      // 增加音量
      vol = Math.min(vol + (e.altKey ? 0.1 : 0.02), 1)
    }
  
    store.video_status.volume = vol
    localStorage.setItem('bilibili_player_settings', JSON.stringify(store))
    
    GM_setValue('bl_player_volume', vol)
    
    video.volume = vol
    
    let pVol = Math.round(vol * 100) + '%'
    showSpMsg(pVol, '音量')
  })
  
  setInterval(setPlayerSpeed, 500)
})