☰

使用 mpv 播放

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

当前为 2020-11-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 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.11.18
  12. // @author              Akatsuki Rui
  13. // @license             MIT License
  14. // @grant               GM_info
  15. // @run-at              document-idle
  16. // @noframes
  17. // @match               *://www.youtube.com/*
  18. // @match               *://www.bilibili.com/video/*
  19. // ==/UserScript==
  20.  
  21. "use strict";
  22.  
  23. const MATCH_URLS = ["www.youtube.com/watch", "www.bilibili.com/video/"];
  24.  
  25. function styleAppend() {
  26.   let head = document.getElementsByTagName("head")[0];
  27.   let styl = document.createElement("style");
  28.  
  29.   if (!head) {
  30.     console.log("Not found elements <head>");
  31.     return;
  32.   }
  33.  
  34.   styl.innerHTML =
  35.     ".play-with-mpv{display:inline-block;position:fixed;left:12px;bottom:12px;width:48px;height:48px;border:0;border-radius:50%;background-size:100%;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmVyc2lvbj0iMSI+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4yIiBjeD0iMzIiIGN5PSIzMyIgcj0iMjgiLz4KIDxjaXJjbGUgc3R5bGU9ImZpbGw6IzhkMzQ4ZSIgY3g9IjMyIiBjeT0iMzIiIHI9IjI4Ii8+CiA8Y2lyY2xlIHN0eWxlPSJvcGFjaXR5Oi4zIiBjeD0iMzQuNSIgY3k9IjI5LjUiIHI9IjIwLjUiLz4KIDxjaXJjbGUgc3R5bGU9Im9wYWNpdHk6LjIiIGN4PSIzMiIgY3k9IjMzIiByPSIxNCIvPgogPGNpcmNsZSBzdHlsZT0iZmlsbDojZmZmZmZmIiBjeD0iMzIiIGN5PSIzMiIgcj0iMTQiLz4KIDxwYXRoIHN0eWxlPSJmaWxsOiM2OTFmNjkiIHRyYW5zZm9ybT0ibWF0cml4KDEuNTE1NTQ0NSwwLDAsMS41LC0zLjY1Mzg3OSwtNC45ODczODQ4KSIgZD0ibTI3LjE1NDUxNyAyNC42NTgyNTctMy40NjQxMDEgMi0zLjQ2NDEwMiAxLjk5OTk5OXYtNC0zLjk5OTk5OWwzLjQ2NDEwMiAyeiIvPgogPHBhdGggc3R5bGU9ImZpbGw6I2ZmZmZmZjtvcGFjaXR5Oi4xIiBkPSJNIDMyIDQgQSAyOCAyOCAwIDAgMCA0IDMyIEEgMjggMjggMCAwIDAgNC4wMjE0ODQ0IDMyLjU4NTkzOCBBIDI4IDI4IDAgMCAxIDMyIDUgQSAyOCAyOCAwIDAgMSA1OS45Nzg1MTYgMzIuNDE0MDYyIEEgMjggMjggMCAwIDAgNjAgMzIgQSAyOCAyOCAwIDAgMCAzMiA0IHoiLz4KPC9zdmc+Cgo=);background-repeat:no-repeat}";
  36.   head.appendChild(styl);
  37. }
  38.  
  39. function buttonAppend(isMatch) {
  40.   if (isMatch) {
  41.     let body = document.getElementsByTagName("body")[0];
  42.     let button = document.createElement("a");
  43.  
  44.     if (!body) {
  45.       console.log("Not found elements <body>");
  46.       return;
  47.     }
  48.  
  49.     button.className = "play-with-mpv";
  50.     button.href = "mpv://" + btoa(location.href);
  51.     body.appendChild(button);
  52.   } else {
  53.     let oldButton = document.querySelector("a[class='play-with-mpv'");
  54.  
  55.     if (oldButton) {
  56.       oldButton.remove();
  57.     }
  58.   }
  59. }
  60.  
  61. function detectPJAX() {
  62.   let previousUrl = null;
  63.  
  64.   setInterval(() => {
  65.     let currentUrl = location.href;
  66.     let isMatch = false;
  67.  
  68.     for (const element of MATCH_URLS) {
  69.       if (currentUrl.includes(element)) {
  70.         isMatch = true;
  71.         break;
  72.       } else {
  73.         isMatch = false;
  74.       }
  75.     }
  76.  
  77.     if (currentUrl && previousUrl !== currentUrl) {
  78.       buttonAppend(isMatch);
  79.       previousUrl = currentUrl;
  80.     }
  81.   }, 500);
  82. }
  83.  
  84. styleAppend();
  85. detectPJAX();