☰

Greasy Fork 支持简体中文。

Add Video Controls on Instagram

Adds controls to videos on Instagram.

  1. // ==UserScript==
  2. // @name         Add Video Controls on Instagram
  3. // @namespace    https://www.instagram.com/
  4. // @version      1.2
  5. // @license      CC BY-NC-SA 4.0
  6. // @description  Adds controls to videos on Instagram.
  7. // @author       Dan Martí
  8. // @match        *://www.instagram.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function modifyVideo() {
  16.         document.querySelectorAll('video.x1lliihq.x5yr21d.xh8yej3').forEach(video => {
  17.             video.controls = true;
  18.  
  19.             // Save the mute and volume state before Instagram modifies them
  20.             let prevMuted = video.muted;
  21.             let prevVolume = video.volume;
  22.  
  23.             // Restore the mute and volume state when interacting with the video
  24.             video.addEventListener('play', () => {
  25.                 video.muted = prevMuted;
  26.                 video.volume = prevVolume;
  27.             });
  28.             video.addEventListener('seeked', () => {
  29.                 video.muted = prevMuted;
  30.                 video.volume = prevVolume;
  31.             });
  32.             video.addEventListener('loadeddata', () => {
  33.                 video.muted = prevMuted;
  34.                 video.volume = prevVolume;
  35.             });
  36.         });
  37.     }
  38.  
  39.     function removeDiv() {
  40.         document.querySelectorAll('div.x5yr21d.x10l6tqk.x13vifvy.xh8yej3').forEach(div => {
  41.             div.remove();
  42.         });
  43.     }
  44.  
  45.     // Run at the start and observe changes on the page
  46.     const observer = new MutationObserver(() => {
  47.         modifyVideo();
  48.         removeDiv();
  49.     });
  50.  
  51.     observer.observe(document.body, { childList: true, subtree: true });
  52. })();