☰

Enable HTML5 Video Controls

Automatically adds the controls attribute to all HTML5 video elements

  1. // ==UserScript==
  2. // @name         Enable HTML5 Video Controls
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Automatically adds the controls attribute to all HTML5 video elements
  6. // @author       YeXiu_AU
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Function to add controls attribute to video elements
  16.     function enableVideoControls() {
  17.         var videos = document.querySelectorAll("video");
  18.         videos.forEach(function(video) {
  19.             video.setAttribute("controls", "true");
  20.         });
  21.     }
  22.  
  23.     // Add controls to existing video elements
  24.     enableVideoControls();
  25.  
  26.     // Use MutationObserver to monitor for new video elements being added to the DOM
  27.     var observer = new MutationObserver(function(mutations) {
  28.         mutations.forEach(function(mutation) {
  29.             if (mutation.addedNodes.length) {
  30.                 mutation.addedNodes.forEach(function(node) {
  31.                     if (node.nodeName === "VIDEO") {
  32.                         node.setAttribute("controls", "true");
  33.                     } else if (node.querySelectorAll) {
  34.                         var videos = node.querySelectorAll("video");
  35.                         videos.forEach(function(video) {
  36.                             video.setAttribute("controls", "true");
  37.                         });
  38.                     }
  39.                 });
  40.             }
  41.         });
  42.     });
  43.  
  44.     // Start observing the document for changes
  45.     observer.observe(document.body, { childList: true, subtree: true });
  46.  
  47.     // Ensure that controls are added when the DOM is ready
  48.     document.addEventListener("DOMContentLoaded", enableVideoControls);
  49. })();