Enables the video controls on all video elements on 9GAG.
当前为
// ==UserScript==
// @name 9GAG video control enabler
// @version 0.2
// @description Enables the video controls on all video elements on 9GAG.
// @author fischly
// @match https://9gag.com/*
// @grant none
// @run-at document-idle
// @namespace https://greasyfork.org/users/662249
// @icon https://9gag.com/favicon.ico
// @license CC BY-SA 4.0
// ==/UserScript==
// entry point
(function() {
'use strict';
// first, enable controls to all elements that are already loaded on the 9GAG site
enableVideoControls();
// next, add the observer that will enable controls on all video elements that are dynamically loaded on scrolling
addObserver();
})();
/**
* Enables all video controls of all elements that are already loaded.
*/
function enableVideoControls() {
// get all post containers that are loaded already on site load
const postContainers = document.querySelectorAll('.list-stream');
console.log('postContainers: ', postContainers);
for (const container of postContainers) {
enableControlsOnPostContainer(container);
}
}
/**
* Adds the observer to the site element, where all the postContainers are loaded to.
*/
function addObserver() {
// the element that all new postContainers are loaded to is called 'list-view-2' for some reason
const targetNode = document.getElementById('page');
console.log('target node: ', targetNode);
const config = { attributes: false, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
console.log('CALLBACK: ', mutationsList);
for(const mutation of mutationsList) {
// loop over all added elements
for (const addedElement of mutation.addedNodes) {
// check if the main page has loaded
if (addedElement.className && addedElement.className.includes('main-wrap')) {
// if the main page has loaded, get the list-view from it (a "post-container" containing 5 invididual posts)
// and enable controls on it
enableControlsOnPostContainer(addedElement.querySelector('#list-view-2'));
}
// check if the added element is directly a list-view ("post-container"), which is the case if you scroll down
// and 9gag dynamically loads new posts. if it is one, enable controls on it
if (addedElement.className && addedElement.className.includes('list-stream')) {
// enable controls on all videos of this container
enableControlsOnPostContainer(addedElement);
}
}
}
};
// create the observer and observe the target
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}
/**
* Enables controls on video elements contained in all articles (= posts) of the given container.
*/
function enableControlsOnPostContainer(container) {
const videos = container.querySelectorAll('article video');
for (const video of videos) {
video.controls = true;
}
}