(Instagram)Enable standard video controls

enable standard video controls

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name                (Instagram)Enable standard video controls
// @namespace           https://greasyfork.org/users/821661
// @match               https://www.instagram.com/*
// @grant               GM_getValue
// @grant               GM_setValue
// @run-at              document-start
// @version             1.3
// @author              hdyzen
// @description         enable standard video controls
// @license             GPL-3.0
// ==/UserScript==
'use strict';

const getVolume = () => GM_getValue('volume', 0);

const cantAddControls = () => !(window.location.pathname.startsWith('/stories/') || window.location.pathname.startsWith('/reels/'));

const videosHandler = videosEl => {
    for (const video of videosEl) {
        const videoNextSibling = video.nextElementSibling;
        const poster = videoNextSibling.querySelector('img[src]');
        const mButton = videoNextSibling.querySelector('button:has([d^="M1.5 13."])');

        video.setAttribute('controls', '');
        mButton?.click();
        video.volume = getVolume();

        video.addEventListener('volumechange', e => {
            GM_setValue('volume', video.volume);
        });

        if (poster) video.setAttribute('poster', poster.src);
        videoNextSibling.style.display = 'none';
    }
};

const mutationsHandler = mutations => {
    const videosEl = document.querySelectorAll('video[src]:not([controls])');
    if (videosEl.length && cantAddControls()) {
        videosHandler(videosEl);
    }
};

const observer = new MutationObserver(mutationsHandler);

observer.observe(document.documentElement, { childList: true, subtree: true });