☰

Disable HTML5 Video AutoPlay and Background Play (Pause On Leave Tab)

Prevents HTML5 videos from auto-playing in new tabs on any page (not just YouTube) and pauses videos when leave tab. NOTE: On YouTube, click the main video area to play the video so don't have to click the Pause/Play button twice for the first time. From Dan Moorehead (xeonx1), developer of PowerAccess™ (http://PowerAccessDB.com) (https://twitter.com/PowerAccessDB).

当前为 2017-06-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Disable HTML5 Video AutoPlay and Background Play (Pause On Leave Tab)
  3. // @namespace    xeonx1
  4. // @version      1.5
  5. // @description  Prevents HTML5 videos from auto-playing in new tabs on any page (not just YouTube) and pauses videos when leave tab.  NOTE: On YouTube, click the main video area to play the video so don't have to click the Pause/Play button twice for the first time.  From Dan Moorehead (xeonx1), developer of PowerAccess™ (http://PowerAccessDB.com) (https://twitter.com/PowerAccessDB).
  6. // @author       Dan Moorehead (xeonx1), developer of PowerAccess™ (http://PowerAccessDB.com) (https://twitter.com/PowerAccessDB) and
  7. // @match        http://*/*
  8. // @match        https://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     // **** User Preferences ****
  16.     //whether to pause videos when leaving a tab they are playing on
  17.     var pauseOnLeaveTab = true;
  18.  
  19.      // Number of milliseconds after clicking where a video is allowed to autoplay.
  20.     var allowAutoPlayWithinMillisecondsOfClick = 500;
  21.  
  22.     //you can add domains (with or without subdomain, must not include http://, etc.) to always allow auto-play
  23.     //pause on leave tab will still function however
  24.     var autoPlayDomains = [
  25.         /*"youtube.com"*/
  26.     ];
  27.     var hasAutoPlayDomains = autoPlayDomains.length > 0;
  28.     // **** End Preferences ***
  29.     /*
  30.          Beyond this point is the logic of the script.
  31.          Do not edit unless you know what you are doing.
  32.       */
  33.     var lastClickTimeMs = 0;
  34.  
  35.     //determine name of event for switched away from tab, based on the browser
  36.     var tabHiddenPropertyName, tabVisibleChangedEventName;
  37.  
  38.     if ("undefined" !== typeof document.hidden) {
  39.         tabHiddenPropertyName = "hidden";
  40.         tabVisibleChangedEventName = "visibilitychange";
  41.     } else if ("undefined" !== typeof document.webkitHidden) {
  42.         tabHiddenPropertyName = "webkitHidden";
  43.         tabVisibleChangedEventName = "webkitvisibilitychange";
  44.     }  else if ("undefined" !== typeof document.msHidden) {
  45.         tabHiddenPropertyName = "msHidden";
  46.         tabVisibleChangedEventName = "msvisibilitychange";
  47.     }
  48.  
  49.     function safeAddHandler(element, event, handler) {
  50.         element.removeEventListener(event, handler);
  51.         element.addEventListener(event, handler);
  52.     }
  53.     function getVideos() {
  54.         //OR: Can also add audio elements
  55.         return document.getElementsByTagName("video");
  56.     }
  57.  
  58.     function isPlaying(vid) {
  59.         return !!(vid.currentTime > 0 && !vid.paused && !vid.ended && vid.readyState > 2);
  60.     }
  61.  
  62.     function onTabVisibleChanged() {
  63.  
  64.         //console.log("Tab visibility changed for Video auto-player disabling user script. Document is hidden status: ", document[tabHiddenPropertyName]);
  65.  
  66.         var videos = getVideos();
  67.  
  68.         //if doc is hidden (switched away from that tab), then pause all its videos
  69.         if (document[tabHiddenPropertyName]) {
  70.  
  71.             //remember had done this
  72.             document.wasPausedOnChangeTab = true;
  73.  
  74.             //pause all videos, since
  75.             for (var i = 0; i < videos.length; i++) {
  76.                 var vid = videos[i];
  77.                 
  78.                 if (vid.isPlaying) {
  79.                     vid.wasPausedOnChangeTab = true;
  80.                     console.log("Paused video playback because switched away from this tab for video with source: ", vid.currentSrc);
  81.                 }
  82.  
  83.                 //always pause just in case isPlaying isn't always reliable
  84.                 vid.pause();
  85.             }
  86.         }
  87.         //document is now the active tab
  88.         else { 
  89.             document.wasPausedOnChangeTab = false; //reset state (unless need to use this field or delay this)
  90.             
  91.             //TODO-MAYBE: if want to auto-play once switch back to a tab if had paused before, then uncomment below, after changing from forEach() to for loop
  92.             // getVideos().forEach( function(vid) {
  93.             //     if (vid.wasPausedOnChangeTab == true) {
  94.             //         vid.wasPausedOnChangeTab = false;
  95.             //         vid.play();
  96.             //     }
  97.             // } ); 
  98.         }
  99.     }
  100.  
  101.     //handle active tab change events for this document/tab
  102.     if (pauseOnLeaveTab) {
  103.         safeAddHandler(document, tabVisibleChangedEventName, onTabVisibleChanged);
  104.     }
  105.  
  106.     //returns true if auto-play is always allowed, whitelisted, so should do nothing to it
  107.     function isAutoPlayAllowedDomain(s) { // Check if video src is whitelisted.
  108.  
  109.         if (hasAutoPlayDomains) {
  110.             for (var i = 0; i < autoPlayDomains.length; i++) {
  111.                 var reg = new RegExp("https?\:\/\/[a-zA-Z0-9\.\-]*?\.?" + autoPlayDomains[i].replace(/\./, "\.") + "\/", "i");
  112.                 if (s.match(reg) !== null) {
  113.                     return true;
  114.                 }
  115.             }
  116.         }
  117.         return false;
  118.     }
  119.     //on pause or ended/finished, change playing state back to not-playing, so know to start preventing playback again unless after a click
  120.     function onPaused(e)
  121.     {
  122.         e.target.isPlaying = false;
  123.  
  124.     }
  125.     function onPlay(e) { // React when a video begins playing
  126.  
  127.         var msSinceLastClick = Date.now() - lastClickTimeMs;
  128.         var vid = e.target;
  129.  
  130.         //exit, do nothing if is already playing (but not if undefined/unknown), in case clicked on seekbar, volume, etc. - don't toggle to paused state on each click
  131.         if(vid.isPlaying == true) {
  132.            return;
  133.         }
  134.         vid.isPlaying = true;
  135.  
  136.         //if haven't clicked recently on video, consider it auto-started, so prevent playback by pausing it (unless whitelisted source domain to always play from)
  137.         if (msSinceLastClick > allowAutoPlayWithinMillisecondsOfClick && !isAutoPlayAllowedDomain(vid.currentSrc)) {
  138.  
  139.             vid.pause();
  140.             
  141.             //remember video is no longer playing -  just in case, though event handler for pause should also set this
  142.             vid.isPlaying = false;
  143.             
  144.             console.log("Paused video from source: ", vid.currentSrc);
  145.         }
  146.     }
  147.     function addListenersToVideo(vid)
  148.     {
  149.         if (vid.hasAutoPlayHandlers != true) {
  150.             vid.hasAutoPlayHandlers = true;
  151.  
  152.             safeAddHandler(vid, "play", onPlay);
  153.             //NOTE: Seems playing is needed in addition to play event, but isn't this just supposed to occur whenever play, plus after play once buffering is finished?
  154.             safeAddHandler(vid, "playing", onPlay);
  155.  
  156.             safeAddHandler(vid, "pause", onPaused);
  157.             safeAddHandler(vid, "ended", onPaused);
  158.         }
  159.     }
  160.     function addListeners() {
  161.  
  162.         var videos = getVideos();
  163.         //OR: Can get audio elements too
  164.  
  165.         for (var i = 0; i < videos.length; i++) {
  166.             // Due to the way some sites dynamically add videos, the "playing" event is not always sufficient.
  167.             // Also, in order to handle dynamically added videos, this function may be called on the same elements.
  168.             // Must remove any existing instances of this event listener before adding. Prevent duplicate listeners.
  169.             var vid = videos[i];
  170.  
  171.             addListenersToVideo(vid);
  172.         }
  173.     }
  174.  
  175.     //handle click event so can limit auto play until X time after a click
  176.     safeAddHandler(document, "click", function () {
  177.         lastClickTimeMs = Date.now();
  178.     });
  179.  
  180.     var observer = new MutationObserver(function(mutations) {
  181.         // Listen for elements being added. Add event listeners when video elements are added.
  182.         mutations.forEach(function(mutation) {
  183.  
  184.             if (mutation.type == "attributes" && mutation.target.tagName == "VIDEO") { //&& mutation.attributeName == "src" 
  185.  
  186.                 videoAdded = true;
  187.  
  188.                 addListenersToVideo(mutation.target);
  189.             }
  190.  
  191.             if (mutation.addedNodes.length > 0) {
  192.  
  193.                 addListeners();
  194.  
  195.                 //faster to use getElementsByTagName() for rarely added types vs. iterating over all added elements, checking tagName
  196.                 // for (var i = 0; i < mutation.addedNodes.length; i++) {
  197.                 //     var added = mutation.addedNodes[i];
  198.                 //     if (added.nodeType == 1 && added.tagName == "VIDEO") {
  199.                 //         videoAdded = true;
  200.                 //     }
  201.                 // }
  202.             }
  203.         });
  204.     });
  205.  
  206.     //subscribe to documents events for node added and src attribute changed via MutatorObserver, limiting to only src attribute changes
  207.     observer.observe(document, { attributes: true, childList: true, subtree: true, characterData: false, attributeFilter: ['src'] });
  208.  
  209.     //don't also need to handle "spfdone" event
  210.  
  211.     //hookup event handlers for all videos that exist now (will still add to any that are inserted later)
  212.     addListeners();
  213.  
  214. })();