Skillshare 字幕下载 v9

支持下载 Skillshare 的字幕 (.srt 文件) 以及 下载视频 (.mp4)

当前为 2021-03-11 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name:zh-CN Skillshare 字幕下载 v9
  3. // @name Skillshare Subtitle Downloader v9
  4. // @namespace https://greasyfork.org/users/5711
  5. // @version 9
  6. // @description:zh-CN 支持下载 Skillshare 的字幕 (.srt 文件) 以及 下载视频 (.mp4)
  7. // @description Download Skillshare Subtitle as .srt file
  8. // @author Zheng Cheng
  9. // @match https://www.skillshare.com/classes/*
  10. // @run-at document-start
  11. // @grant unsafeWindow
  12. // @license MIT
  13. // @supportURL guokrfans@gmail.com
  14. // ==/UserScript==
  15.  
  16. // 最初写于 2020-2-24
  17. // [工作原理]
  18. // 1. 下载一门课程全部字幕(多个 .srt 文件)原理是利用 transcriptCuesArray,字幕数据都在里面,进行格式转换+保存即可
  19. // 2. 下载当前视频的字幕(一个 .srt 文件)原理是用 videojs 里 textTracks 的 cue,进行格式转换+保存即可
  20.  
  21. // [更新日志]
  22. // v7(2021-3-11): 可以下载视频,包括当前视频,以及从当前视频开始一直到最后一个视频。
  23. // v8(2021-3-11): 整理代码
  24. // v9(2021-3-11): 改进了批量下载视频时,文件名的构造方法
  25.  
  26. // [注意]
  27. // 必须 @run-at document-start,因为批量下载视频的部分需要尽早拦截 XMLHttpRequest.prototype.setRequestHeader
  28.  
  29. (function () {
  30. 'use strict';
  31.  
  32. // ==== 这一段的目的,是为了把一个请求头存起来,之后我们自己发请求时用得上 ====
  33. // 有的 http 请求,比如获得视频信息的那个 https://edge.api.brightcove.com/playback/v1/accounts/3695997568001/videos/6173466475001
  34. // 需要一个请求头,Accept: application/json;pk=BCpkADawqM2OOcM6njnM7hf9EaK6lIFlqiXB0iWjqGWUQjU7R8965xUvIQNqdQbnDTLz0IAO7E6Ir2rIbXJtFdzrGtitoee0n1XXRliD-RH9A-svuvNW9qgo3Bh34HEZjXjG4Nml4iyz3KqF
  35. // pk 是 policy key 的缩写(因为响应头里面明确写了 Policy-Key-Raw )
  36. // 由于这个 Accept: application/json;pk= 完全无法在页面中获取到(应该是用代码生成的)我们只能使用这样的截取方式
  37.  
  38. var request_header_accept = null
  39. XMLHttpRequest.prototype.real_setRequestHeader = XMLHttpRequest.prototype.setRequestHeader
  40. XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
  41. if (header == 'Accept' && value.startsWith('application/json;pk=')) {
  42. request_header_accept = value; // 如果两个条件都对,就存起来
  43. console.log(`找到了!`);
  44. console.log(request_header_accept);
  45. // 还好找到了这样的方式,不然我就去写 Chrome Extension 了(麻烦多了,安装也麻烦,开发也麻烦)
  46. }
  47. this.real_setRequestHeader(header, value);
  48. }
  49. // ==== 这一段的目的,是为了把一个请求头存起来,之后我们自己发请求时用得上 ====
  50.  
  51.  
  52. // 初始化变量
  53. var sessions = null; // 存一个 sessions 数组 (Skillshare 提供的)
  54. var transcriptCuesArray = null; // 用途同上
  55. var div = document.createElement('div');
  56. var button = document.createElement('button'); // 下载全部字幕的按钮
  57. var button2 = document.createElement('button'); // 下载当前视频字幕的按钮
  58. var button3 = document.createElement('button'); // 下载当前视频的按钮
  59. var button4 = document.createElement('button'); // 下载全部视频的按钮
  60. var title_element = document.querySelector("div.class-details-header-title"); // 标题元素
  61.  
  62. function insertAfter(newNode, referenceNode) {
  63. referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  64. }
  65.  
  66. // 注入
  67. async function inject_our_script() {
  68. transcriptCuesArray = await get_transcriptCuesArray();
  69. var subtitle_ids = Object.keys(transcriptCuesArray); // ['3150718', '3150719', '3150720', ...]
  70. var subtitle_count = subtitle_ids.length
  71.  
  72. // 此按钮点击后:下载这门课的所有字幕 (得到多个文件)
  73. var button_text = `下载所有字幕 (${subtitle_count} .srt 文件)`;
  74. button.textContent = button_text;
  75. button.addEventListener('click', download_subtitles);
  76.  
  77. // 此按钮点击后:下载当前视频的一个字幕 (得到一个文件)
  78. button2.textContent = get_download_current_episode_button_text()
  79. button2.addEventListener('click', download_current_episode_subtitles);
  80.  
  81. // 此按钮点击后:下载当前视频
  82. button3.textContent = get_download_current_video_button_text()
  83. button3.addEventListener('click', download_current_episode_video);
  84.  
  85. var button_css = `
  86. font-size: 16px;
  87. padding: 4px 18px;
  88. `;
  89.  
  90. var button2_css = `
  91. font-size: 16px;
  92. padding: 4px 18px;
  93. margin-left: 10px;
  94. `;
  95.  
  96. var div_css = `
  97. margin-bottom: 10px;
  98. `;
  99.  
  100. button.setAttribute('style', button_css);
  101. button2.setAttribute('style', button2_css);
  102. button3.setAttribute('style', button2_css);
  103. div.setAttribute('style', div_css);
  104.  
  105. div.appendChild(button);
  106. div.appendChild(button2);
  107. div.appendChild(button3);
  108.  
  109. // 按钮4
  110. button4.textContent = "从当前视频开始, 下载到最后一个视频"
  111. button4.addEventListener('click', download_all_video);
  112. button4.setAttribute('style', button2_css);
  113. div.appendChild(button4);
  114.  
  115. insertAfter(div, title_element);
  116. }
  117.  
  118. // 下载当前这集视频
  119. function download_current_episode_video() {
  120. var vjs = videojs(document.querySelector('video'))
  121. var video_link = find_video_link(vjs.mediainfo.sources)
  122. if (video_link != null) {
  123. var filename = `${get_filename()}.mp4`
  124. fetch(video_link)
  125. .then(res => res.blob())
  126. .then(blob => {
  127. downloadString(blob, 'video/mp4', filename);
  128. });
  129. }
  130. }
  131.  
  132. // 下载单个视频, 用法参照其他地方
  133. function download_video(video_link, filetype, filename) {
  134. return new Promise((resolve, reject) => {
  135. fetch(video_link)
  136. .then(res => res.blob())
  137. .then(blob => {
  138. downloadString(blob, filetype, filename);
  139. resolve(true);
  140. }).catch(err => reject(err));
  141. })
  142. }
  143.  
  144. // 输入: sources 数组, 来自于网络请求的返回
  145. // 输出: (字符串) 一个视频链接
  146. function find_video_link(sources) {
  147. var video_link = null;
  148.  
  149. // 在数组里找到 *.mp4 的链接
  150. var array = sources;
  151. for (var i = 0; i < array.length; i++) {
  152. var s = array[i];
  153. if (s.container && s.container == 'MP4' && s.height >= 720) {
  154. video_link = s.src;
  155. break;
  156. }
  157. }
  158.  
  159. return video_link
  160. }
  161.  
  162. // 把 cue 遍历一下,得到一个特定格式的对象数组
  163. function get_current_episode_content_array() {
  164. var vjs = videojs(document.querySelector('video'))
  165. var cues = vjs.textTracks()[0].cues
  166. var array = []
  167. for (var i = 0; i < cues.length; i++) {
  168. var cue = cues[i]
  169. var obj = {
  170. start: cue.startTime,
  171. end: cue.endTime,
  172. text: cue.text,
  173. }
  174. array.push(obj);
  175. }
  176. return array;
  177. }
  178.  
  179. // 下载当前集字幕
  180. async function download_current_episode_subtitles() {
  181. var array = get_current_episode_content_array()
  182. var srt = parse_content_array_to_SRT(array);
  183. var filename = `${get_filename()}.srt`
  184. downloadString(srt, "text/plain", filename);
  185. }
  186.  
  187. // CSRF
  188. function csrf() {
  189. return SS.serverBootstrap.parentClassData.formData.csrfTokenValue
  190. }
  191.  
  192. // 拿到当前课程的 URL (不带任何参数或者 section,不带 /projects 或 /transcripts 在 URL 最后)
  193. function course_url() {
  194. var url1 = SS.serverBootstrap.loginPopupRedirectTo
  195. var url2 = window.location.origin + window.location.pathname
  196. if (url1) {
  197. return url1
  198. } else {
  199. return url2
  200. }
  201. // return document.querySelector('meta[property="og:url"]').content // 这个不可靠
  202. // 比如:
  203. // https://www.skillshare.com/classes/Logo-Design-Mastery-The-Full-Course/1793713747
  204. }
  205.  
  206. // 返回一个 URL
  207. function json_url() {
  208. return `${course_url()}/transcripts?format=json`
  209. // https://www.skillshare.com/classes/Logo-Design-Mastery-The-Full-Course/1793713747/transcripts?format=json
  210. }
  211.  
  212. // 发 http 请求,拿到 transcriptCuesArray
  213. // 调用例子:var result = await get_transcriptCuesArray();
  214. async function get_transcriptCuesArray() {
  215. return new Promise(function (resolve, reject) {
  216. var url = json_url()
  217. fetch(url, {
  218. headers: {
  219. 'x-csrftoken': csrf(),
  220. 'accept': 'application/json, text/javascript, */*; q=0.01'
  221. }
  222. })
  223. .then(response => response.json())
  224. .then(data => {
  225. resolve(data.transcriptCuesArray)
  226. }).catch(e => {
  227. reject(e);
  228. })
  229. })
  230. }
  231.  
  232. // 输入: id
  233. // 输出: sessions 数组里的一个对象
  234. function id_to_obj(id) {
  235. var array = sessions
  236. for (var i = 0; i < array.length; i++) {
  237. var one = array[i];
  238. if (one.id == id) {
  239. return one
  240. }
  241. }
  242. return null
  243. }
  244.  
  245. // videoId: "bc:6053324155001"
  246. function video_id_to_obj(video_id) {
  247. var string = `bc:${video_id}`
  248. var array = sessions
  249. for (var i = 0; i < array.length; i++) {
  250. var one = array[i];
  251. if (one.videoId == string) {
  252. return one
  253. }
  254. }
  255. return null
  256. }
  257.  
  258. function get_filename_by_video_id(video_id) {
  259. var obj = video_id_to_obj(video_id)
  260. var rank = obj.displayRank
  261. var filename = `${rank}. ${safe_filename(obj.title)}`
  262. return filename
  263. }
  264.  
  265. // 输入: id
  266. // 输出: 文件名 (xxx.srt)
  267. function get_filename_by_id(id) {
  268. var obj = id_to_obj(id);
  269. var rank = obj.displayRank;
  270. var title = obj.title
  271. var filename = `${rank}.${safe_filename(title)}.srt`
  272. return filename
  273. }
  274.  
  275. // 下载所有集的字幕
  276. async function download_subtitles() {
  277. for (let key in transcriptCuesArray) {
  278. var value = transcriptCuesArray[key];
  279. var srt = parse_content_array_to_SRT(value.content);
  280. var filename = get_filename_by_id(key)
  281. downloadString(srt, "text/plain", filename);
  282.  
  283. await sleep(1000);
  284. // 如果不 sleep,下载大概11个文件就会停下来(不会报错,但就是停下来了)
  285. // sleep 可以把全部42个文件下载下来
  286. }
  287. }
  288.  
  289. // 从当前视频开始下载
  290. async function download_all_video() {
  291. // 当前 session
  292. var startingSession = unsafeWindow.SS.serverBootstrap.pageData.videoPlayerData.startingSession
  293.  
  294. // 全部 session
  295. var sessions = unsafeWindow.SS.serverBootstrap.pageData.videoPlayerData.units[0].sessions
  296.  
  297. for (var i = 0; i < sessions.length; i++) {
  298. var session = sessions[i];
  299. var displayRank = session.displayRank;
  300. if (displayRank >= startingSession.displayRank) { // 从当前视频开始下载(包括当前视频)一直下载到最后一个
  301. var video_id = session.videoId.split(':')[1]; // 视频 ID
  302. var response = await get_single_video_data(video_id); // 拿到 JSON 返回
  303.  
  304. var video_link = find_video_link(response.sources); // 视频链接
  305. var filename = `${get_filename_by_video_id(response.id)}.mp4`; // 文件名
  306.  
  307. if (video_link.startsWith('http://')) {
  308. video_link = video_link.replace('http://', 'https://')
  309. }
  310.  
  311. // console.log(video_link);
  312. // console.log(filename);
  313. // console.log(response);
  314. // console.log('--------------');
  315. await download_video(video_link, 'video/mp4', filename); // 下载
  316. }
  317. }
  318. }
  319.  
  320. // 返回账户 ID
  321. // 举例: 3695997568001
  322. function get_account_id() {
  323. return unsafeWindow.SS.serverBootstrap.pageData.videoPlayerData.brightcoveAccountId;
  324. }
  325.  
  326. // 输入: id
  327. // 输出: JSON (视频数据)
  328. function get_single_video_data(video_id) {
  329. // https://edge.api.brightcove.com/playback/v1/accounts/3695997568001/videos/6234379709001
  330. var account_id = get_account_id();
  331. var url = `https://edge.api.brightcove.com/playback/v1/accounts/${account_id}/videos/${video_id}`
  332. return new Promise(function (resolve, reject) {
  333. fetch(url, {
  334. headers: {
  335. "Accept": request_header_accept
  336. }
  337. })
  338. .then(response => response.json())
  339. .then(data => {
  340. resolve(data)
  341. }).catch(e => {
  342. reject(e);
  343. })
  344. })
  345. }
  346.  
  347. // 把指定格式的数组
  348. // 转成 SRT
  349. // 返回字符串
  350. // var content_array_example = [
  351. // {
  352. // start: 0,
  353. // end: 8.3,
  354. // text: "hi"
  355. // },
  356. // // ...
  357. // ];
  358. function parse_content_array_to_SRT(content_array) {
  359. if (content_array === '') {
  360. return false;
  361. }
  362.  
  363. var result = '';
  364. var BOM = '\uFEFF';
  365. result = BOM + result; // store final SRT result
  366.  
  367. for (var i = 0; i < content_array.length; i++) {
  368. var one = content_array[i];
  369. var index = i + 1;
  370. var content = one.text
  371. var start = one.start
  372. var end = one.end
  373.  
  374. // we want SRT format:
  375. /*
  376. 1
  377. 00:00:01,939 --> 00:00:04,350
  378. everybody Craig Adams here I'm a
  379. 2
  380. 00:00:04,350 --> 00:00:06,720
  381. filmmaker on YouTube who's digging
  382. */
  383. var new_line = "\n";
  384. result = result + index + new_line;
  385. // 1
  386.  
  387. var start_time = process_time(parseFloat(start));
  388. var end_time = process_time(parseFloat(end));
  389. result = result + start_time;
  390. result = result + ' --> ';
  391. result = result + end_time + new_line;
  392. // 00:00:01,939 --> 00:00:04,350
  393.  
  394. result = result + content + new_line + new_line;
  395. }
  396. return result;
  397. }
  398.  
  399.  
  400. // 处理时间. 比如 start="671.33" start="37.64" start="12" start="23.029"
  401. // 处理成 srt 时间, 比如 00:00:00,090 00:00:08,460 00:10:29,350
  402. function process_time(s) {
  403. s = s.toFixed(3);
  404. // 超棒的函数, 不论是整数还是小数都给弄成3位小数形式
  405. // 举个柚子:
  406. // 671.33 -> 671.330
  407. // 671 -> 671.000
  408. // 注意函数会四舍五入. 具体读文档
  409.  
  410. var array = s.split('.');
  411. // 把开始时间根据句号分割
  412. // 671.330 会分割成数组: [671, 330]
  413.  
  414. var Hour = 0;
  415. var Minute = 0;
  416. var Second = array[0]; // 671
  417. var MilliSecond = array[1]; // 330
  418. // 先声明下变量, 待会把这几个拼好就行了
  419.  
  420. // 我们来处理秒数. 把"分钟"和"小时"除出来
  421. if (Second >= 60) {
  422. Minute = Math.floor(Second / 60);
  423. Second = Second - Minute * 60;
  424. // 把 秒 拆成 分钟和秒, 比如121秒, 拆成2分钟1秒
  425.  
  426. Hour = Math.floor(Minute / 60);
  427. Minute = Minute - Hour * 60;
  428. // 把 分钟 拆成 小时和分钟, 比如700分钟, 拆成11小时40分钟
  429. }
  430. // 分钟,如果位数不够两位就变成两位,下面两个if语句的作用也是一样。
  431. if (Minute < 10) {
  432. Minute = '0' + Minute;
  433. }
  434. // 小时
  435. if (Hour < 10) {
  436. Hour = '0' + Hour;
  437. }
  438. // 秒
  439. if (Second < 10) {
  440. Second = '0' + Second;
  441. }
  442. return Hour + ':' + Minute + ':' + Second + ',' + MilliSecond;
  443. }
  444.  
  445. function sleep(ms) {
  446. return new Promise(resolve => setTimeout(resolve, ms));
  447. }
  448.  
  449. // copy from: https://gist.github.com/danallison/3ec9d5314788b337b682
  450. // Example downloadString(srt, "text/plain", filename);
  451. function downloadString(text, fileType, fileName) {
  452. var blob = new Blob([text], {
  453. type: fileType
  454. });
  455. var a = document.createElement('a');
  456. a.download = fileName;
  457. a.href = URL.createObjectURL(blob);
  458. a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
  459. a.style.display = "none";
  460. document.body.appendChild(a);
  461. a.click();
  462. document.body.removeChild(a);
  463. setTimeout(function () {
  464. URL.revokeObjectURL(a.href);
  465. }, 11500);
  466. }
  467.  
  468. // 切换了视频会触发这个事件
  469. // 实测好像点其他地方也会触发这个事件,
  470. document.addEventListener("selectionchange", function () {
  471. button2.textContent = get_download_current_episode_button_text()
  472. })
  473.  
  474. function get_download_current_episode_button_text() {
  475. return `下载当前字幕 (.srt)`
  476. // return `下载当前字幕 (${get_filename()}.srt)`
  477. }
  478.  
  479. function get_download_current_video_button_text() {
  480. return `下载当前视频 (.mp4)`
  481. }
  482.  
  483. // 返回当前正在播放的视频标题
  484. function get_current_title() {
  485. var li = document.querySelector('li.session-item.active')
  486. var title = li.querySelector('.session-item-title')
  487. return title.innerText;
  488. }
  489.  
  490. // 转换成安全的文件名
  491. function safe_filename(string) {
  492. return string.replace(':', '-')
  493. }
  494.  
  495. // 当前视频的安全文件名
  496. function get_filename() {
  497. return safe_filename(get_current_title())
  498. }
  499.  
  500. // 程序入口
  501. function main() {
  502. // 如果有标题才执行
  503. title_element = document.querySelector("div.class-details-header-title");
  504. if (title_element) {
  505. inject_our_script();
  506. sessions = unsafeWindow.SS.serverBootstrap.pageData.unitsData.units[0].sessions
  507. }
  508. }
  509.  
  510. setTimeout(main, 2000);
  511. })();