☰

使用 mpv 播放

通過 mpv 和 youtube-dl 播放網頁上的視頻和歌曲

目前為 2020-12-27 提交的版本，檢視 最新版本。

  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             2020.12.27
  12. // @author              Akatsuki Rui
  13. // @license             MIT License
  14. // @grant               GM_getValue
  15. // @grant               GM_setValue
  16. // @grant               GM_notification
  17. // @run-at              document-idle
  18. // @noframes
  19. // @match               *://www.youtube.com/*
  20. // @match               *://www.bilibili.com/video/*
  21. // ==/UserScript==
  22.  
  23. "use strict";
  24.  
  25. const MPV_HANDLER_VERSION = "v0.1.0";
  26. const MPV_ICON =
  27.   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmVyc2lvbj0iMSI+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4yIiBjeD0iMzIiIGN5PSIzMyIgcj0iMjgiLz4KIDxjaXJjbGUgc3R5bGU9ImZpbGw6IzhkMzQ4ZSIgY3g9IjMyIiBjeT0iMzIiIHI9IjI4Ii8+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4zIiBjeD0iMzQuNSIgY3k9IjI5LjUiIHI9IjIwLjUiLz4KIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6LjIiIGN4PSIzMiIgY3k9IjMzIiByPSIxNCIvPgogPGNpcmNsZSBzdHlsZT0iZmlsbDojZmZmZmZmIiBjeD0iMzIiIGN5PSIzMiIgcj0iMTQiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiM2OTFmNjkiIHRyYW5zZm9ybT0ibWF0cml4KDEuNTE1NTQ0NSwwLDAsMS41LC0zLjY1Mzg3OSwtNC45ODczODQ4KSIgZD0ibTI3LjE1NDUxNyAyNC42NTgyNTctMy40NjQxMDEgMi0zLjQ2NDEwMiAxLjk5OTk5OXYtNC0zLjk5OTk5OWwzLjQ2NDEwMiAyeiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZjtvcGFjaXR5Oi4xIiBkPSJNIDMyIDQgQSAyOCAyOCAwIDAgMCA0IDMyIEEgMjggMjggMCAwIDAgNC4wMjE0ODQ0IDMyLjU4NTkzOCBBIDI4IDI4IDAgMCAxIDMyIDUgQSAyOCAyOCAwIDAgMSA1OS45Nzg1MTYgMzIuNDE0MDYyIEEgMjggMjggMCAwIDAgNjAgMzIgQSAyOCAyOCAwIDAgMCAzMiA0IHoiLz4KPC9zdmc+Cgo=";
  28. const MATCH_URLS = ["www.youtube.com/watch", "www.bilibili.com/video/"];
  29.  
  30. function notifyHandlerUpdate() {
  31.   const NOTIFICATION = {
  32.     title: "Play with mpv",
  33.     text: `mpv-handler is upgraded to ${MPV_HANDLER_VERSION}
  34.  
  35. Check updates at:
  36. https://github.com/akiirui/mpv-handler/releases`,
  37.   };
  38.  
  39.   let version = GM_getValue("mpvHandlerVersion", null);
  40.   if (version !== MPV_HANDLER_VERSION) {
  41.     GM_notification(NOTIFICATION);
  42.     GM_setValue("mpvHandlerVersion", MPV_HANDLER_VERSION);
  43.   }
  44. }
  45.  
  46. function appendButton() {
  47.   let head = document.getElementsByTagName("head")[0];
  48.   let body = document.getElementsByTagName("body")[0];
  49.   let style = document.createElement("style");
  50.   let buttonIframe = document.createElement("iframe");
  51.   let button = document.createElement("a");
  52.  
  53.   if (head) {
  54.     style.innerHTML = `.play-with-mpv {
  55.   position: fixed;
  56.   left: 12px;
  57.   bottom: 12px;
  58.   width: 48px;
  59.   height: 48px;
  60.   border: 0;
  61.   border-radius: 50%;
  62.   background-size: 100%;
  63.   background-image: url(${MPV_ICON});
  64.   background-repeat: no-repeat;
  65. }`;
  66.     head.appendChild(style);
  67.   }
  68.  
  69.   if (body) {
  70.     buttonIframe.name = "play-with-mpv";
  71.     buttonIframe.style = "display: none";
  72.     body.appendChild(buttonIframe);
  73.  
  74.     button.className = "play-with-mpv";
  75.     button.style = "display: none";
  76.     button.target = "play-with-mpv";
  77.     button.addEventListener("click", () => {
  78.       let videoElement = document.getElementsByTagName("video")[0];
  79.       if (videoElement) videoElement.pause();
  80.     });
  81.     body.appendChild(button);
  82.  
  83.     updateButton(location.href);
  84.   }
  85. }
  86.  
  87. function updateButton(currentUrl) {
  88.   let isMatch = false;
  89.   let button = document.getElementsByClassName("play-with-mpv")[0];
  90.  
  91.   for (const element of MATCH_URLS) {
  92.     if ((isMatch = currentUrl.includes(element))) break;
  93.   }
  94.  
  95.   if (button) {
  96.     button.style = isMatch ? "display: inline-block" : "display: none";
  97.     button.href = isMatch ? "mpv://" + btoa(currentUrl) : "";
  98.   }
  99. }
  100.  
  101. function detectPJAX() {
  102.   let previousUrl = null;
  103.  
  104.   setInterval(() => {
  105.     let currentUrl = location.href;
  106.  
  107.     if (currentUrl && previousUrl !== currentUrl) {
  108.       updateButton(currentUrl);
  109.       previousUrl = currentUrl;
  110.     }
  111.   }, 500);
  112. }
  113.  
  114. notifyHandlerUpdate();
  115. appendButton();
  116. detectPJAX();