HTML5 Steam Trailers

Replaces Steam's own video controls with dark HTML5 controls.

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

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

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

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

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

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

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

Advertisement:

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

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

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

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

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

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

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

Advertisement:

// ==UserScript==
// @name         HTML5 Steam Trailers
// @namespace    http://pyroglyph.co.uk/
// @version      1.1
// @description  Replaces Steam's own video controls with dark HTML5 controls.
// @author       Pyroglyph
// @match        http://store.steampowered.com/*
// @grant        none
// ==/UserScript==

// Run on page load
(function() {
    'use strict';
    convertVideoToHTML5();
})();
// Also run on click because not all videos are visible on page load
onclick = function() { convertVideoToHTML5(); };

function convertVideoToHTML5() {
    // Can't find a better way to remove them ¯\_(ツ)_/¯
    var oldControls = document.querySelector('.html5_video_overlay');
    if (oldControls !== null && typeof oldControls !== 'undefined') {
        oldControls.parentNode.removeChild(oldControls);
    }

    var videos = document.getElementsByTagName('video');
    if (videos !== null && typeof videos !== 'undefined' && videos.length !== 0) {
        for (var i = 0; i < videos.length; i++) {
            videos[i].setAttributeNode(document.createAttribute('controls'));
        }
    }

    var style = document.createElement('style');
    var node = document.createTextNode('video::-webkit-media-controls { filter: grayscale(1) brightness(0.9) invert(1); }');
    style.appendChild(node);
    document.head.appendChild(style);
}