☰

使用 MPV 播放

通过 mpv-handler 播放网页上的视频和歌曲

当前为 2023-01-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name                Play with MPV
  3. // @name:en-US          Play with MPV
  4. // @name:zh-CN          使用 MPV 播放
  5. // @name:zh-TW          使用 MPV 播放
  6. // @description         Play videos and songs on the website via mpv-handler
  7. // @description:en-US   Play videos and songs on the website via mpv-handler
  8. // @description:zh-CN   通过 mpv-handler 播放网页上的视频和歌曲
  9. // @description:zh-TW   通過 mpv-handler 播放網頁上的視頻和歌曲
  10. // @namespace           play-with-mpv-handler
  11. // @version             2023.01.18.1
  12. // @author              Akatsuki Rui
  13. // @license             MIT License
  14. // @require             https://cdn.jsdelivr.net/gh/sizzlemctwizzle/GM_config@a4a49b47ecfb1d8fcd27049cc0e8114d05522a0f/gm_config.js
  15. // @grant               GM_info
  16. // @grant               GM_getValue
  17. // @grant               GM_setValue
  18. // @grant               GM_notification
  19. // @grant               GM_openInTab
  20. // @run-at              document-idle
  21. // @noframes
  22. // @match               *://www.youtube.com/*
  23. // @match               *://m.youtube.com/*
  24. // @match               *://www.twitch.tv/*
  25. // @match               *://clips.twitch.tv/*
  26. // @match               *://www.crunchyroll.com/*
  27. // @match               *://beta.crunchyroll.com/*
  28. // @match               *://www.bilibili.com/video/*
  29. // @match               *://live.bilibili.com/*
  30. // ==/UserScript==
  31.  
  32. "use strict";
  33.  
  34. const MPV_HANDLER_VERSION = "v0.3.2";
  35.  
  36. const MATCHERS = {
  37.   "www.youtube.com": /www.youtube.com\/(watch|playlist|shorts)\?/gi,
  38.   "m.youtube.com": /m.youtube.com\/(watch|playlist|shorts)\?/gi,
  39.   "www.twitch.tv":
  40.     /www.twitch.tv\/(?!(directory|downloads|jobs|p|turbo)\/).+/gi,
  41.   "clips.twitch.tv": /clips.twitch.tv/gi,
  42.   "www.crunchyroll.com": /www.crunchyroll.com\/.*watch\/([0-9]|[A-Z])+/gi,
  43.   "beta.crunchyroll.com": /beta.crunchyroll.com\/.*watch\/([0-9]|[A-Z])+/gi,
  44.   "live.bilibili.com": /live.bilibili.com\/[0-9]+/gi,
  45.   "www.bilibili.com": /www.bilibili.com\/video\/(av|bv)/gi,
  46. };
  47.  
  48. const ICON_MPV =
  49.   "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0\
  50. PSI2NCIgdmVyc2lvbj0iMSI+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4yIiBjeD0iMzIiIGN5\
  51. PSIzMyIgcj0iMjgiLz4KIDxjaXJjbGUgc3R5bGU9ImZpbGw6IzhkMzQ4ZSIgY3g9IjMyIiBjeT0i\
  52. MzIiIHI9IjI4Ii8+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4zIiBjeD0iMzQuNSIgY3k9IjI5\
  53. LjUiIHI9IjIwLjUiLz4KIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6LjIiIGN4PSIzMiIgY3k9IjMz\
  54. IiByPSIxNCIvPgogPGNpcmNsZSBzdHlsZT0iZmlsbDojZmZmZmZmIiBjeD0iMzIiIGN5PSIzMiIg\
  55. cj0iMTQiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiM2OTFmNjkiIHRyYW5zZm9ybT0ibWF0cml4KDEu\
  56. NTE1NTQ0NSwwLDAsMS41LC0zLjY1Mzg3OSwtNC45ODczODQ4KSIgZD0ibTI3LjE1NDUxNyAyNC42\
  57. NTgyNTctMy40NjQxMDEgMi0zLjQ2NDEwMiAxLjk5OTk5OXYtNC0zLjk5OTk5OWwzLjQ2NDEwMiAy\
  58. eiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZjtvcGFjaXR5Oi4xIiBkPSJNIDMyIDQgQSAy\
  59. OCAyOCAwIDAgMCA0IDMyIEEgMjggMjggMCAwIDAgNC4wMjE0ODQ0IDMyLjU4NTkzOCBBIDI4IDI4\
  60. IDAgMCAxIDMyIDUgQSAyOCAyOCAwIDAgMSA1OS45Nzg1MTYgMzIuNDE0MDYyIEEgMjggMjggMCAw\
  61. IDAgNjAgMzIgQSAyOCAyOCAwIDAgMCAzMiA0IHoiLz4KPC9zdmc+Cg==";
  62.  
  63. const ICON_SETTINGS =
  64.   "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0\
  65. PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KIDxkZWZzPgogIDxzdHlsZSBpZD0iY3VycmVudC1j\
  66. b2xvci1zY2hlbWUiIHR5cGU9InRleHQvY3NzIj4KICAgLkNvbG9yU2NoZW1lLVRleHQgeyBjb2xv\
  67. cjojNDQ0NDQ0OyB9IC5Db2xvclNjaGVtZS1IaWdobGlnaHQgeyBjb2xvcjojNDI4NWY0OyB9CiAg\
  68. PC9zdHlsZT4KIDwvZGVmcz4KIDxwYXRoIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvciIgY2xhc3M9\
  69. IkNvbG9yU2NoZW1lLVRleHQiIGQ9Ik0gNi4yNSAxIEwgNi4wOTU3MDMxIDIuODQzNzUgQSA1LjUg\
  70. NS41IDAgMCAwIDQuNDg4MjgxMiAzLjc3MzQzNzUgTCAyLjgxMjUgMi45ODQzNzUgTCAxLjA2MjUg\
  71. Ni4wMTU2MjUgTCAyLjU4Mzk4NDQgNy4wNzIyNjU2IEEgNS41IDUuNSAwIDAgMCAyLjUgOCBBIDUu\
  72. NSA1LjUgMCAwIDAgMi41ODAwNzgxIDguOTMxNjQwNiBMIDEuMDYyNSA5Ljk4NDM3NSBMIDIuODEy\
  73. NSAxMy4wMTU2MjUgTCA0LjQ4NDM3NSAxMi4yMjg1MTYgQSA1LjUgNS41IDAgMCAwIDYuMDk1NzAz\
  74. MSAxMy4xNTIzNDQgTCA2LjI0NjA5MzggMTUuMDAxOTUzIEwgOS43NDYwOTM4IDE1LjAwMTk1MyBM\
  75. IDkuOTAwMzkwNiAxMy4xNTgyMDMgQSA1LjUgNS41IDAgMCAwIDExLjUwNzgxMiAxMi4yMjg1MTYg\
  76. TCAxMy4xODM1OTQgMTMuMDE3NTc4IEwgMTQuOTMzNTk0IDkuOTg2MzI4MSBMIDEzLjQxMjEwOSA4\
  77. LjkyOTY4NzUgQSA1LjUgNS41IDAgMCAwIDEzLjQ5NjA5NCA4LjAwMTk1MzEgQSA1LjUgNS41IDAg\
  78. MCAwIDEzLjQxNjAxNiA3LjA3MDMxMjUgTCAxNC45MzM1OTQgNi4wMTc1NzgxIEwgMTMuMTgzNTk0\
  79. IDIuOTg2MzI4MSBMIDExLjUxMTcxOSAzLjc3MzQzNzUgQSA1LjUgNS41IDAgMCAwIDkuOTAwMzkw\
  80. NiAyLjg0OTYwOTQgTCA5Ljc1IDEgTCA2LjI1IDEgeiBNIDggNiBBIDIgMiAwIDAgMSAxMCA4IEEg\
  81. MiAyIDAgMCAxIDggMTAgQSAyIDIgMCAwIDEgNiA4IEEgMiAyIDAgMCAxIDggNiB6IiB0cmFuc2Zv\
  82. cm09InRyYW5zbGF0ZSg0IDQpIi8+Cjwvc3ZnPgo=";
  83.  
  84. const MPV_CSS = `
  85. .pwm-play {
  86.   width: 48px;
  87.   height: 48px;
  88.   border: 0;
  89.   border-radius: 50%;
  90.   background-size: 48px;
  91.   background-image: url(data:image/svg+xml;base64,${ICON_MPV});
  92.   background-repeat: no-repeat;
  93. }
  94. .pwm-settings {
  95.   opacity: 0;
  96.   visibility: hidden;
  97.   transition: all 0.2s ease-in-out;
  98.   display: block;
  99.   position: absolute;
  100.   top: -32px;
  101.   width: 32px;
  102.   height: 32px;
  103.   margin-left: 8px;
  104.   border: 0;
  105.   border-radius: 50%;
  106.   background-size: 32px;
  107.   background-color: #eeeeee;
  108.   background-image: url(data:image/svg+xml;base64,${ICON_SETTINGS});
  109.   background-repeat: no-repeat;
  110. }
  111. .play-with-mpv {
  112.   z-index: 99999;
  113.   position: fixed;
  114.   left: 8px;
  115.   bottom: 8px;
  116. }
  117. .pwm-play:hover + .pwm-settings,
  118. .pwm-settings:hover {
  119.   opacity: 1;
  120.   visibility: visible;
  121.   transition: all 0.2s ease-in-out;
  122. }
  123. `;
  124.  
  125. const CONFIG_ID = "play-with-mpv";
  126.  
  127. const CONFIG_CSS = `
  128. body {
  129.   display: flex;
  130.   justify-content: center;
  131. }
  132. #${CONFIG_ID}_wrapper {
  133.   display: flex;
  134.   flex-direction: column;
  135.   justify-content: center;
  136. }
  137. #${CONFIG_ID} .config_header {
  138.   padding: 12px;
  139. }
  140. #${CONFIG_ID} .config_var {
  141.   margin: 0 0 12px 0;
  142. }
  143. #${CONFIG_ID} .field_label {
  144.   display: inline-block;
  145.   width: 140px;
  146.   font-size: 14px;
  147. }
  148. #${CONFIG_ID}_field_cookies,
  149. #${CONFIG_ID}_field_quality,
  150. #${CONFIG_ID}_field_v_codec {
  151.   width: 64px;
  152.   font-size: 14px;
  153.   text-align: center;
  154. }
  155. #${CONFIG_ID}_buttons_holder {
  156.   display: flex;
  157.   flex-direction: column;
  158. }
  159. #${CONFIG_ID} .saveclose_buttons {
  160.   margin: 1px;
  161.   padding: 4px 0;
  162. }
  163. #${CONFIG_ID} .reset_holder {
  164.   padding-top: 4px;
  165. }
  166. `;
  167.  
  168. const CONFIG_IFRAME_CSS = `
  169. position: fixed;
  170. z-index: 99999;
  171. width: 360px;
  172. height: 280px;
  173. border: 1px solid;
  174. border-radius: 10px;
  175. `;
  176.  
  177. GM_config.init({
  178.   id: `${CONFIG_ID}`,
  179.   title: `${GM_info.script.name}`,
  180.   fields: {
  181.     cookies: {
  182.       label: "Try Pass Cookies",
  183.       type: "select",
  184.       options: ["yes", "no"],
  185.       default: "no",
  186.     },
  187.     // profile: {
  188.     //   label: "Profile",
  189.     //   type: "text",
  190.     //   default: "",
  191.     // },
  192.     quality: {
  193.       label: "Prefer Video Quality",
  194.       type: "select",
  195.       options: ["best", "2160p", "1440p", "1080p", "720p", "480p", "360p"],
  196.       default: "best",
  197.     },
  198.     v_codec: {
  199.       label: "Prefer Video Codec",
  200.       type: "select",
  201.       options: ["any", "av01", "vp9", "h265", "h264"],
  202.       default: "any",
  203.     },
  204.   },
  205.   events: {
  206.     save: () => {
  207.       updateButton(location.href);
  208.       GM_config.close();
  209.     },
  210.     reset: () => {
  211.       updateButton(location.href);
  212.       GM_config.save();
  213.       GM_config.close();
  214.     },
  215.   },
  216.   css: CONFIG_CSS.trim(),
  217. });
  218.  
  219. function notifyUpdate() {
  220.   let version = GM_getValue("mpvHandlerVersion", null);
  221.  
  222.   if (version !== MPV_HANDLER_VERSION) {
  223.     const UPDATE_NOTIFY = {
  224.       title: `${GM_info.script.name}`,
  225.       text: `mpv-handler is upgraded to ${MPV_HANDLER_VERSION}\n\nClick to check updates`,
  226.       onclick: () => {
  227.         GM_openInTab("https://github.com/akiirui/mpv-handler/releases/latest");
  228.       },
  229.     };
  230.  
  231.     GM_notification(UPDATE_NOTIFY);
  232.     GM_setValue("mpvHandlerVersion", MPV_HANDLER_VERSION);
  233.   }
  234. }
  235.  
  236. function matchUrl(currentUrl) {
  237.   if (MATCHERS[location.hostname]) {
  238.     return currentUrl.search(MATCHERS[location.hostname]) !== -1;
  239.   } else {
  240.     return false;
  241.   }
  242. }
  243.  
  244. function appendButton() {
  245.   let head = document.getElementsByTagName("head")[0];
  246.   let style = document.createElement("style");
  247.  
  248.   if (head) {
  249.     style.innerHTML = MPV_CSS.trim();
  250.     head.appendChild(style);
  251.   }
  252.  
  253.   let body = document.body;
  254.   let buttonDiv = document.createElement("div");
  255.   let buttonPlay = document.createElement("a");
  256.   let buttonSettings = document.createElement("button");
  257.  
  258.   if (body) {
  259.     buttonPlay.className = "pwm-play";
  260.     buttonPlay.style = "display: none";
  261.     buttonPlay.target = "_blank";
  262.     buttonPlay.addEventListener("click", (e) => {
  263.       let videoElement = document.getElementsByTagName("video")[0];
  264.       if (videoElement) videoElement.pause();
  265.       if (e.stopPropagation) e.stopPropagation();
  266.     });
  267.  
  268.     buttonSettings.className = "pwm-settings";
  269.     buttonSettings.addEventListener("click", () => {
  270.       if (!GM_config.isOpen) {
  271.         GM_config.open();
  272.         GM_config.frame.style = CONFIG_IFRAME_CSS.trim();
  273.       }
  274.     });
  275.  
  276.     buttonDiv.className = "play-with-mpv";
  277.     buttonDiv.appendChild(buttonPlay);
  278.     buttonDiv.appendChild(buttonSettings);
  279.  
  280.     body.appendChild(buttonDiv);
  281.  
  282.     document.addEventListener("fullscreenchange", () => {
  283.       let button = document.getElementsByClassName("pwm-play")[0];
  284.  
  285.       button.style = document.fullscreenElement
  286.         ? "display: none"
  287.         : "display: block";
  288.     });
  289.   }
  290. }
  291.  
  292. function updateButton(currentUrl) {
  293.   let isMatch = matchUrl(currentUrl);
  294.   let button = document.getElementsByClassName("pwm-play")[0];
  295.  
  296.   if (button) {
  297.     let cookies = GM_config.get("cookies").toLowerCase();
  298.     // let profile = GM_config.get("profile");
  299.     let quality = GM_config.get("quality").toLowerCase();
  300.     let v_codec = GM_config.get("v_codec").toLowerCase();
  301.     let options = [];
  302.  
  303.     let proto =
  304.       "mpv://play/" + btoa(currentUrl).replace(/\//g, "_").replace(/\+/g, "-");
  305.  
  306.     if (cookies === "yes") {
  307.       options.push("cookies=" + document.location.hostname + ".txt");
  308.     }
  309.     // if (profile.trim() !== "") {
  310.     //   options.push("profile=" + profile);
  311.     // }
  312.     if (quality !== "best") {
  313.       options.push("quality=" + quality);
  314.     }
  315.     if (v_codec !== "any") {
  316.       options.push("v_codec=" + v_codec);
  317.     }
  318.  
  319.     if (options.length !== 0) {
  320.       proto += "/?";
  321.  
  322.       options.forEach((option, index) => {
  323.         proto += option;
  324.  
  325.         if (index + 1 !== options.length) {
  326.           proto += "&";
  327.         }
  328.       });
  329.     }
  330.  
  331.     button.style = isMatch ? "display: block" : "display: none";
  332.     button.href = isMatch ? proto : "";
  333.   }
  334. }
  335.  
  336. function detectPJAX() {
  337.   let previousUrl = null;
  338.   let currentUrl = null;
  339.  
  340.   setInterval(() => {
  341.     currentUrl = location.href;
  342.  
  343.     if (previousUrl !== currentUrl) {
  344.       updateButton(currentUrl);
  345.       previousUrl = currentUrl;
  346.     }
  347.   }, 500);
  348. }
  349.  
  350. notifyUpdate();
  351. appendButton();
  352. detectPJAX();