☰

improve Twitter Video Player

Change the difficult-to-use Twitter player to a native player.

目前为 2023-09-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         improve Twitter Video Player
  3. // @namespace    https://yakisova.com
  4. // @version      0.1.0
  5. // @description  Change the difficult-to-use Twitter player to a native player.
  6. // @author       yakisova41
  7. // @match        https://twitter.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const bodyElem = document.querySelector("body");
  17.  
  18.     if(bodyElem !== null) {
  19.         const observer = new MutationObserver(() => {
  20.            const videoComponent = bodyElem.querySelector('div[data-testid="videoComponent"]:not(.improved-video)');
  21.            if(videoComponent !== null) {
  22.                 videoComponent.classList.add("improved-video");
  23.                 setTimeout(() => {
  24.                     replacePlayer(videoComponent);
  25.                 }, 100);
  26.            }
  27.         });
  28.  
  29.         observer.observe(bodyElem, {
  30.             subtree: true,
  31.             childList: true
  32.         });
  33.     }
  34.  
  35.     function replacePlayer(componentElement) {
  36.         const originalVid = componentElement.querySelector("div:nth-child(1) > div > video");
  37.         if(originalVid !== null) {
  38.  
  39.             originalVid.controls = true;
  40.             originalVid.removeAttribute("disablepictureinpicture");
  41.  
  42.             const handleClick = (e) => {
  43.                 e.preventDefault();
  44.                 originalVid.play();
  45.                 setTimeout(() => {
  46.                     originalVid.muted = false;
  47.                 }, 500);
  48.  
  49.                 originalVid.removeEventListener("click", handleClick)
  50.             }
  51.             originalVid.addEventListener("click", handleClick);
  52.  
  53.             componentElement.parentElement.appendChild(originalVid);
  54.             componentElement.remove();
  55.         }
  56.     }
  57. })();