使用 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.1
  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 appendButton() {
  26. let head = document.getElementsByTagName("head")[0];
  27. let body = document.getElementsByTagName("body")[0];
  28. let style = document.createElement("style");
  29. let button = document.createElement("a");
  30.  
  31. if (head) {
  32. style.innerHTML =
  33. ".play-with-mpv{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}";
  34. head.appendChild(style);
  35. }
  36.  
  37. if (body) {
  38. button.className = "play-with-mpv";
  39. button.style = "display: none";
  40. body.appendChild(button);
  41. changeButton(location.href);
  42. }
  43. }
  44.  
  45. function changeButton(currentUrl) {
  46. let isMatch = false;
  47. let button = document.querySelector("a[class='play-with-mpv'");
  48.  
  49. for (const element of MATCH_URLS) {
  50. if ((isMatch = currentUrl.includes(element))) break;
  51. }
  52.  
  53. if (button) {
  54. button.style = isMatch ? "display: inline-block" : "display: none";
  55. button.href = isMatch ? "mpv://" + btoa(currentUrl) : "";
  56. }
  57. }
  58.  
  59. function detectPJAX() {
  60. let previousUrl = null;
  61.  
  62. setInterval(() => {
  63. let currentUrl = location.href;
  64.  
  65. if (currentUrl && previousUrl !== currentUrl) {
  66. changeButton(currentUrl);
  67. previousUrl = currentUrl;
  68. }
  69. }, 500);
  70. }
  71.  
  72. appendButton();
  73. detectPJAX();