☰

使用 mpv 播放

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

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

  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 website videos and songs with mpv & youtube-dl
  7. // @description:en-US   Play website videos and songs with mpv & youtube-dl
  8. // @description:zh-CN   通过 mpv 和 youtube-dl 播放网页上的视频和歌曲
  9. // @description:zh-TW   通過 mpv 和 youtube-dl 播放網頁上的視頻和歌曲
  10. // @namespace           play-with-mpv-handler
  11. // @version             2021.01.14.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. // @incompatible        firefox+greasemonkey Broken since Greasemonkey 4.0
  21. // @run-at              document-idle
  22. // @noframes
  23. // @match               *://www.youtube.com/*
  24. // @match               *://www.bilibili.com/video/*
  25. // ==/UserScript==
  26.  
  27. "use strict";
  28.  
  29. const MPV_HANDLER_VERSION = "v0.1.2";
  30. const MATCH_URLS = ["www.youtube.com/watch", "www.bilibili.com/video/"];
  31.  
  32. const ICON_MPV =
  33.   "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0\
  34. PSI2NCIgdmVyc2lvbj0iMSI+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4yIiBjeD0iMzIiIGN5\
  35. PSIzMyIgcj0iMjgiLz4KIDxjaXJjbGUgc3R5bGU9ImZpbGw6IzhkMzQ4ZSIgY3g9IjMyIiBjeT0i\
  36. MzIiIHI9IjI4Ii8+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4zIiBjeD0iMzQuNSIgY3k9IjI5\
  37. LjUiIHI9IjIwLjUiLz4KIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6LjIiIGN4PSIzMiIgY3k9IjMz\
  38. IiByPSIxNCIvPgogPGNpcmNsZSBzdHlsZT0iZmlsbDojZmZmZmZmIiBjeD0iMzIiIGN5PSIzMiIg\
  39. cj0iMTQiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiM2OTFmNjkiIHRyYW5zZm9ybT0ibWF0cml4KDEu\
  40. NTE1NTQ0NSwwLDAsMS41LC0zLjY1Mzg3OSwtNC45ODczODQ4KSIgZD0ibTI3LjE1NDUxNyAyNC42\
  41. NTgyNTctMy40NjQxMDEgMi0zLjQ2NDEwMiAxLjk5OTk5OXYtNC0zLjk5OTk5OWwzLjQ2NDEwMiAy\
  42. eiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZjtvcGFjaXR5Oi4xIiBkPSJNIDMyIDQgQSAy\
  43. OCAyOCAwIDAgMCA0IDMyIEEgMjggMjggMCAwIDAgNC4wMjE0ODQ0IDMyLjU4NTkzOCBBIDI4IDI4\
  44. IDAgMCAxIDMyIDUgQSAyOCAyOCAwIDAgMSA1OS45Nzg1MTYgMzIuNDE0MDYyIEEgMjggMjggMCAw\
  45. IDAgNjAgMzIgQSAyOCAyOCAwIDAgMCAzMiA0IHoiLz4KPC9zdmc+Cg==";
  46.  
  47. const ICON_SETTINGS =
  48.   "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0\
  49. PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KIDxkZWZzPgogIDxzdHlsZSBpZD0iY3VycmVudC1j\
  50. b2xvci1zY2hlbWUiIHR5cGU9InRleHQvY3NzIj4KICAgLkNvbG9yU2NoZW1lLVRleHQgeyBjb2xv\
  51. cjojNDQ0NDQ0OyB9IC5Db2xvclNjaGVtZS1IaWdobGlnaHQgeyBjb2xvcjojNDI4NWY0OyB9CiAg\
  52. PC9zdHlsZT4KIDwvZGVmcz4KIDxwYXRoIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvciIgY2xhc3M9\
  53. IkNvbG9yU2NoZW1lLVRleHQiIGQ9Ik0gNi4yNSAxIEwgNi4wOTU3MDMxIDIuODQzNzUgQSA1LjUg\
  54. NS41IDAgMCAwIDQuNDg4MjgxMiAzLjc3MzQzNzUgTCAyLjgxMjUgMi45ODQzNzUgTCAxLjA2MjUg\
  55. Ni4wMTU2MjUgTCAyLjU4Mzk4NDQgNy4wNzIyNjU2IEEgNS41IDUuNSAwIDAgMCAyLjUgOCBBIDUu\
  56. NSA1LjUgMCAwIDAgMi41ODAwNzgxIDguOTMxNjQwNiBMIDEuMDYyNSA5Ljk4NDM3NSBMIDIuODEy\
  57. NSAxMy4wMTU2MjUgTCA0LjQ4NDM3NSAxMi4yMjg1MTYgQSA1LjUgNS41IDAgMCAwIDYuMDk1NzAz\
  58. MSAxMy4xNTIzNDQgTCA2LjI0NjA5MzggMTUuMDAxOTUzIEwgOS43NDYwOTM4IDE1LjAwMTk1MyBM\
  59. IDkuOTAwMzkwNiAxMy4xNTgyMDMgQSA1LjUgNS41IDAgMCAwIDExLjUwNzgxMiAxMi4yMjg1MTYg\
  60. TCAxMy4xODM1OTQgMTMuMDE3NTc4IEwgMTQuOTMzNTk0IDkuOTg2MzI4MSBMIDEzLjQxMjEwOSA4\
  61. LjkyOTY4NzUgQSA1LjUgNS41IDAgMCAwIDEzLjQ5NjA5NCA4LjAwMTk1MzEgQSA1LjUgNS41IDAg\
  62. MCAwIDEzLjQxNjAxNiA3LjA3MDMxMjUgTCAxNC45MzM1OTQgNi4wMTc1NzgxIEwgMTMuMTgzNTk0\
  63. IDIuOTg2MzI4MSBMIDExLjUxMTcxOSAzLjc3MzQzNzUgQSA1LjUgNS41IDAgMCAwIDkuOTAwMzkw\
  64. NiAyLjg0OTYwOTQgTCA5Ljc1IDEgTCA2LjI1IDEgeiBNIDggNiBBIDIgMiAwIDAgMSAxMCA4IEEg\
  65. MiAyIDAgMCAxIDggMTAgQSAyIDIgMCAwIDEgNiA4IEEgMiAyIDAgMCAxIDggNiB6IiB0cmFuc2Zv\
  66. cm09InRyYW5zbGF0ZSg0IDQpIi8+Cjwvc3ZnPgo=";
  67.  
  68. const MPV_CSS = `
  69. .pwm-play {
  70.   width: 48px;
  71.   height: 48px;
  72.   border: 0;
  73.   border-radius: 50%;
  74.   background-size: 48px;
  75.   background-image: url(data:image/svg+xml;base64,${ICON_MPV});
  76.   background-repeat: no-repeat;
  77. }
  78. .pwm-settings {
  79.   opacity: 0;
  80.   visibility: hidden;
  81.   transition: all 0.2s ease-in-out;
  82.   display: block;
  83.   position: absolute;
  84.   top: -32px;
  85.   width: 32px;
  86.   height: 32px;
  87.   margin-left: 8px;
  88.   border: 0;
  89.   border-radius: 50%;
  90.   background-size: 32px;
  91.   background-color: #eeeeee;
  92.   background-image: url(data:image/svg+xml;base64,${ICON_SETTINGS});
  93.   background-repeat: no-repeat;
  94. }
  95. .pwm-iframe {
  96.   display: none;
  97. }
  98. .play-with-mpv {
  99.   position: fixed;
  100.   left: 8px;
  101.   bottom: 8px;
  102. }
  103. .pwm-play:hover + .pwm-settings,
  104. .pwm-settings:hover {
  105.   opacity: 1;
  106.   visibility: visible;
  107.   transition: all 0.2s ease-in-out;
  108. }
  109. `;
  110.  
  111. const CONFIG_ID = "perferQuality";
  112.  
  113. const CONFIG_CSS = `
  114. body {
  115.   display: flex;
  116. }
  117. #${CONFIG_ID}_wrapper {
  118.   margin: auto;
  119. }
  120. #${CONFIG_ID} .config_header {
  121.   padding-bottom: 8px;
  122. }
  123. #${CONFIG_ID}_field_perferQuality {
  124.   padding-top: 4px;
  125.   padding-bottom: 8px;
  126. }
  127. #${CONFIG_ID} .saveclose_buttons {
  128.   margin: 1px;
  129.   padding: 4px 16px;
  130. }
  131. #${CONFIG_ID} .reset_holder {
  132.   padding-top: 4px;
  133. }
  134. `;
  135.  
  136. const CONFIG_IFRAME_CSS = `
  137. position: fixed;
  138. z-index: 999;
  139. width:270px;
  140. height: 170px;
  141. border: 1px solid;
  142. border-radius: 2px;
  143. `;
  144.  
  145. GM_config.init({
  146.   id: `${CONFIG_ID}`,
  147.   title: `${GM_info.script.name}`,
  148.   fields: {
  149.     perferQuality: {
  150.       label: "Prefer Quality",
  151.       type: "radio",
  152.       options: ["Best", "4K", "2K", "1080P", "720P"],
  153.       default: "Best",
  154.     },
  155.   },
  156.   events: {
  157.     save: () => {
  158.       updateButton(location.href);
  159.     },
  160.     reset: () => {
  161.       updateButton(location.href);
  162.     },
  163.   },
  164.   css: CONFIG_CSS,
  165. });
  166.  
  167. function notifyHandlerUpdate() {
  168.   const UPDATE_NOTIFY = {
  169.     title: `${GM_info.script.name}`,
  170.     text: `mpv-handler is upgraded to ${MPV_HANDLER_VERSION}\n\nClick to check updates`,
  171.     onclick: () => {
  172.       GM_openInTab("https://github.com/akiirui/mpv-handler/releases/latest");
  173.       GM_setValue("mpvHandlerVersion", MPV_HANDLER_VERSION);
  174.     },
  175.   };
  176.  
  177.   let version = GM_getValue("mpvHandlerVersion", null);
  178.   if (version !== MPV_HANDLER_VERSION) {
  179.     GM_notification(UPDATE_NOTIFY);
  180.   }
  181. }
  182.  
  183. function appendButton() {
  184.   let head = document.getElementsByTagName("head")[0];
  185.   let style = document.createElement("style");
  186.  
  187.   if (head) {
  188.     style.innerHTML = MPV_CSS;
  189.     head.appendChild(style);
  190.   }
  191.  
  192.   let body = document.getElementsByTagName("body")[0];
  193.   let buttonDiv = document.createElement("div");
  194.   let buttonIframe = document.createElement("iframe");
  195.   let buttonPlay = document.createElement("a");
  196.   let buttonSettings = document.createElement("button");
  197.  
  198.   if (body) {
  199.     buttonIframe.className = "pwm-iframe";
  200.     buttonIframe.name = "pwm-iframe";
  201.  
  202.     buttonPlay.className = "pwm-play";
  203.     buttonPlay.target = "pwm-iframe";
  204.     buttonPlay.style = "display: none";
  205.     buttonPlay.addEventListener("click", () => {
  206.       let videoElement = document.getElementsByTagName("video")[0];
  207.       if (videoElement) videoElement.pause();
  208.     });
  209.  
  210.     buttonSettings.className = "pwm-settings";
  211.     buttonSettings.addEventListener("click", () => {
  212.       if (!GM_config.isOpen) {
  213.         GM_config.open();
  214.         GM_config.frame.style = CONFIG_IFRAME_CSS;
  215.       }
  216.     });
  217.  
  218.     buttonDiv.className = "play-with-mpv";
  219.     buttonDiv.appendChild(buttonIframe);
  220.     buttonDiv.appendChild(buttonPlay);
  221.     buttonDiv.appendChild(buttonSettings);
  222.  
  223.     body.appendChild(buttonDiv);
  224.   }
  225. }
  226.  
  227. function updateButton(currentUrl) {
  228.   let isMatch = false;
  229.   let button = document.getElementsByClassName("pwm-play")[0];
  230.  
  231.   for (const element of MATCH_URLS) {
  232.     if ((isMatch = currentUrl.includes(element))) break;
  233.   }
  234.  
  235.   if (button) {
  236.     let quality = GM_config.get("perferQuality");
  237.     let protocol = currentUrl + "|" + quality;
  238.  
  239.     button.style = isMatch ? "display: block" : "display: none";
  240.     button.href = isMatch ? "mpv://" + btoa(protocol) : "";
  241.   }
  242. }
  243.  
  244. function detectPJAX() {
  245.   let previousUrl = null;
  246.  
  247.   setInterval(() => {
  248.     let currentUrl = location.href;
  249.  
  250.     if (currentUrl && previousUrl !== currentUrl) {
  251.       updateButton(currentUrl);
  252.       previousUrl = currentUrl;
  253.     }
  254.   }, 500);
  255. }
  256.  
  257. notifyHandlerUpdate();
  258. appendButton();
  259. detectPJAX();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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