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.

Per 21-08-2014. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name           Custom YouTube Video Tools
// @namespace      http://www.diamonddownload.weebly.com
// @description    Adds buttons to YouTube videos to allow custom seeking. It also adds a handy stop start button for stopping to video quickly. 
// @include        http://*.youtube.com/*
// @include        http://youtube.com/*
// @include        https://*.youtube.com/*
// @include        https://youtube.com/*
// @grant          none
// @version        2.0.2
// @run-at         document-body
// @author         R.F Geraci
// @icon64         http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/YouTube-icon.png
// ==/UserScript==

//============CUSTOM SETTINGS============
var showOnPageLoad = false;
//=======================================

var toggle = false;
var btn;
var Tbox;
var SeekBBtn;
var SeekFBtn;
var label;
var CheckBox;
var tURLBtn;
var HideAnnosBtn;
var togHideAnno;
var playVidAtBtn;
var PlayVidAtHOUR;
var PlayVidAtMIN;
var PlayVidAtSEC;
var Hlabel;
var Mlabel;
var Slabel;
var div;

var p = document.getElementsByClassName('video-stream html5-main-video')[0];
var container = document.getElementById('watch7-user-header');

function stopvidload(){
    
    if (p){
        toggle = !toggle;
        
        if (toggle){
            
            btn.innerText = "Play Video";
            p.pause();
        }else{
            
            btn.innerText = "Stop Video";
            p.play();
        }
    } 
}

function seekForward(){
    if (Tbox.value != "" && Tbox.value > 0){
        var int = parseInt(Tbox.value, 10);
        p.currentTime += int;      
    }
}

function seekBackward(){
    if (Tbox.value != "" && Tbox.value > 0){
        var int = parseInt(Tbox.value, 10);
        p.currentTime -= int;      
    }
}

function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}


function GetTimeURL(){
    var winLoc = window.location.href;
    
    if (winLoc.indexOf("#t=") > -1){
        winLoc = winLoc.slice(0, -5);
    }
    var cTime = winLoc + "#t=" + p.currentTime.toFixed(0);
    copyToClipboard(cTime);
}

function HideAnnos(){
    
    var anno = document.getElementsByClassName('video-annotations iv-module')[0];
    togHideAnno =  !togHideAnno;
    
    if (togHideAnno){
        
        anno.style.display = 'none';
        HideAnnosBtn.innerText = "Show Annotations";
        
    }else{
        anno.style.display = 'block';
        HideAnnosBtn.innerText = "Hide Annotations";
    } 
}

function PlayVidAt(){
    var hour =  parseInt(PlayVidAtHOUR.value,10);
    var min = parseInt(PlayVidAtMIN.value,10);
    var sec = parseInt(PlayVidAtSEC.value,10);
    p.currentTime = (hour*60*60) + (min*60) + (sec);
    p.play();
}


//----------------------------------------------------------------------------------------------------
div = document.createElement('div');
div.id = 'myDiv';
div.setAttribute('style', 'padding: 5px; margin-top: 5px; border: 1px solid black; width: 100%;');
container.appendChild(div);
//----------------------------------------------------------------------------------------------------
btn = document.createElement('button');
btn.id = 'Play-Video';
btn.type = 'button';
btn.title =  'Play/Pause Video';
btn.className ='yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
btn.setAttribute('style', 'margin-left: 5px; display: inline;');
btn.innerText = "Stop Video";
div.appendChild(btn);
btn.addEventListener('click',stopvidload, true);
//----------------------------------------------------------------------------------------------------
SeekBBtn = document.createElement('button');
SeekBBtn.id = 'Seek-B-Increment';
SeekBBtn.type =  'button';
//SeekBBtn.title = 'Seek Backward';
SeekBBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
SeekBBtn.setAttribute('style', 'margin-left: 5px; width: 25px;');
SeekBBtn.innerText = "◄";
div.appendChild(SeekBBtn);
SeekBBtn.addEventListener('click',seekBackward, true);
//----------------------------------------------------------------------------------------------------
SeekFBtn = document.createElement('button');
SeekFBtn.id = 'Seek-F-Increment';
SeekFBtn.type =  'button';
//SeekBBtn.title = 'Seek Forward';
SeekFBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
SeekFBtn.setAttribute('style', 'margin-left: 5px; width: 25px;');
SeekFBtn.innerText = "►";
div.appendChild(SeekFBtn);
SeekFBtn.addEventListener('click',seekForward, true);
//----------------------------------------------------------------------------------------------------
Tbox = document.createElement('input');
Tbox.id = 'Increment-value';
Tbox.type ='number';
Tbox.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
Tbox.value = "5";
Tbox.min = "0";
Tbox.setAttribute('maxlength', "5");
div.appendChild(Tbox);
//----------------------------------------------------------------------------------------------------
label = document.createElement('label');
label.id = 'Seek-Label';
label.type = 'text';
label.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
label.innerText = "Seconds";
div.appendChild(label);
//---------------------------------------------------------------------------------------------------
tURLBtn = document.createElement('button');
tURLBtn.id = 'tURLBtn';
tURLBtn.type =  'button';
tURLBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
tURLBtn.setAttribute('style', 'margin-left: 5px;');
tURLBtn.innerText = "Get URL at Current Time";
div.appendChild(tURLBtn);
tURLBtn.addEventListener('click',GetTimeURL, true);
//----------------------------------------------------------------------------------------------------
HideAnnosBtn = document.createElement('button');
HideAnnosBtn.id = 'HideAnnos';
HideAnnosBtn.type =  'button';
HideAnnosBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
HideAnnosBtn.setAttribute('style', 'margin-left: 5px;');
HideAnnosBtn.innerText = "Hide Annotations";
div.appendChild(HideAnnosBtn);
HideAnnosBtn.addEventListener('click',HideAnnos, true);
//----------------------------------------------------------------------------------------------------
playVidAtBtn = document.createElement('button');
playVidAtBtn.id = 'playVidAtBtn';
playVidAtBtn.type =  'button';
playVidAtBtn.className = 'yt-subscription-button yt-uix-button yt-uix-button-subscribe-branded';
playVidAtBtn.setAttribute('style', 'margin-left: 5px;');
playVidAtBtn.innerText = "Play Video At";
div.appendChild(playVidAtBtn);
playVidAtBtn.addEventListener('click',PlayVidAt, true);
//----------------------------------------------------------------------------------------------------
PlayVidAtHOUR = document.createElement('input');
PlayVidAtHOUR.id = 'PlayVidAtHOUR';
PlayVidAtHOUR.type ='number';
PlayVidAtHOUR.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
PlayVidAtHOUR.value = "0";
PlayVidAtHOUR.min = "0";
PlayVidAtHOUR.setAttribute('maxlength', "5");
div.appendChild(PlayVidAtHOUR);
//----------------------------------------------------------------------------------------------------
Hlabel = document.createElement('label');
Hlabel.id = 'Hlabel';
Hlabel.type = 'text';
Hlabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
Hlabel.innerText = "h";
div.appendChild(Hlabel);
//---------------------------------------------------------------------------------------------------
PlayVidAtMIN = document.createElement('input');
PlayVidAtMIN.id = 'PlayVidAtMIN';
PlayVidAtMIN.type ='number';
PlayVidAtMIN.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
PlayVidAtMIN.value = "0";
PlayVidAtMIN.min = "0";
PlayVidAtMIN.setAttribute('maxlength', "5");
div.appendChild(PlayVidAtMIN);
//----------------------------------------------------------------------------------------------------
Mlabel = document.createElement('label');
Mlabel.id = 'Mlabel';
Mlabel.type = 'text';
Mlabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
Mlabel.innerText = "m";
div.appendChild(Mlabel);
//---------------------------------------------------------------------------------------------------
PlayVidAtSEC = document.createElement('input');
PlayVidAtSEC.id = 'PlayVidAtMIN';
PlayVidAtSEC.type ='number';
PlayVidAtSEC.setAttribute('style', 'margin-left: 5px; width: 35px; position: relative; top: 2px;');
PlayVidAtSEC.value = "0";
PlayVidAtSEC.min = "0";
PlayVidAtSEC.setAttribute('maxlength', "5");
div.appendChild(PlayVidAtSEC);
//----------------------------------------------------------------------------------------------------
Slabel = document.createElement('label');
Slabel.id = 'Slabel';
Slabel.type = 'text';
Slabel.setAttribute('style', 'margin-left: 5px; position: relative; top: 2px;');
Slabel.innerText = "s";
div.appendChild(Slabel);
//---------------------------------------------------------------------------------------------------
CheckBox = document.createElement('input');
CheckBox.id = 'myCheckbox';
CheckBox.type = 'checkbox';
CheckBox.title =  'Show/Hide Custom Video Seeking';
CheckBox.setAttribute('style', 'margin-left: 5px; border: none; position: relative; top: 4px;');
CheckBox.checked = false;
container.appendChild(CheckBox);
//----------------------------------------------------------------------------------------------------
if (showOnPageLoad){
    CheckBox.checked = true;
    div.style.display = "block";  
}else{
    CheckBox.checked = false;
    div.style.display = "none";  
}
setInterval(function(){
    
    if(CheckBox.checked == true){
        div.style.display = "block";  
    }else{
        div.style.display = "none";  
    }
}, 10);
//----------------------------------------------------------------------------------------------------
p.onpause = function(){btn.innerText = "Play Video"; toggle = true;};
p.onplay = function(){btn.innerText = "Stop Video"; toggle = false;};