☰

html5 videos: Click To Play

Make "video" elements click to play

目前为 2018-02-22 提交的版本。查看 最新版本。

// ==UserScript==
// @name  html5 videos: Click To Play
// @namespace ChoGGi.org
// @description Make "video" elements click to play
// @include http://*
// @include https://*
// @version 0.1
// @grant none
// ==/UserScript==

(function() {
    'use strict';

    //skip these domains (allow autoplay)
    function checkDomain() {
      let d = (window.location != window.parent.location) ? document.referrer : document.location.href;
      if (d.includes("example.com") === false &&
          //d.includes("youtube.com") === false &&
          //d.includes("escapistmagazine.com") === false &&
          d.includes("example.net") === false)
        return true;
    }

    //listen for newly added videos
    let MutationObserver = window.MutationObserver;
    let vidObserver = new MutationObserver(mutationHandler);
    let observerConfig = {
      childList:true,
      subtree:true
    };

    //activated on new elements
    function mutationHandler(mutationRecords) {
      mutationRecords.forEach(function(mutation) {
        if (mutation.type == "childList" &&
            typeof mutation.addedNodes == "object" &&
            mutation.addedNodes.length) {
          for (let i = 0, length = mutation.addedNodes.length;  i < length;  ++i) {
            let node = mutation.addedNodes[i];
            //check if it's a video node
            if (node.nodeType === 1 && node.nodeName === "VIDEO") {
              //if it's a video we added; remove the function below
              if (node.ChoGGi_autoplayVideo === 1) {
                node.onplaying = null;
              } else {
                //have to do this for some annoying sites (twitch/youtube) else we get audio playing with no video
                node.onplaying = function() {
                  convertVideo(node);
                };
              }
            }
          }
        }
      });
    }

    function iterateVideos() {
      let vidList = document.getElementsByTagName("video");
      for (let i = 0; i < vidList.length; i++) {
        convertVideo(vidList[i]);
      }
    }

    //switch the video out with a button
    function convertVideo(video) {
      //build a button to replace the video
      let rect = video.getBoundingClientRect();
      let clicker = document.createElement("button");
      clicker.style = "position: absolute; z-index: 99999 ;top: " + rect.top + "px; left: " + rect.left +"px; font-size: 15px; cursor: pointer; width: " + rect.width + "px; height: " + rect.height + "px;";
      clicker.innerHTML = "Play Video";
      clicker.className = "ChoGGi_autoplayToggle";
      //store the video as part of the button
      clicker.ChoGGi_videoObject = video;
      //fire this function when we click the button
      clicker.onclick = function() {
        let video = this.ChoGGi_videoObject;
        //we don't want the vidObserver to catch this video
        video.ChoGGi_autoplayVideo = 1;
        //add default controls to video
        //video.setAttribute("controls","");
        //add video back to webpage
        this.parentNode.appendChild(video);
        //remove any extra buttons added (thanks youtube)
        let childList = video.parentNode.children;
        for (let i = 0; i < childList.length; i++) {
          if (childList[i].className === "ChoGGi_autoplayToggle")
            this.parentNode.removeChild(childList[i]);
        }
        //video re-added so remove the button
        this.parentNode.removeChild(this);
        //if we're clicking the button we want to watch the video
        video.play();
      };
      //add button to page
      video.parentNode.appendChild(clicker);
      //remove video from page
      video.parentNode.removeChild(video);
    }

    //are we skipping this page?
    if (checkDomain()) {
      //wait before checking for video elements
      window.setTimeout(function() {
        iterateVideos();
      }, 250);
      //add listener to check for js added vids
      vidObserver.observe(document,observerConfig);
    }

})();