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. })();