☰

Vimeo Download

Adds a download button to the video player.

当前为 2016-01-24 提交的版本，查看 最新版本。

  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.1
  9. // @grant       none
  10. // ==/UserScript==
  11.  
  12. 'use strict';
  13.  
  14. (function(){
  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( '.video video' ) )
  24.         {
  25.             // keep track of video URL
  26.             var currentURL = '';
  27.             
  28.             // periodically check video (to follow quality changes)
  29.             setInterval( function checkVideo()
  30.             {
  31.                 // find the main video element and get source URL
  32.                 var newURL = find( '.video video' ).src;
  33.                 
  34.                 // different from previously found URL?
  35.                 if ( newURL != currentURL )
  36.                 {
  37.                     // developer information
  38.                     console.log( "[Vimeo Download] Found new video URL:", newURL );
  39.                     
  40.                     // make new download button
  41.                     makeButton( newURL );
  42.                     
  43.                     // remember new URL
  44.                     currentURL = newURL;
  45.                 }
  46.                 
  47.             }, 500 );
  48.         }
  49.         else
  50.         {
  51.             // try again later
  52.             setTimeout( setup, 500 );
  53.         }
  54.     }
  55.     
  56.     // add download button to video player controls
  57.     function makeButton( url )
  58.     {
  59.         var title, height, qualityInfo;
  60.         
  61.         // try to get video metadata
  62.         // (this can easily break if Vimeo updates their object tree)
  63.         try
  64.         {
  65.             // get video ID
  66.             var videoId = window['vimeo']['clip_page_config']['clip']['id'];
  67.             
  68.             // retrieve active player properties
  69.             var videoInfo = window['vimeo']['clips'][videoId]['video'];
  70.             
  71.             // get title and video height
  72.             title  = videoInfo['title'];
  73.             height = videoInfo['height'];
  74.             
  75.             // prepare quality information from video height
  76.             qualityInfo = " ("+height+"p)";
  77.             
  78.             // log gathered information
  79.             console.log( "[Vimeo Download] Making download button for \""+title+"\" ("+height+"p)" );
  80.         }
  81.         catch ( error )
  82.         {
  83.             // set quality information to empty string
  84.             qualityInfo = "";
  85.             
  86.             // output a warning
  87.             console.warn( "[Vimeo Download] Making download button for unknown video, error retrieving meta data:", error );
  88.         }
  89.         
  90.         // make valid filename from title
  91.         var filename = title.replace( /[<>:"\/\\|?*]/g, '' ) + '.mp4';
  92.         
  93.         // remove old button if existing
  94.         var oldButton = find( '.button.dwnld' );
  95.         oldButton && oldButton.remove();
  96.         
  97.         // create new button
  98.         var button = document.createElement( 'a' );
  99.         button.href = url;
  100.         button.target = '_blank';
  101.         button.download = filename;
  102.         button.innerHTML = "⥥";
  103.         button.title = "Download" + qualityInfo;
  104.         button.setAttribute( 'class', "button dwnld" );
  105.         button.setAttribute( 'style', 'display: inline-block; font-size: 1.7em; margin: -0.4em 0 0 0.4em; color: #fff' );
  106.         
  107.         // apply mouseover effect
  108.         button.onmouseenter = function() { button.style.color = 'rgb(68,187,255)'; };
  109.         button.onmouseleave = function() { button.style.color = '#fff'; };
  110.         
  111.         // find control bar and add button
  112.         find( '.play-bar' ).appendChild( button );
  113.     }
  114.     
  115.     // start looking for video player
  116.     setup();
  117.     
  118. })();