Greasy Fork is available in English.

Youtube Subtitle Downloader v3

download youtube COMPLETE subtitle

Versión del día 11/4/2016. Echa un vistazo a la versión más reciente.

  1. // ==UserScript==
  2. // @name Youtube Subtitle Downloader v3
  3. // @include http://*youtube.com/watch*
  4. // @include https://*youtube.com/watch*
  5. // @author Cheng Zheng
  6. // @copyright 2009 Tim Smart; 2011 gw111zz; 2013 Cheng Zheng;
  7. // @license GNU GPL v3.0 or later. http://www.gnu.org/copyleft/gpl.html
  8. // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  9. // @version 3
  10. // @grant GM_xmlhttpRequest
  11. // @namespace https://greasyfork.org/users/5711
  12. // @description download youtube COMPLETE subtitle
  13. // ==/UserScript==
  14.  
  15.  
  16. /*
  17. Third Author : Cheng Zheng
  18. Email : guokrfans@gmail.com
  19. Last update : 2015/7/30
  20. Github: https://github.com/1c7/Youtube-Auto-Subtitle-Download
  21. Code comment are written in Chinese.
  22. If you need help, just let me know.
  23. */
  24.  
  25.  
  26.  
  27.  
  28. var PLAYER = unsafeWindow.document.getElementById('movie_player'),
  29. VIDEO_ID = unsafeWindow.ytplayer.config.args.video_id,
  30. TITLE = unsafeWindow.ytplayer.config.args.title,
  31. caption_array = [];
  32.  
  33.  
  34.  
  35.  
  36. /*
  37. process_time 这个函数是为了处理时间格式.
  38. 因为 Youtube 没直接提供 srt 的格式,
  39. Youtube 提供的格式类似这样: start="671.33" start="37.64" start="12" start="23.029"
  40. 671.33 这个是字幕开始的时间, 单位是秒. 小数点后是毫秒.
  41. 我们处理成 srt 格式的时间, 比如 00:00:00,090 00:00:08,460 00:10:29,350
  42. */
  43. function process_time(s){
  44. s = parseFloat(s).toFixed(3);
  45. // 超棒的函数, 可以把不论是整数还是小数它都给你弄成3位小数形式的数字.
  46. // 举个柚子:
  47. // 671.33 -> 671.330
  48. // 671 -> 671.000
  49. // 注意, 这个函数会四舍五入. 具体可以去读文档
  50.  
  51. var array = s.split('.');
  52. // 把开始时间根据句号分割
  53. // 671.330 会分割成数组: [671, 330]
  54.  
  55. var Hour = 0;
  56. var Minute = 0;
  57. var Second = array[0]; // 671
  58. var MilliSecond = array[1]; // 330
  59. // 先声明一下变量, 待会把这几个拼好就行了。
  60.  
  61. // 我们来处理秒数. 把"分钟"和"小时"除出来。
  62. if(Second >= 60){
  63.  
  64. Minute = Math.floor(Second / 60);
  65. Second = Second - Minute * 60;
  66. // 我们把 秒 拆成 分钟和秒, 比如121秒, 拆成2分钟1秒
  67.  
  68. Hour = Math.floor(Minute / 60);
  69. Minute = Minute - Hour * 60;
  70. // 我们把 分钟 拆成 小时和分钟, 比如700分钟, 拆成11小时40分钟
  71. }
  72. // 处理分钟,如果位数不够两位就变成两位,下面两个if语句的作用也是一样。
  73. if (Minute < 10){
  74. Minute = '0' + Minute;
  75. }
  76. // 处理小时
  77. if (Hour < 10){
  78. Hour = '0' + Hour;
  79. }
  80. // 处理秒
  81. if (Second < 10){
  82. Second = '0' + Second;
  83. }
  84.  
  85. return Hour + ':' + Minute + ':' + Second + ',' + MilliSecond;
  86. }
  87.  
  88.  
  89.  
  90.  
  91.  
  92. // 下载字幕用的函数.
  93. function download_subtitle (selector) {
  94.  
  95. var caption = caption_array[selector.selectedIndex - 1];
  96. if (!caption) return;
  97. language_name_1c7 = caption.lang_name;
  98.  
  99. var url = 'https://video.google.com/timedtext?hl=' + caption.lang_code
  100. + '&lang=' + caption.lang_code
  101. + '&name=' + caption.name
  102. + '&v=' + VIDEO_ID;
  103. console.log(url);
  104. // 加了这句之后, 下载字幕时控制台会输出字幕的url地址.
  105.  
  106. jQuery.get(url).done(function(r){
  107. var text = r.getElementsByTagName('text');
  108. // 拿到所有的text节点
  109. var result = "";
  110. // 保存结果的字符串
  111. for(var i=0; i<text.length; i++){
  112. var index = i+1;
  113. // 这个是字幕的索引, 从1开始的, 但是因为我们的循环是从0开始的, 所以加个1
  114. var content = text[i].textContent.replace(/\n/g, " ");
  115. // content 保存的是字幕内容 - 这里把换行换成了空格, 因为 Youtube 显示的多行字幕中间会有个\n, 如果不加这个replace. 两行的内容就会黏在一起.
  116. var start = text[i].getAttribute('start');
  117. //console.log(start);
  118. var end = $(text[i+1]).attr('start');
  119. if(!end){
  120. end = start + 5;
  121. }
  122. //console.log(end);
  123. // ==== 开始处理数据, 把数据保存到result里. ====
  124. result = result + index + '\r\n';
  125. // 把序号加进去
  126. var start_time = process_time( parseFloat(start) );
  127. result = result + start_time;
  128. //console.log(start_time);
  129. // 拿到 开始时间 之后往result字符串里存一下
  130. result = result + ' --> ';
  131. // 标准srt时间轴: 00:00:01,850 --> 00:00:02,720
  132. // 我们现在加个中间的箭头..
  133. var end_time = process_time( parseFloat(end) );
  134. result = result + end_time + '\r\n';
  135. //console.log(end_time);
  136. // 拿到 结束时间 之后往result字符串里存一下
  137. result = result + content + '\r\n\r\n';
  138. // 加字幕内容
  139. }
  140. result = result.replace(/&#39;/g, "'");
  141. // 字幕里会有html实体字符..所以我们替换掉
  142.  
  143.  
  144. var title = '(' + language_name_1c7 + ')' + TITLE + '.srt';
  145. downloadFile(title, result);
  146. // 下载
  147.  
  148. }).fail(function() {
  149. alert("Error: No response from server.");
  150. });
  151.  
  152.  
  153. selector.options[0].selected = true;
  154. // 下载完之后把选项框选回第一个元素. 也就是 Download captions.
  155. }
  156.  
  157.  
  158. // 载入字幕有多少种语言的函数, 然后加到那个选项框里
  159. function load_language_list (select) {
  160. GM_xmlhttpRequest({
  161. method: 'GET',
  162. url: 'https://video.google.com/timedtext?hl=en&v=' + VIDEO_ID + '&type=list',
  163. onload: function( xhr ) {
  164. var caption, option, caption_info,
  165. captions = new DOMParser().parseFromString(xhr.responseText, "text/xml").getElementsByTagName('track');
  166. if (captions.length === 0) {
  167. return select.options[0].textContent = 'No captions.';
  168. }
  169. for (var i = 0, il = captions.length; i < il; i++) {
  170. caption = captions[i];
  171. option = document.createElement('option');
  172. caption_info = {
  173. name: caption.getAttribute('name'),
  174. lang_code: caption.getAttribute('lang_code'),
  175. lang_name: caption.getAttribute('lang_translated')
  176. };
  177. caption_array.push(caption_info);
  178. option.textContent = caption_info.lang_name;
  179. select.appendChild(option);
  180. }
  181. select.options[0].textContent = 'Download captions.';
  182. select.disabled = false;
  183. }
  184. });
  185. }
  186.  
  187.  
  188.  
  189. function inject_our_script(){
  190. var div = document.createElement('div'),
  191. select = document.createElement('select'),
  192. option = document.createElement('option'),
  193. controls = document.getElementById('watch7-headline'); // 装视频标题的div
  194.  
  195. div.setAttribute( 'style', 'margin-bottom: 10px; display: inline-block; border: 1px solid rgb(0, 183, 90); cursor: pointer; color: rgb(255, 255, 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: #00B75A;margin-left: 4px; ');
  196.  
  197. select.id = 'captions_selector';
  198. select.disabled = true;
  199. select.setAttribute( 'style', 'border: 1px solid rgb(0, 183, 90); cursor: pointer; color: rgb(255, 255, 255); background-color: #00B75A;');
  200. option.textContent = 'Loading...';
  201. option.selected = true;
  202. select.appendChild(option);
  203. // 添加这个选项, 这个选项默认被选中, 文字是"Loading..."
  204. select.addEventListener('change', function() {
  205. download_subtitle(this);
  206. }, false);
  207. // 事件侦听.
  208. div.appendChild(select);
  209. // 往新建的div里面放入select
  210. controls.appendChild(div);
  211. // 往页面上添加这个div
  212. load_language_list(select);
  213. // 这个是用来载入有多少字幕的函数, 不是下载字幕的函数
  214. var a = document.createElement('a');
  215. a.style.cssText = 'display:none;';
  216. a.setAttribute("id", "ForSubtitleDownload");
  217. var body = document.getElementsByTagName('body')[0];
  218. body.appendChild(a);
  219. // 这个元素用于下载.
  220. }
  221.  
  222.  
  223.  
  224.  
  225.  
  226. /*
  227.  
  228. 重点总结先:我没能解决必须手动刷新出按钮的问题。具体原因如下。
  229.  
  230. Youtube 的跳转方式是 Ajax, 而 Tampermonkey 的注入方式是刷新才注入.
  231. 这就造成了换了视频之后还得手动刷新一遍才行.
  232.  
  233. 为了不手动刷新,那必须有一种办法检测页面是否 Ajax 刷新了。如果刷新了就马上注入。
  234. 但是别忘了,你直接点左上角 LOGO 也是 Ajax 载入,然后首页当然不是播放页,我们就不用注入了。
  235.  
  236. 所以,
  237. 1. 得检测是否 Ajax 刷新完成了
  238. 2. 得检测是否是播放页。其他页面注入没用。
  239.  
  240.  
  241. 试过的一些方法如下:
  242. 1. 检测标题的 change event.
  243.  
  244. 这个是 Youtube 标题
  245. <span id="eow-title" class="watch-title " dir="ltr" title="Why Do We Wear Clothes?">
  246. Why Do We Wear Clothes?
  247. </span>
  248.  
  249. 但实际发现监听 change 没用, 这个是 Form Event.
  250. https://api.jquery.com/change/
  251.  
  252.  
  253. 如下这个也没用.
  254. $(document).ajaxComplete(function() {
  255. alert("asdasd");
  256. });
  257.  
  258. 没用
  259. $(unsafeWindow.document).ajaxComplete(function() {
  260. alert("asdasd");
  261. });
  262.  
  263.  
  264.  
  265. */
  266.  
  267. (function () {
  268.  
  269. inject_our_script();
  270. })();
  271.  
  272.  
  273.  
  274.  
  275.  
  276.  
  277. // 下面这个函数不是我写的。我之前写的那种下载方法在 Chrome 更新之后失效了。不能指定下载时的文件名。
  278. // 后来搜索了下找到这个解决方案就直接复制过来用了。
  279. // 复制自: http://www.alloyteam.com/2014/01/use-js-file-download/
  280. function downloadFile(fileName, content){
  281. var aLink = document.createElement('a');
  282. var blob = new Blob([content]);
  283. var evt = document.createEvent("HTMLEvents");
  284. evt.initEvent("click", false, false);
  285. aLink.download = fileName;
  286. aLink.href = URL.createObjectURL(blob);
  287. aLink.dispatchEvent(evt);
  288. }
  289.  
  290.  
  291.  
  292.  
  293.  
  294.