Adds a download button to the video player.
// ==UserScript==
// @name Vimeo Download
// @namespace schwarztee
// @description Adds a download button to the video player.
// @include https://vimeo.com/*
// @copyright 2015, schwarztee
// @license MIT
// @version 0.2.4
// @grant none
// ==/UserScript==
(function(){
'use strict';
// helper: find DOM element
function find( selector ) { return document.querySelector( selector ); }
// wait for player to be ready and set up periodic video check
function setup()
{
// controller object in DOM and video element available?
if ( window && 'vimeo' in window && find( '.player .video video' ) )
{
// try to get video metadata
// (this can easily break if Vimeo updates their object tree)
try
{
// get video ID
var videoId = vimeo['clip_page_config']['clip']['id'];
// retrieve active player properties
var videoInfo = vimeo['clips'][videoId];
// save title
var title = videoInfo['video']['title'];
// get streams
var streams = videoInfo['request']['files']['progressive'];
// sort streams descending by video resolution
streams.sort( function compare( streamA, streamB )
{
// compare width property
return streamB.width - streamA.width;
});
// get video file info
// - just take the first one with the highest quality
// - this will be replaced when I got more time
var file = streams[0];
// log gathered information
console.log( "[Vimeo Download] Found media for \""+title+"\" ("+file.quality+")" );
// make download button
var button = makeButton( file.url, title, file.quality );
// regularly check that button is in control bar
// yes, that's dirty, but Vimeo replaces the player UI somewhen after loading
setInterval( function()
{
// find control bar
var playBar = find( '.player .play-bar' )
// remove any old button if existing
var oldButton = find( '.button.dwnld' );
oldButton && oldButton.remove();
// add new button
playBar.appendChild( button );
}, 500 );
}
catch ( error )
{
// log the error
console.error( "[Vimeo Download] Error retrieving video meta data:", error );
}
}
else
{
// try again later
setTimeout( setup, 500 );
}
}
// create download button
function makeButton( url, title, quality )
{
// make valid filename from title
var filename = title.replace( /[<>:"\/\\|?*]/g, '' ) + '.mp4';
// create new button
var button = document.createElement( 'a' );
button.href = url;
button.target = '_blank';
button.download = filename;
button.innerHTML = "⥥";
button.title = "Download " + quality;
button.setAttribute( 'class', "button dwnld" );
button.setAttribute( 'style', 'display: inline-block; font-size: 1.75em; margin: -0.25em 0 0 0.3em; color: #fff' );
// apply mouseover effect
button.onmouseenter = function() { button.style.color = 'rgb(68,187,255)'; };
button.onmouseleave = function() { button.style.color = '#fff'; };
// return DOM object
return button;
}
// start looking for video player
setup();
})();