// ==UserScript==
// @name         设置B站的视频倍速
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  最近看的是直播回放的视频，所以写个倍速
// @icon         https://www.wandhi.com//favicon.ico
// @match        https://www.bilibili.com/video/*
// @author       xiaoxiami
// @grant        GM_addStyle
// @grant        GM_addStyle
// @grant        unsafeWindow
// @license MIT
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Your code here...
    //创建一个div
	var div = document.createElement("div");

    div.innerHTML="<div class='three'>3倍速</div><div class='five'>5倍速</div><div class='ten'>10倍速<div>"
	//为div创建属性class = "beisuDiv"
	var divattr = document.createAttribute("class");
	divattr.value = "beisuDiv";
	//把属性class = "beisuDiv"添加到div
    div.setAttributeNode(divattr);
    document.body.appendChild(div);

    let controlThreeDiv = document.getElementsByClassName("three")[0];
    let controlfiveDiv = document.getElementsByClassName("five")[0];
    let controlTenDiv = document.getElementsByClassName("ten")[0];
    controlThreeDiv.addEventListener("click", ()=>{
        document.querySelector('bwp-video').playbackRate = 3 
        alert("你已经设置为3倍速")
    })
    controlfiveDiv.addEventListener("click", ()=>{
        document.querySelector('bwp-video').playbackRate = 5
        alert("你已经设置为5倍速")
    })
    controlTenDiv.addEventListener("click", ()=>{
        document.querySelector('bwp-video').playbackRate = 10
        alert("你已经设置为10倍速")
    })

 
 
})();
GM_addStyle(`
  .beisuDiv {
       position: absolute;
       top: 12vh;
       left: 0vw;
       background: white;
       z-index:999;
  }
  .three {
      background-color:skyblue;
      margin-bottom: 5px;
      cursor: pointer
  }
  .five {
      background-color:orange;
      margin-bottom: 5px;
      cursor: pointer
  }
  .ten {
      background-color:red;
      cursor: pointer
  }
`)