☰

Custom YouTube Video Tools

Adds buttons to YouTube videos to allow custom seeking. It also adds a handy stop start button for stopping to video quickly.

当前为 2014-08-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           Custom YouTube Video Tools
  3. // @namespace      http://www.diamonddownload.weebly.com
  4. // @description    Adds buttons to YouTube videos to allow custom seeking. It also adds a handy stop start button for stopping to video quickly. 
  5. // @include        http://*.youtube.com/*
  6. // @include        http://youtube.com/*
  7. // @include        https://*.youtube.com/*
  8. // @include        https://youtube.com/*
  9. // @grant          none
  10. // @version        2.1.0
  11. // @run-at         document-body
  12. // @author         R.F Geraci
  13. // @icon64         http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/YouTube-icon.png
  14. // ==/UserScript==
  15.  
  16. //============CUSTOM SETTINGS============
  17. var showOnPageLoad = false;
  18. var ToggleOFFDivButtonText = 'Video Tools';
  19. var ToggleONDivButtonText = 'Hide Tools';
  20. //=======================================
  21.  
  22. var toggle = false;
  23. var btn;
  24. var Tbox;
  25. var SeekBBtn;
  26. var SeekFBtn;
  27. var label;
  28. var CheckBox;
  29. var tURLBtn;
  30. var HideAnnosBtn;
  31. var togHideAnno;
  32. var playVidAtBtn;
  33. var PlayVidAtHOUR;
  34. var PlayVidAtMIN;
  35. var PlayVidAtSEC;
  36. var Hlabel;
  37. var Mlabel;
  38. var Slabel;
  39. var vidSpeed;
  40. var vidSpeedlabel;
  41. var TogDiv;
  42. var div;
  43.  
  44. var p = document.getElementsByClassName('video-stream html5-main-video')[0];
  45. var container = document.getElementById('watch7-user-header');
  46.  
  47. function stopvidload(){
  48.     
  49.     if (p){
  50.         toggle = !toggle;
  51.         
  52.         if (toggle){
  53.             
  54.             btn.innerText = "Play Video";
  55.             p.pause();
  56.         }else{
  57.             
  58.             btn.innerText = "Stop Video";
  59.             p.play();
  60.         }
  61.     } 
  62. }
  63.  
  64. function seekForward(){
  65.     if (Tbox.value != "" && Tbox.value > 0){
  66.         var int = parseInt(Tbox.value, 10);
  67.         p.currentTime += int;      
  68.     }
  69. }
  70.  
  71. function seekBackward(){
  72.     if (Tbox.value != "" && Tbox.value > 0){
  73.         var int = parseInt(Tbox.value, 10);
  74.         p.currentTime -= int;      
  75.     }
  76. }
  77.  
  78. function copyToClipboard(text) {
  79.     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  80. }
  81.  
  82.  
  83. function GetTimeURL(){
  84.     var winLoc = window.location.href;
  85.     
  86.     if (winLoc.indexOf("#t=") > -1){
  87.         winLoc = winLoc.slice(0, -5);
  88.     }
  89.     var cTime = winLoc + "#t=" + p.currentTime.toFixed(0);
  90.     copyToClipboard(cTime);
  91. }
  92.  
  93. function HideAnnos(){
  94.     
  95.     var anno = document.getElementsByClassName('video-annotations iv-module')[0];
  96.     togHideAnno =  !togHideAnno;
  97.     
  98.     if (togHideAnno){
  99.         
  100.         anno.style.display = 'none';
  101.         HideAnnosBtn.innerText = "Show Annotations";
  102.         
  103.     }else{
  104.         anno.style.display = 'block';
  105.         HideAnnosBtn.innerText = "Hide Annotations";
  106.     } 
  107. }
  108.  
  109. function PlayVidAt(){
  110.     var hour =  parseInt(PlayVidAtHOUR.value,10);
  111.     var min = parseInt(PlayVidAtMIN.value,10);
  112.     var sec = parseInt(PlayVidAtSEC.value,10);
  113.     p.currentTime = (hour*60*60) + (min*60) + (sec);
  114.     p.play();
  115. }
  116.  
  117. function ToggleDiv(){
  118.     TogDiv = !TogDiv;
  119.     
  120.     if (TogDiv){
  121.         div.style.display = "block";  
  122.         CheckBox.value = ToggleONDivButtonText;
  123.     }else{
  124.         div.style.display = "none";  
  125.         CheckBox.value = ToggleOFFDivButtonText;
  126.     }
  127.     
  128. }
  129. //----------------------------------------------------------------------------------------------------
  130. div = document.createElement('div');
  131. div.id = 'myDiv';
  132. div.setAttribute('style', 'margin-top: 10px; margin-bottom: 25px; display: none; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; width: 100%; margin-right: 20px; padding-top: 5px; padding-bottom: 5px;');
  133. container.appendChild(div);
  134. //----------------------------------------------------------------------------------------------------
  135. btn = document.createElement('button');
  136. btn.id = 'Play-Video';
  137. btn.type = 'button';
  138. btn.title =  'Play/Pause Video';
  139. btn.className ='yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  140. btn.setAttribute('style', 'margin-left: 5px; display: inline;');
  141. btn.innerText = "Stop Video";
  142. div.appendChild(btn);
  143. btn.addEventListener('click',stopvidload, true);
  144. //----------------------------------------------------------------------------------------------------
  145. SeekBBtn = document.createElement('button');
  146. SeekBBtn.id = 'Seek-B-Increment';
  147. SeekBBtn.type =  'button';
  148. //SeekBBtn.title = 'Seek Backward';
  149. SeekBBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  150. SeekBBtn.setAttribute('style', 'margin-left: 5px; width: 25px;');
  151. SeekBBtn.innerText = "◄";
  152. div.appendChild(SeekBBtn);
  153. SeekBBtn.addEventListener('click',seekBackward, true);
  154. //----------------------------------------------------------------------------------------------------
  155. SeekFBtn = document.createElement('button');
  156. SeekFBtn.id = 'Seek-F-Increment';
  157. SeekFBtn.type =  'button';
  158. //SeekBBtn.title = 'Seek Forward';
  159. SeekFBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  160. SeekFBtn.setAttribute('style', 'margin-left: 5px; width: 25px;');
  161. SeekFBtn.innerText = "►";
  162. div.appendChild(SeekFBtn);
  163. SeekFBtn.addEventListener('click',seekForward, true);
  164. //----------------------------------------------------------------------------------------------------
  165. Tbox = document.createElement('input');
  166. Tbox.id = 'Increment-value';
  167. Tbox.type ='number';
  168. Tbox.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
  169. Tbox.value = "5";
  170. Tbox.min = "0";
  171. Tbox.setAttribute('maxlength', "5");
  172. div.appendChild(Tbox);
  173. //----------------------------------------------------------------------------------------------------
  174. label = document.createElement('label');
  175. label.id = 'Seek-Label';
  176. label.type = 'text';
  177. label.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
  178. label.innerText = "Seconds";
  179. div.appendChild(label);
  180. //---------------------------------------------------------------------------------------------------
  181. tURLBtn = document.createElement('button');
  182. tURLBtn.id = 'tURLBtn';
  183. tURLBtn.type =  'button';
  184. tURLBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  185. tURLBtn.setAttribute('style', 'margin-left: 5px;');
  186. tURLBtn.innerText = "Get URL at Current Time";
  187. div.appendChild(tURLBtn);
  188. tURLBtn.addEventListener('click',GetTimeURL, true);
  189. //----------------------------------------------------------------------------------------------------
  190. HideAnnosBtn = document.createElement('button');
  191. HideAnnosBtn.id = 'HideAnnos';
  192. HideAnnosBtn.type =  'button';
  193. HideAnnosBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  194. HideAnnosBtn.setAttribute('style', 'margin-left: 5px;');
  195. HideAnnosBtn.innerText = "Hide Annotations";
  196. div.appendChild(HideAnnosBtn);
  197. HideAnnosBtn.addEventListener('click',HideAnnos, true);
  198. //----------------------------------------------------------------------------------------------------
  199. playVidAtBtn = document.createElement('button');
  200. playVidAtBtn.id = 'playVidAtBtn';
  201. playVidAtBtn.type =  'button';
  202. playVidAtBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  203. playVidAtBtn.setAttribute('style', 'margin-left: 5px;');
  204. playVidAtBtn.innerText = "Play Video At";
  205. div.appendChild(playVidAtBtn);
  206. playVidAtBtn.addEventListener('click',PlayVidAt, true);
  207. //----------------------------------------------------------------------------------------------------
  208. PlayVidAtHOUR = document.createElement('input');
  209. PlayVidAtHOUR.id = 'PlayVidAtHOUR';
  210. PlayVidAtHOUR.type ='number';
  211. PlayVidAtHOUR.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
  212. PlayVidAtHOUR.value = "0";
  213. PlayVidAtHOUR.min = "0";
  214. PlayVidAtHOUR.setAttribute('maxlength', "5");
  215. div.appendChild(PlayVidAtHOUR);
  216. //----------------------------------------------------------------------------------------------------
  217. Hlabel = document.createElement('label');
  218. Hlabel.id = 'Hlabel';
  219. Hlabel.type = 'text';
  220. Hlabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
  221. Hlabel.innerText = "h";
  222. div.appendChild(Hlabel);
  223. //---------------------------------------------------------------------------------------------------
  224. PlayVidAtMIN = document.createElement('input');
  225. PlayVidAtMIN.id = 'PlayVidAtMIN';
  226. PlayVidAtMIN.type ='number';
  227. PlayVidAtMIN.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
  228. PlayVidAtMIN.value = "0";
  229. PlayVidAtMIN.min = "0";
  230. PlayVidAtMIN.setAttribute('maxlength', "5");
  231. div.appendChild(PlayVidAtMIN);
  232. //----------------------------------------------------------------------------------------------------
  233. Mlabel = document.createElement('label');
  234. Mlabel.id = 'Mlabel';
  235. Mlabel.type = 'text';
  236. Mlabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
  237. Mlabel.innerText = "m";
  238. div.appendChild(Mlabel);
  239. //---------------------------------------------------------------------------------------------------
  240. PlayVidAtSEC = document.createElement('input');
  241. PlayVidAtSEC.id = 'PlayVidAtMIN';
  242. PlayVidAtSEC.type ='number';
  243. PlayVidAtSEC.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
  244. PlayVidAtSEC.value = "0";
  245. PlayVidAtSEC.min = "0";
  246. PlayVidAtSEC.setAttribute('maxlength', "5");
  247. div.appendChild(PlayVidAtSEC);
  248. //----------------------------------------------------------------------------------------------------
  249. Slabel = document.createElement('label');
  250. Slabel.id = 'Slabel';
  251. Slabel.type = 'text';
  252. Slabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
  253. Slabel.innerText = "s";
  254. div.appendChild(Slabel);
  255. //---------------------------------------------------------------------------------------------------
  256. vidSpeedlabel = document.createElement('label');
  257. vidSpeedlabel.id = 'vidSpeedlabel';
  258. vidSpeedlabel.type = 'text';
  259. vidSpeedlabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
  260. vidSpeedlabel.innerText = "Video Speed";
  261. div.appendChild(vidSpeedlabel);
  262. //-------------------------------------------------------------------------------------------------------
  263. vidSpeed = document.createElement('input');
  264. vidSpeed.id = 'vidSpeed';
  265. vidSpeed.type ='number';
  266. vidSpeed.setAttribute('style', 'margin-left: 5px; width: 45px; position: relative; top: 2px;');
  267. vidSpeed.value = "1";
  268. vidSpeed.min = "0.25";
  269. vidSpeed.max = "2";
  270. vidSpeed.setAttribute('maxlength', "5");
  271. vidSpeed.setAttribute('step', "0.25");
  272. div.appendChild(vidSpeed);
  273. //---------------------------------------------------------------------------------------------------
  274. CheckBox = document.createElement('input');
  275. CheckBox.id = 'myCheckbox';
  276. CheckBox.type = 'button';
  277. CheckBox.title =  'Show/Hide Custom Video Tools';
  278. CheckBox.className ='yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
  279. CheckBox.setAttribute('style', 'Border-Bottom-Left-Radius: 0px; !important; Border-Top-Left-Radius: 0px; !important; margin: -1px !important;');
  280. CheckBox.value = ToggleOFFDivButtonText;
  281. var parent = document.getElementById('watch7-subscription-container');
  282. parent.appendChild(CheckBox);
  283. CheckBox.addEventListener('click', ToggleDiv, true);
  284. //----------------------------------------------------------------------------------------------------
  285. if (showOnPageLoad){
  286.     div.style.display = "block";
  287.     CheckBox.value = ToggleONDivButtonText;
  288.     TogDiv = true;
  289. }else{
  290.     div.style.display = "none";  
  291.     CheckBox.value = ToggleOFFDivButtonText;
  292. }
  293. //----------------------------------------------------------------------------------------------------
  294. p.onpause = function(){btn.innerText = "Play Video"; toggle = true;};
  295. p.onplay = function(){btn.innerText = "Stop Video"; toggle = false;};
  296. vidSpeed.onchange = function(){p.playbackRate = parseInt(vidSpeed.value,10);};
  297.  
  298.  
  299.  
  300.  
  301.  
  302.