☰

YouTube Popout Button [mashup]

Provides a button to pop out the YouTube video in a separate window.

目前为 2022-03-04 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name           YouTube Popout Button [mashup]
  3. // @description    Provides a button to pop out the YouTube video in a separate window.
  4. // @version        1.2.0
  5. // @author         joeytwiddle
  6. // @contributor    Alek_T, tehnicallyrite
  7. // @license        ISC
  8. // @include        http://*.youtube.com/watch*
  9. // @include        http://youtube.com/watch*
  10. // @include        https://*.youtube.com/watch*
  11. // @include        https://youtube.com/watch*
  12. // @grant          none
  13. // @namespace      https://greasyfork.org/users/8615
  14. // ==/UserScript==
  15.  
  16. // This is a combination of two scripts I found:
  17. // - http://userscripts-mirror.org/scripts/show/75815#YouTube:_Pop-out_Video
  18. // - http://userscripts-mirror.org/scripts/show/69687#YouTube_Popout
  19. // For a while I think I hosted it here (but it never got mirrored):
  20. // - http://userscripts.org/scripts/show/150631#YouTube_Popout_Button
  21.  
  22. // Known issues:
  23. // - The popout window displays the location bar.  I have been unable to hide it.
  24.  
  25. // Need to delay, or the target div won't be rendered yet
  26. setTimeout(function() {
  27.    // Create Button
  28.    var divWatchHeadline = document.evaluate("//div[@id='watch-actions']", document, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null).singleNodeValue;
  29.    divWatchHeadline = divWatchHeadline || document.getElementById("watch7-secondary-actions");
  30.    divWatchHeadline = divWatchHeadline || document.getElementById("watch8-secondary-actions");
  31.    divWatchHeadline = divWatchHeadline || document.querySelector("#menu .ytd-video-primary-info-renderer");
  32.    divWatchHeadline = divWatchHeadline || document.querySelector("#top-level-buttons");
  33.  
  34.    var buttonPopout = document.createElement("button");
  35.    buttonPopout.title = "Pop-out Video";
  36.    //buttonPopout.setAttribute("class", "yt-uix-button yt-uix-button-default yt-uix-tooltip");
  37.    buttonPopout.style.background = 'transparent';
  38.    buttonPopout.style.border = 'none';
  39.    buttonPopout.style.cursor = 'pointer';
  40.    buttonPopout.setAttribute("data-tooltip-title", "Pop-out Video");
  41.    var popoutImage = document.createElement("img");
  42.    var offButton = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAABKVBMVEVmZmZaWlp1dXVsbGxjY2NkZGRnZ2d0dHRYWFhoaGhZWVlpaWlzc3NxcXFubm52dnZ2dnZoaGh3d3dzc3NfX19paWlnZ2dqampeXl5vb29ra2tubm5vb29nZ2dzc3Nqampqampzc3N2dnZfX19ycnJYWFhVVVVeXl5oaGhfX19hYWFoaGj////Dw8PGxsZeXl6ioqJ2dnZiYmJzc3OysrLT09P09PTLy8vp6emfn5+9vb2YmJhqamrX19fNzc3AwMCRkZFcXFzk5OS8vLy5ubnPz8/a2tqkpKTBwcHJycn29vbMzMyJiYmdnZ3W1taMjIxhYWGIiIjf39+cnJy6urrQ0NCbm5tvb291dXXIyMj6+vqPj49ubm6FhYWXl5dpaWmnp6dwcHCEhISvBaPYAAAALHRSTlMA8gDyAAAANvIAxQB8APJf8rvlhsXF6vLF7fL08u6QxABqZMkAysra5fLywMzgc80AAAC2SURBVHheHcpVcsQwFAXRK1myBxmCzCCZhpk5zEz7X0TepP9OVUMGOefxRMyg1lOAMDmPePOybdvfP1g4aq0MFNVcAiVFOO1MiFMDyeVQKJPNVUtE28D1jVv49asErUarCLRUJf9Icp37hzWwYsk5J403Np+ePbCX18+vW3Xnb21bO7tgNaXqjbf3jz2xzzlYm85Ot9c/kCYxMFTUTBUOIYIczoXWunypr44AEcbxCfvv9AyA/AMMShwGeYE4AgAAAABJRU5ErkJggg==";
  43.    var overButton = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAABZVBMVEUAT8QAZv8AZs0AZswAZv4ATsQASsMAZtIATMMAT/8AZsIAZscAZsUAYv8AaP8AZ9YAV/8AYP8AS/8CVv8ATP8AZ/8AZsMAYv0Aas0AVscAav8AYLwAaNUAQ/4AZfEAZ9gAVP8AVf8ATv8AQv8AYf8AZ9cAZsEAYP8AZ/8AYbsAZfYAZtAASsMAZtEARcEAZv0AVscAZtUAas0AWMcAXMkAas3///+bw+sALf+VwP/r8/9Khf+fxv+VwOo3gf8AKP/N4v+Vwd6WwP8AXcmv0O/u9v+QveoANv8AZf8AaP+lyer1+f9IhP8AR//C3P9KkP8ANv6gyP+20/+rze8FZf8RU/9PiP8ASf84fP8AVP8sf+UAWf9Qkv9Wlv8ALP9/sv+oyv+Muv+bw/+51eosdv9ZmP9bnf+AsuU5iNhkouAAV8dbnd4oguOqzOu92Os/i9mDtd2AsP8AVv9Rkv/U6f+WuP+61v9CiQWZAAAANnRSTlPyAAAAAPLyAMXyAAAANvIA8nzy7fJfAIa7xeXFxeoAAPL08u6QxABqZMkAAMoAygDaAOXy8sAxRV+aAAAAw0lEQVR4Xh3OxXLDUBBE0XlCW7LMzA4z50kyMzOGmZm/P1O+u1PViwZZ5AhxmaMzmNUPjLTOEduwl9R1/e4YWHRYcXxSrG8HlmVMbovn7BJ5ZQSvz2AIBEMncWTeCIWHx4+Xyjfil/45QRjQn9EYdaqdX8SAv45rN6jb2bmvag34eqPZatNOdz6iLC4BX6Y0MTk4PFpeWCEE+BQu05lsbs20yhEQihQr0fsNRhI34elZVdXXN/V9C/9tw84uTNvbx3/yP8AgJKm6HHSaAAAAAElFTkSuQmCC";
  44.    popoutImage.src = offButton;
  45.    popoutImage.setAttribute("alt", "External link icon");
  46.    popoutImage.setAttribute("style", "padding:0px 0px 2px 1px;");
  47.    buttonPopout.appendChild(popoutImage);
  48.    // The other buttons don't change these days, so we won't either
  49.    //buttonPopout.addEventListener("mouseover", function() { popoutImage.src = overButton; }, false);
  50.    //buttonPopout.addEventListener("mouseout", function() { popoutImage.src = offButton; }, false);
  51.  
  52.    //divWatchHeadline.appendChild(document.createTextNode("\n"));
  53.    //divWatchHeadline.appendChild(buttonPopout);
  54.    divWatchHeadline.insertBefore(buttonPopout, divWatchHeadline.lastElementChild);
  55.    //divWatchHeadline.appendChild(document.createTextNode("\n"));
  56.  
  57.    buttonPopout.addEventListener("click", popOutVideo, false);
  58.  
  59.    function popOutVideo() {
  60.       // Grabbing Video Id
  61.       function gup(name) {
  62.          name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  63.          var regexS = "[\\?&]" + name + "=([^&#]*)";
  64.          var regex = new RegExp(regexS);
  65.          var results = regex.exec(window.location.href);
  66.          return results && results[1];
  67.       }
  68.  
  69.       var ytvidid = gup('v');
  70.  
  71.       if (ytvidid) {
  72.          //var link = "http://www.youtube.com/watch_popup?v=";
  73.          //var flink = link+ytvidid;
  74.          // The above URL gets redirected to https://www.youtube.com/embed/bNcWVUfwmS4&autoplay=1#at=6
  75.          // And the redirect causes autoplay to not work.  So let's go directly to the target URL.
  76.          var flink = "https://www.youtube.com/embed/" + ytvidid + "?autoplay=1";
  77.          var lcheck = location.href;
  78.          // I think this used to prevent infinite loops when the script was auto-forwarding
  79.          if (lcheck !== flink) {
  80.             try {
  81.                var player = window.document.getElementById('movie_player');
  82.                if (player) {
  83.                   // If we are in Greasemonkey's sandbox, we need to get out!
  84.                   if (player.wrappedJSObject) {
  85.                      player = player.wrappedJSObject;
  86.                   }
  87.                   player.pauseVideo();
  88.                   var time = player.getCurrentTime();
  89.                   flink += "#at=" + (time | 0);
  90.                }
  91.             } catch (e) {
  92.                console.error("" + e);
  93.             }
  94.  
  95.             // window.location = flink;
  96.             // Change "YoutubePopout" to "_blank" if you want new popouts to appear in a separate window from the existing popout.
  97.             window.open(flink, "YoutubePopout", "menubar=no,location=no,resizable=yes,status=no,toolbar=no,personalbar=no");
  98.          }
  99.       }
  100.    }
  101. }, 4000);