video play util

Universal video control, Control of the first video element of the page, advance and retract and multiply speed.
目前為 2022-11-01 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         video play util
// @namespace    https://gist.github.com/zqcccc/32eb827d35b8134f32f9dd3f70d9fb26
// @version      0.0.3
// @description  Universal video control, Control of the first video element of the page, advance and retract and multiply speed.
// @author       You
// @match        https://www.disneyplus.com/*
// @match        https://www.bilibili.com/video/*
// @match        https://jable.tv/videos/*
// @match        https://dsxys.com/p/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @grant        none
// @license      MIT
// ==/UserScript==
 
;(function () {
  'use strict'
 
  function getFirstVideo() {
    return document.querySelectorAll('video')[0]
  }
 
  function attachKeydownEvent() {
    function addEvent() {
      document.documentElement.addEventListener('keydown', keydownHandle)
    }
    function removeEvent() {
      document.documentElement.removeEventListener('keydown', keydownHandle)
    }
 
    const keydownHandle = (e) => {
      const videoElement = getFirstVideo()
      if (!videoElement) removeEvent()
      switch (e.code) {
        case 'Period':
          videoElement.currentTime += 1
          break
        case 'Comma':
          videoElement.currentTime -= 2
          break
        case 'Equal':
          videoElement.playbackRate += 0.1
          break
        case 'Minus':
          videoElement.playbackRate -= 0.1
          break
        default:
          break
      }
    }
 
    let hasAddEvent = false
    function check() {
      const videoElement = getFirstVideo()
      if (videoElement) {
        hasAddEvent = true
        emptyHandles()
        addEvent()
      }
    }
 
    let intervalTimes = 0
    const timer = setInterval(() => {
      if (hasAddEvent || intervalTimes >= 120) {
        clearInterval(timer)
      } else {
        check()
      }
      intervalTimes++
    }, 1000)
    return removeEvent
  }
 
  function observeVideo() {
    const v = getFirstVideo()
    if (v) {
      const ob = new MutationObserver((mutations, observer) => {
        mutations.forEach((mut) => {
          console.log(
            '%c mut: ',
            'font-size:12px;background-color: #553E2E;color:#fff;',
            mut
          )
          if (mut.type === 'attributes' && mut.attributeName === 'src') {
            console.log('src changed')
            setTimeout(attachKeydownEvent, 3000)
          }
        })
      })
      ob.observe(v, { attributes: true, attributeOldValue: true })
      return () => {
        ob.disconnect()
      }
    } else {
      console.log('no video element')
    }
  }
 
  var waitRemoveHandles = []
  function emptyHandles() {
    for (let i = waitRemoveHandles.length - 1; i >= 0; i--) {
      waitRemoveHandles.pop()?.()
    }
  }
 
  function insertPanel() {
    document.querySelector('#panel-control')?.remove()
 
    const panel = document.createElement('div')
 
    panel.style.cssText = `
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
width: 200px;
height: 200px;
background: rgba(0,0,0,0.4);
color: #fff;
`
    panel.style.left = '0'
    panel.style.top = '50vh'
    panel.draggable = 'true'
    panel.setAttribute('id', 'panel-control')
 
    panel.innerHTML = `<style>
    #panel-control {
      opacity: 0.2
    }
    #panel-control:hover {
      opacity: 1
    }
#panel-control button {
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
}
#refresh-panel {
  user-select: none;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
<div class="info"></div>
<button class="get-info">info</button>
<button class="add-speed">speed+0.1</button>
<button class="minus-speed">speed-0.1</button>
<button class="forward">+1s</button>
<button class="backward">-2s</button>
<button id="refresh-panel">↻</button>
`
 
    panel.querySelector('.get-info')?.addEventListener('click', () => {
      const video = getFirstVideo()
      if (video) {
        const infoDiv = panel.querySelector('.info')
        infoDiv.innerHTML = `rate:${Math.floor(video.playbackRate * 100) / 100}`
      }
    })
    panel.querySelector('.add-speed')?.addEventListener('click', () => {
      const video = getFirstVideo()
      video && (video.playbackRate += 0.1)
    })
    panel.querySelector('.minus-speed')?.addEventListener('click', () => {
      const video = getFirstVideo()
      video && (video.playbackRate -= 0.1)
    })
    panel.querySelector('.forward')?.addEventListener('click', () => {
      const video = getFirstVideo()
      video && (video.currentTime += 1)
    })
    panel.querySelector('.backward')?.addEventListener('click', () => {
      const video = getFirstVideo()
      video && (video.currentTime -= 2)
    })
    panel.querySelector('#refresh-panel')?.addEventListener('click', () => {
      init()
    })
 
    let canDrag = false,
      lastX,
      lastY,
      panelLeft,
      panelTop
 
    panel.addEventListener('dragstart', (e) => {
      canDrag = true
      lastX = e.pageX
      lastY = e.pageY
      const rect = panel.getBoundingClientRect()
      panelLeft = rect.left
      panelTop = rect.top
    })
    panel.addEventListener('drag', (e) => {
      if (canDrag) {
        const disX = e.pageX - lastX
        panel.style.left = panelLeft + disX + 'px'
        const disY = e.pageY - lastY
        panel.style.top = panelTop + disY + 'px'
      }
    })
    panel.addEventListener('dragend', () => (canDrag = false))
    panel.addEventListener('dragover', function (e) {
      e.preventDefault()
    })
 
    document.documentElement.appendChild(panel)
  }
 
  function init() {
    const cancel = observeVideo()
    waitRemoveHandles.push(() => cancel?.())
    insertPanel()
    emptyHandles()
    waitRemoveHandles.push(attachKeydownEvent())
  }
 
  init()
})()