☰

Greasy Fork is available in English.

(Instagram)Enable standard video controls

enable standard video controls

  1. // ==UserScript==
  2. // @name                (Instagram)Enable standard video controls
  3. // @namespace           https://greasyfork.org/users/821661
  4. // @match               https://www.instagram.com/*
  5. // @grant               GM_getValue
  6. // @grant               GM_setValue
  7. // @run-at              document-start
  8. // @version             1.3
  9. // @author              hdyzen
  10. // @description         enable standard video controls
  11. // @license             GPL-3.0
  12. // ==/UserScript==
  13. 'use strict';
  14.  
  15. const getVolume = () => GM_getValue('volume', 0);
  16.  
  17. const cantAddControls = () => !(window.location.pathname.startsWith('/stories/') || window.location.pathname.startsWith('/reels/'));
  18.  
  19. const videosHandler = videosEl => {
  20.     for (const video of videosEl) {
  21.         const videoNextSibling = video.nextElementSibling;
  22.         const poster = videoNextSibling.querySelector('img[src]');
  23.         const mButton = videoNextSibling.querySelector('button:has([d^="M1.5 13."])');
  24.  
  25.         video.setAttribute('controls', '');
  26.         mButton?.click();
  27.         video.volume = getVolume();
  28.  
  29.         video.addEventListener('volumechange', e => {
  30.             GM_setValue('volume', video.volume);
  31.         });
  32.  
  33.         if (poster) video.setAttribute('poster', poster.src);
  34.         videoNextSibling.style.display = 'none';
  35.     }
  36. };
  37.  
  38. const mutationsHandler = mutations => {
  39.     const videosEl = document.querySelectorAll('video[src]:not([controls])');
  40.     if (videosEl.length && cantAddControls()) {
  41.         videosHandler(videosEl);
  42.     }
  43. };
  44.  
  45. const observer = new MutationObserver(mutationsHandler);
  46.  
  47. observer.observe(document.documentElement, { childList: true, subtree: true });