使用 mpv 播放

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

当前为 2021-02-25 提交的版本,查看 最新版本

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