☰

使用 MPV 播放

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

目前为 2022-11-11 提交的版本。查看 最新版本。

  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             2022.11.11
  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               *://clips.twitch.tv/*
  23. // @match               *://www.bilibili.com/video/*
  24. // @match               *://live.bilibili.com/*
  25. // @match               *://www.twitch.tv/*
  26. // @match               *://www.youtube.com/*
  27. // @match               *://m.youtube.com/*
  28. // ==/UserScript==
  29.  
  30. "use strict";
  31.  
  32. const MPV_HANDLER_VERSION = "v0.3.0";
  33.  
  34. const MATCHERS = {
  35.   "clips.twitch.tv": /clips.twitch.tv/gi,
  36.   "www.bilibili.com": /www.bilibili.com\/video\/(av|bv)/gi,
  37.   "live.bilibili.com": /live.bilibili.com\/\d+/gi,
  38.   "www.twitch.tv":
  39.     /www.twitch.tv\/(?!(directory|downloads|jobs|p|turbo)\/).+/gi,
  40.   "www.youtube.com": /www.youtube.com\/(watch|playlist|shorts)\?/gi,
  41.   "m.youtube.com": /m.youtube.com\/(watch|playlist|shorts)\?/gi,
  42. };
  43.  
  44. const ICON_MPV =
  45.   "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0\
  46. PSI2NCIgdmVyc2lvbj0iMSI+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4yIiBjeD0iMzIiIGN5\
  47. PSIzMyIgcj0iMjgiLz4KIDxjaXJjbGUgc3R5bGU9ImZpbGw6IzhkMzQ4ZSIgY3g9IjMyIiBjeT0i\
  48. MzIiIHI9IjI4Ii8+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4zIiBjeD0iMzQuNSIgY3k9IjI5\
  49. LjUiIHI9IjIwLjUiLz4KIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6LjIiIGN4PSIzMiIgY3k9IjMz\
  50. IiByPSIxNCIvPgogPGNpcmNsZSBzdHlsZT0iZmlsbDojZmZmZmZmIiBjeD0iMzIiIGN5PSIzMiIg\
  51. cj0iMTQiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiM2OTFmNjkiIHRyYW5zZm9ybT0ibWF0cml4KDEu\
  52. NTE1NTQ0NSwwLDAsMS41LC0zLjY1Mzg3OSwtNC45ODczODQ4KSIgZD0ibTI3LjE1NDUxNyAyNC42\
  53. NTgyNTctMy40NjQxMDEgMi0zLjQ2NDEwMiAxLjk5OTk5OXYtNC0zLjk5OTk5OWwzLjQ2NDEwMiAy\
  54. eiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZjtvcGFjaXR5Oi4xIiBkPSJNIDMyIDQgQSAy\
  55. OCAyOCAwIDAgMCA0IDMyIEEgMjggMjggMCAwIDAgNC4wMjE0ODQ0IDMyLjU4NTkzOCBBIDI4IDI4\
  56. IDAgMCAxIDMyIDUgQSAyOCAyOCAwIDAgMSA1OS45Nzg1MTYgMzIuNDE0MDYyIEEgMjggMjggMCAw\
  57. IDAgNjAgMzIgQSAyOCAyOCAwIDAgMCAzMiA0IHoiLz4KPC9zdmc+Cg==";
  58.  
  59. const ICON_SETTINGS =
  60.   "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0\
  61. PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KIDxkZWZzPgogIDxzdHlsZSBpZD0iY3VycmVudC1j\
  62. b2xvci1zY2hlbWUiIHR5cGU9InRleHQvY3NzIj4KICAgLkNvbG9yU2NoZW1lLVRleHQgeyBjb2xv\
  63. cjojNDQ0NDQ0OyB9IC5Db2xvclNjaGVtZS1IaWdobGlnaHQgeyBjb2xvcjojNDI4NWY0OyB9CiAg\
  64. PC9zdHlsZT4KIDwvZGVmcz4KIDxwYXRoIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvciIgY2xhc3M9\
  65. IkNvbG9yU2NoZW1lLVRleHQiIGQ9Ik0gNi4yNSAxIEwgNi4wOTU3MDMxIDIuODQzNzUgQSA1LjUg\
  66. NS41IDAgMCAwIDQuNDg4MjgxMiAzLjc3MzQzNzUgTCAyLjgxMjUgMi45ODQzNzUgTCAxLjA2MjUg\
  67. Ni4wMTU2MjUgTCAyLjU4Mzk4NDQgNy4wNzIyNjU2IEEgNS41IDUuNSAwIDAgMCAyLjUgOCBBIDUu\
  68. NSA1LjUgMCAwIDAgMi41ODAwNzgxIDguOTMxNjQwNiBMIDEuMDYyNSA5Ljk4NDM3NSBMIDIuODEy\
  69. NSAxMy4wMTU2MjUgTCA0LjQ4NDM3NSAxMi4yMjg1MTYgQSA1LjUgNS41IDAgMCAwIDYuMDk1NzAz\
  70. MSAxMy4xNTIzNDQgTCA2LjI0NjA5MzggMTUuMDAxOTUzIEwgOS43NDYwOTM4IDE1LjAwMTk1MyBM\
  71. IDkuOTAwMzkwNiAxMy4xNTgyMDMgQSA1LjUgNS41IDAgMCAwIDExLjUwNzgxMiAxMi4yMjg1MTYg\
  72. TCAxMy4xODM1OTQgMTMuMDE3NTc4IEwgMTQuOTMzNTk0IDkuOTg2MzI4MSBMIDEzLjQxMjEwOSA4\
  73. LjkyOTY4NzUgQSA1LjUgNS41IDAgMCAwIDEzLjQ5NjA5NCA4LjAwMTk1MzEgQSA1LjUgNS41IDAg\
  74. MCAwIDEzLjQxNjAxNiA3LjA3MDMxMjUgTCAxNC45MzM1OTQgNi4wMTc1NzgxIEwgMTMuMTgzNTk0\
  75. IDIuOTg2MzI4MSBMIDExLjUxMTcxOSAzLjc3MzQzNzUgQSA1LjUgNS41IDAgMCAwIDkuOTAwMzkw\
  76. NiAyLjg0OTYwOTQgTCA5Ljc1IDEgTCA2LjI1IDEgeiBNIDggNiBBIDIgMiAwIDAgMSAxMCA4IEEg\
  77. MiAyIDAgMCAxIDggMTAgQSAyIDIgMCAwIDEgNiA4IEEgMiAyIDAgMCAxIDggNiB6IiB0cmFuc2Zv\
  78. cm09InRyYW5zbGF0ZSg0IDQpIi8+Cjwvc3ZnPgo=";
  79.  
  80. const MPV_CSS = `
  81. .pwm-play {
  82.   width: 48px;
  83.   height: 48px;
  84.   border: 0;
  85.   border-radius: 50%;
  86.   background-size: 48px;
  87.   background-image: url(data:image/svg+xml;base64,${ICON_MPV});
  88.   background-repeat: no-repeat;
  89. }
  90. .pwm-settings {
  91.   opacity: 0;
  92.   visibility: hidden;
  93.   transition: all 0.2s ease-in-out;
  94.   display: block;
  95.   position: absolute;
  96.   top: -32px;
  97.   width: 32px;
  98.   height: 32px;
  99.   margin-left: 8px;
  100.   border: 0;
  101.   border-radius: 50%;
  102.   background-size: 32px;
  103.   background-color: #eeeeee;
  104.   background-image: url(data:image/svg+xml;base64,${ICON_SETTINGS});
  105.   background-repeat: no-repeat;
  106. }
  107. .pwm-iframe {
  108.   display: none;
  109. }
  110. .play-with-mpv {
  111.   z-index: 99999;
  112.   position: fixed;
  113.   left: 8px;
  114.   bottom: 8px;
  115. }
  116. .pwm-play:hover + .pwm-settings,
  117. .pwm-settings:hover {
  118.   opacity: 1;
  119.   visibility: visible;
  120.   transition: all 0.2s ease-in-out;
  121. }
  122. `;
  123.  
  124. const CONFIG_ID = "play-with-mpv";
  125.  
  126. const CONFIG_CSS = `
  127. body {
  128.   display: flex;
  129. }
  130. #${CONFIG_ID}_wrapper {
  131.   margin: auto;
  132. }
  133. #${CONFIG_ID} .config_header {
  134.   padding-bottom: 8px;
  135. }
  136. #${CONFIG_ID}_field_perferQuality {
  137.   padding-top: 4px;
  138.   padding-bottom: 8px;
  139. }
  140. #${CONFIG_ID} .saveclose_buttons {
  141.   margin: 1px;
  142.   padding: 4px 16px;
  143. }
  144. #${CONFIG_ID} .reset_holder {
  145.   padding-top: 4px;
  146. }
  147. `;
  148.  
  149. const CONFIG_IFRAME_CSS = `
  150. position: fixed;
  151. z-index: 999;
  152. width: 440px;
  153. height: 240px;
  154. border: 1px solid;
  155. border-radius: 2px;
  156. `;
  157.  
  158. GM_config.init({
  159.   id: `${CONFIG_ID}`,
  160.   title: `${GM_info.script.name}`,
  161.   fields: {
  162.     perferQuality: {
  163.       label: "Prefer Quality",
  164.       type: "radio",
  165.       options: ["Best", "2160p", "1440p", "1080p", "720p", "480p", "360p"],
  166.       default: "Best",
  167.     },
  168.     useCookies: {
  169.       label: "Try Pass Cookies",
  170.       type: "radio",
  171.       options: ["Yes", "No"],
  172.       default: "No",
  173.     },
  174.   },
  175.   events: {
  176.     save: () => {
  177.       updateButton(location.href);
  178.       GM_config.close();
  179.     },
  180.     reset: () => {
  181.       updateButton(location.href);
  182.       GM_config.save();
  183.       GM_config.close();
  184.     },
  185.   },
  186.   css: CONFIG_CSS.trim(),
  187. });
  188.  
  189. function notifyUpdate() {
  190.   let version = GM_getValue("mpvHandlerVersion", null);
  191.  
  192.   if (version !== MPV_HANDLER_VERSION) {
  193.     const UPDATE_NOTIFY = {
  194.       title: `${GM_info.script.name}`,
  195.       text: `mpv-handler is upgraded to ${MPV_HANDLER_VERSION}\n\nClick to check updates`,
  196.       onclick: () => {
  197.         GM_openInTab("https://github.com/akiirui/mpv-handler/releases/latest");
  198.       },
  199.     };
  200.  
  201.     GM_notification(UPDATE_NOTIFY);
  202.     GM_setValue("mpvHandlerVersion", MPV_HANDLER_VERSION);
  203.   }
  204. }
  205.  
  206. function matchUrl(currentUrl) {
  207.   if (MATCHERS[location.hostname]) {
  208.     return currentUrl.search(MATCHERS[location.hostname]) !== -1;
  209.   } else {
  210.     return false;
  211.   }
  212. }
  213.  
  214. function appendButton() {
  215.   let head = document.getElementsByTagName("head")[0];
  216.   let style = document.createElement("style");
  217.  
  218.   if (head) {
  219.     style.innerHTML = MPV_CSS.trim();
  220.     head.appendChild(style);
  221.   }
  222.  
  223.   let body = document.body;
  224.   let buttonDiv = document.createElement("div");
  225.   let buttonIframe = document.createElement("iframe");
  226.   let buttonPlay = document.createElement("a");
  227.   let buttonSettings = document.createElement("button");
  228.  
  229.   if (body) {
  230.     buttonIframe.className = "pwm-iframe";
  231.     buttonIframe.name = "pwm-iframe";
  232.  
  233.     buttonPlay.className = "pwm-play";
  234.     buttonPlay.target = "pwm-iframe";
  235.     buttonPlay.style = "display: none";
  236.     buttonPlay.addEventListener("click", (e) => {
  237.       let videoElement = document.getElementsByTagName("video")[0];
  238.       if (videoElement) videoElement.pause();
  239.       if (e.stopPropagation) e.stopPropagation();
  240.     });
  241.  
  242.     buttonSettings.className = "pwm-settings";
  243.     buttonSettings.addEventListener("click", () => {
  244.       if (!GM_config.isOpen) {
  245.         GM_config.open();
  246.         GM_config.frame.style = CONFIG_IFRAME_CSS.trim();
  247.       }
  248.     });
  249.  
  250.     buttonDiv.className = "play-with-mpv";
  251.     buttonDiv.appendChild(buttonIframe);
  252.     buttonDiv.appendChild(buttonPlay);
  253.     buttonDiv.appendChild(buttonSettings);
  254.  
  255.     body.appendChild(buttonDiv);
  256.  
  257.     document.addEventListener("fullscreenchange", () => {
  258.       let button = document.getElementsByClassName("pwm-play")[0];
  259.  
  260.       button.style = document.fullscreenElement
  261.         ? "display: none"
  262.         : "display: block";
  263.     });
  264.   }
  265. }
  266.  
  267. function updateButton(currentUrl) {
  268.   let isMatch = matchUrl(currentUrl);
  269.   let button = document.getElementsByClassName("pwm-play")[0];
  270.  
  271.   if (button) {
  272.     let quality = GM_config.get("perferQuality").toLowerCase();
  273.     let cookies = GM_config.get("useCookies").toLowerCase();
  274.     let options = [];
  275.  
  276.     let proto =
  277.       "mpv://play/" + btoa(currentUrl).replace(/\//g, "_").replace(/\+/g, "-");
  278.  
  279.     if (cookies === "yes") {
  280.       options.push("cookies=" + document.location.hostname + ".txt");
  281.     }
  282.     if (quality !== "best") {
  283.       options.push("quality=" + quality);
  284.     }
  285.  
  286.     if (options.length !== 0) {
  287.       proto += "/?";
  288.  
  289.       options.forEach((option, index) => {
  290.         proto += option;
  291.  
  292.         if (index + 1 !== options.length) {
  293.           proto += "&";
  294.         }
  295.       });
  296.     }
  297.  
  298.     button.style = isMatch ? "display: block" : "display: none";
  299.     button.href = isMatch ? proto : "";
  300.   }
  301. }
  302.  
  303. function detectPJAX() {
  304.   let previousUrl = null;
  305.   let currentUrl = null;
  306.  
  307.   setInterval(() => {
  308.     currentUrl = location.href;
  309.  
  310.     if (previousUrl !== currentUrl) {
  311.       updateButton(currentUrl);
  312.       previousUrl = currentUrl;
  313.     }
  314.   }, 500);
  315. }
  316.  
  317. notifyUpdate();
  318. appendButton();
  319. detectPJAX();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址