☰

Vimeo Download

Adds a download button to the video player.

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

// ==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.1
// @grant       none
// ==/UserScript==

'use strict';

(function(){
    
    // 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( '.video video' ) )
        {
            // keep track of video URL
            var currentURL = '';
            
            // periodically check video (to follow quality changes)
            setInterval( function checkVideo()
            {
                // find the main video element and get source URL
                var newURL = find( '.video video' ).src;
                
                // different from previously found URL?
                if ( newURL != currentURL )
                {
                    // developer information
                    console.log( "[Vimeo Download] Found new video URL:", newURL );
                    
                    // make new download button
                    makeButton( newURL );
                    
                    // remember new URL
                    currentURL = newURL;
                }
                
            }, 500 );
        }
        else
        {
            // try again later
            setTimeout( setup, 500 );
        }
    }
    
    // add download button to video player controls
    function makeButton( url )
    {
        var title, height, qualityInfo;
        
        // try to get video metadata
        // (this can easily break if Vimeo updates their object tree)
        try
        {
            // get video ID
            var videoId = window['vimeo']['clip_page_config']['clip']['id'];
            
            // retrieve active player properties
            var videoInfo = window['vimeo']['clips'][videoId]['video'];
            
            // get title and video height
            title  = videoInfo['title'];
            height = videoInfo['height'];
            
            // prepare quality information from video height
            qualityInfo = " ("+height+"p)";
            
            // log gathered information
            console.log( "[Vimeo Download] Making download button for \""+title+"\" ("+height+"p)" );
        }
        catch ( error )
        {
            // set quality information to empty string
            qualityInfo = "";
            
            // output a warning
            console.warn( "[Vimeo Download] Making download button for unknown video, error retrieving meta data:", error );
        }
        
        // make valid filename from title
        var filename = title.replace( /[<>:"\/\\|?*]/g, '' ) + '.mp4';
        
        // remove old button if existing
        var oldButton = find( '.button.dwnld' );
        oldButton && oldButton.remove();
        
        // create new button
        var button = document.createElement( 'a' );
        button.href = url;
        button.target = '_blank';
        button.download = filename;
        button.innerHTML = "⥥";
        button.title = "Download" + qualityInfo;
        button.setAttribute( 'class', "button dwnld" );
        button.setAttribute( 'style', 'display: inline-block; font-size: 1.7em; margin: -0.4em 0 0 0.4em; color: #fff' );
        
        // apply mouseover effect
        button.onmouseenter = function() { button.style.color = 'rgb(68,187,255)'; };
        button.onmouseleave = function() { button.style.color = '#fff'; };
        
        // find control bar and add button
        find( '.play-bar' ).appendChild( button );
    }
    
    // start looking for video player
    setup();
    
})();