☰

m.YouTube.com quality change buttons

Adds quality change buttons below the video (144p, 240p, 360p, 480p, 720p, 1080p...)

目前为 2023-10-18 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         m.YouTube.com quality change buttons
  3. // @namespace    m-youtube-com-quality-change-buttons
  4. // @version      1.8
  5. // @description  Adds quality change buttons below the video (144p, 240p, 360p, 480p, 720p, 1080p...)
  6. // @author       hlorand.hu
  7. // @match        https://m.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  9. // @grant        none
  10. // @license      https://creativecommons.org/licenses/by-nc-sa/4.0/
  11. // ==/UserScript==
  12.  
  13. // Screenshot: https://ibb.co/pyXQd4C
  14.  
  15. (function() {
  16.     //'use strict';
  17.  
  18.     function addbuttons(){
  19.         document.getElementById("qualitybuttons").innerHTML = "";
  20.  
  21.         var player = document.getElementById('movie_player');
  22.  
  23.         // it is neccesary to start the video, to getAvailableQualityData
  24.         player.click(); // start video
  25.         player.click(); // pause video
  26.  
  27.         const qualities = player.getAvailableQualityData();
  28.  
  29.         qualities.forEach((q)=>{
  30.  
  31.             let button = document.createElement('button');
  32.             button.setAttribute("quality", q.quality);
  33.             button.textContent = q.qualityLabel.replace("p50","p").replace("p60","p"); // remove fps from label
  34.             button.className = "qualitybutton";
  35.  
  36.             button.style.margin = "4px";
  37.             button.style.padding = "4px";
  38.             button.style.position = "relative";
  39.  
  40.             // get current quality
  41.             if( player.getPlaybackQualityLabel() == q.qualityLabel ){
  42.                 button.style.backgroundColor = "darkorange";
  43.             } else{
  44.                 button.style.backgroundColor = "green";
  45.             }
  46.  
  47.             button.onclick = function() {
  48.                 player.setPlaybackQualityRange( this.getAttribute("quality") );
  49.  
  50.                 // highlight the clicked button and desaturate the others
  51.                 document.querySelectorAll(".qualitybutton").forEach((btn)=>{
  52.                     btn.style.backgroundColor = "green";
  53.                 });
  54.                 this.style.backgroundColor = "darkorange";
  55.             };
  56.  
  57.             let target = document.getElementById('qualitybuttons');
  58.             target.insertBefore(button, target.firstChild);
  59.  
  60.         }); // end qualities foreach
  61.  
  62.     } // end addbuttons
  63.  
  64.     // Periodically check if the buttons are visible (sometimes YouTube redraws its interface).
  65.     setInterval(()=>{
  66.         // Creating a div that will contain buttons.
  67.         if( document.getElementById("qualitybuttons") == undefined ){
  68.             let parent = document.querySelector('.related-chips-slot-wrapper'); // placement of buttons
  69.             let wrapper = document.createElement('div');
  70.             wrapper.setAttribute("id","qualitybuttons");
  71.             parent.insertBefore(wrapper, parent.firstChild);
  72.             addbuttons();
  73.         }
  74.     }, 1000);
  75.  
  76. })();