bilibili播放视频倍速自定义，可记忆

bilibili播放视频倍速自定义，刷新浏览器也不会丢失之前设置的速度
目前为 2019-08-06 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         bilibili播放视频倍速自定义，可记忆
// @namespace    EsfB2XVPmbThEv39bdxQR2hzid30iMF9
// @version      0.3
// @description  bilibili播放视频倍速自定义，刷新浏览器也不会丢失之前设置的速度
// @author       tomoya
// @include      http*://*bilibili.com/video/*
// @grant        none
// ==/UserScript==
 
(function () {
  'use strict';
 
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = "#video_speed_div button { outline: 0; padding: 3px 5px; margin-left: 10px; background-color: #e2e0e0; border: 0; color: #222; cursor: pointer;} .video_speed_div-button-active { border: 0!important; background-color: #00b5e5!important; color: #fff!important; }";
  document.getElementsByTagName('head').item(0).appendChild(style);
 
  let videoSpeedElement = document.createElement("div");
  videoSpeedElement.setAttribute("id", "video_speed_div");
 
  let btn1 = document.createElement("button");
  btn1.innerHTML = "x1";
  btn1.setAttribute("id", "third_video_plugin_btn_1");
  btn1.addEventListener("click", changeVideoSpeed);
 
  let btn2 = document.createElement("button");
  btn2.innerHTML = "x2";
  btn2.setAttribute("id", "third_video_plugin_btn_2");
  btn2.addEventListener("click", changeVideoSpeed);
 
  let btn2_5 = document.createElement("button");
  btn2_5.innerHTML = "x2.5";
  btn2_5.setAttribute("id", "third_video_plugin_btn_2.5");
  btn2_5.addEventListener("click", changeVideoSpeed);
 
  let btn3 = document.createElement("button");
  btn3.innerHTML = "x3";
  btn3.setAttribute("id", "third_video_plugin_btn_3");
  btn3.addEventListener("click", changeVideoSpeed);
 
  let btn3_5 = document.createElement("button");
  btn3_5.innerHTML = "x3.5";
  btn3_5.setAttribute("id", "third_video_plugin_btn_3.5");
  btn3_5.addEventListener("click", changeVideoSpeed);
 
  let btn4 = document.createElement("button");
  btn4.innerHTML = "x4";
  btn4.setAttribute("id", "third_video_plugin_btn_4");
  btn4.addEventListener("click", changeVideoSpeed);
 
  let btn4_5 = document.createElement("button");
  btn4_5.innerHTML = "x4.5";
  btn4_5.setAttribute("id", "third_video_plugin_btn_4.5");
  btn4_5.addEventListener("click", changeVideoSpeed);
 
  let btn5 = document.createElement("button");
  btn5.innerHTML = "x5";
  btn5.setAttribute("id", "third_video_plugin_btn_5");
  btn5.addEventListener("click", changeVideoSpeed);
 
  videoSpeedElement.appendChild(btn1);
  videoSpeedElement.appendChild(btn2);
  videoSpeedElement.appendChild(btn2_5);
  videoSpeedElement.appendChild(btn3);
  videoSpeedElement.appendChild(btn3_5);
  videoSpeedElement.appendChild(btn4);
  videoSpeedElement.appendChild(btn4_5);
  videoSpeedElement.appendChild(btn5);
 
  let videoElement = document.querySelector("#playerWrap");
  let videoWidth = videoElement.clientWidth;
  let videoHeight = videoElement.clientHeight;
  let videoOffsetTop = videoElement.offsetTop;
  let videoOffsetLeft = videoElement.offsetLeft;
 
  videoSpeedElement.style.textAlign = "right";
  videoSpeedElement.style.width = "300px";
  videoSpeedElement.style.height = "30px";
  videoSpeedElement.style.position = "fixed";
  videoSpeedElement.style.top = (videoOffsetTop - 30) + "px";
  videoSpeedElement.style.left = (videoOffsetLeft + videoWidth - 300) + "px";
 
  let btns = videoSpeedElement.querySelector("button");
  for (let i = 0; i < btns.length; i++) {
    btns[i].style.paddingTop = "3px";
    btns[i].style.paddingBottom = "3px";
    btns[i].style.paddingLeft = "5px";
    btns[i].style.paddingRight = "5px";
    btns[i].style.marginLeft = "10px";
  }
 
  document.body.appendChild(videoSpeedElement);
 
  // 加载之间已经设置的速度
  let third_video_plugin_speed = localStorage.getItem("third_video_plugin_speed");
  if (third_video_plugin_speed) {
    for (let i = 0; i < videoSpeedElement.childNodes.length; i++) {
      let btn = videoSpeedElement.childNodes[i];
      if (btn.getAttribute("id") === "third_video_plugin_btn_" + third_video_plugin_speed) {
        btn.click();
      }
    }
    document.getElementById("third_video_plugin_btn_" + third_video_plugin_speed).click();
  }
 
  function changeVideoSpeed(e) {
    let speed = parseFloat(e.target.innerHTML.replace("x", ""));
    let bilibili_player_settings = JSON.parse(sessionStorage.getItem("bilibili_player_settings"));
    let video_status = bilibili_player_settings.video_status;
    video_status.videospeed = speed;
    bilibili_player_settings.video_status = video_status;
    sessionStorage.setItem("bilibili_player_settings", JSON.stringify(bilibili_player_settings));
    localStorage.setItem("third_video_plugin_speed", speed);
    document.querySelector("video:first-child").playbackRate = speed;
    for (let i = 0; i < videoSpeedElement.childNodes.length; i++) {
      let btn = videoSpeedElement.childNodes[i];
      btn.setAttribute("class", "");
    }
    e.target.setAttribute("class", "video_speed_div-button-active");
  }
 
})();
欢迎访问Greasy Fork镜像
