☰

Vimeo Download

Adds a download button to the video player.

  1. // ==UserScript==
  2. // @name        Vimeo Download
  3. // @namespace   schwarztee
  4. // @description Adds a download button to the video player.
  5. // @include     https://vimeo.com/*
  6. // @copyright   2015, schwarztee
  7. // @license     MIT
  8. // @version     0.2.4
  9. // @grant       none
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.  
  14.     'use strict';
  15.  
  16.     // helper: find DOM element
  17.     function find( selector ) { return document.querySelector( selector ); }
  18.  
  19.     // wait for player to be ready and set up periodic video check
  20.     function setup()
  21.     {
  22.         // controller object in DOM and video element available?
  23.         if ( window && 'vimeo' in window && find( '.player .video video' ) )
  24.         {
  25.             // try to get video metadata
  26.             // (this can easily break if Vimeo updates their object tree)
  27.             try
  28.             {
  29.                 // get video ID
  30.                 var videoId = vimeo['clip_page_config']['clip']['id'];
  31.  
  32.                 // retrieve active player properties
  33.                 var videoInfo = vimeo['clips'][videoId];
  34.  
  35.                 // save title
  36.                 var title  = videoInfo['video']['title'];
  37.  
  38.                 // get streams
  39.                 var streams = videoInfo['request']['files']['progressive'];
  40.  
  41.                 // sort streams descending by video resolution
  42.                 streams.sort( function compare( streamA, streamB )
  43.                 {
  44.                     // compare width property
  45.                     return streamB.width - streamA.width;
  46.                 });
  47.  
  48.                 // get video file info
  49.                 // - just take the first one with the highest quality
  50.                 // - this will be replaced when I got more time
  51.                 var file = streams[0];
  52.  
  53.                 // log gathered information
  54.                 console.log( "[Vimeo Download] Found media for \""+title+"\" ("+file.quality+")" );
  55.  
  56.                 // make download button
  57.                 var button = makeButton( file.url, title, file.quality );
  58.  
  59.                 // regularly check that button is in control bar
  60.                 // yes, that's dirty, but Vimeo replaces the player UI somewhen after loading
  61.                 setInterval( function()
  62.                 {
  63.                     // find control bar
  64.                     var playBar = find( '.player .play-bar' )
  65.  
  66.                     // remove any old button if existing
  67.                     var oldButton = find( '.button.dwnld' );
  68.                     oldButton && oldButton.remove();
  69.  
  70.                     // add new button
  71.                     playBar.appendChild( button );
  72.  
  73.                 }, 500 );
  74.             }
  75.             catch ( error )
  76.             {
  77.                 // log the error
  78.                 console.error( "[Vimeo Download] Error retrieving video meta data:", error );
  79.             }
  80.         }
  81.         else
  82.         {
  83.             // try again later
  84.             setTimeout( setup, 500 );
  85.         }
  86.     }
  87.  
  88.     // create download button
  89.     function makeButton( url, title, quality )
  90.     {
  91.         // make valid filename from title
  92.         var filename = title.replace( /[<>:"\/\\|?*]/g, '' ) + '.mp4';
  93.  
  94.         // create new button
  95.         var button = document.createElement( 'a' );
  96.         button.href = url;
  97.         button.target = '_blank';
  98.         button.download = filename;
  99.         button.innerHTML = "⥥";
  100.         button.title = "Download " + quality;
  101.         button.setAttribute( 'class', "button dwnld" );
  102.         button.setAttribute( 'style', 'display: inline-block; font-size: 1.75em; margin: -0.25em 0 0 0.3em; color: #fff' );
  103.  
  104.         // apply mouseover effect
  105.         button.onmouseenter = function() { button.style.color = 'rgb(68,187,255)'; };
  106.         button.onmouseleave = function() { button.style.color = '#fff'; };
  107.  
  108.         // return DOM object
  109.         return button;
  110.     }
  111.  
  112.     // start looking for video player
  113.     setup();
  114.  
  115. })();