Apps Script : 解析出 YT 影片字幕設定

 HTML5 FUN 的 Audio Player 可以用來播放 YouTube 的影片，並加上兩種語言的字幕。它的字幕來源可以是自製的字幕檔案，當然也能直接由 YouTube 的影片擷取。官方的建議當然是直接呼叫 YouTube 的 API 來取得字幕內容，不過， Audio Player 是下載 YouTube 影片的頁面，然後由網頁原始碼來「挖金」。利用 JavaScript 能下載網頁內容，主要是透過 CORS proxy，最近我愛用的 CORS proxy 開始收費了，免費版有時會抓不到影片頁面，所以我幫 Audio Player 加上了備援的方案，使用 Google Apps Script 幫忙擷取內容；本以為天衣無縫了，誰知道，原來 B 計畫根本就沒成功過！

明明就是一個簡單的流程：

▶️▶️ 給網址 ▶️▶️  抓文字內容 ▶️▶️ 回傳文字內容

為什麼使用  Google Apps Script 抓回來的 YouTube 影片網頁內容和利用其它方式抓回來的會不一樣？

試了兩天，終於找到兩個關鍵：

• YouTube 的頁面有分桌機版與行動版。
• YouTube 的頁面會依請求端的語言設定，給不同的內容。

▋ 強制使用桌機版

前面提到 Audio Player 是由 YT 影片的網頁原始碼來「挖金」，什麼是「金」呢？

在 YT 影片的網頁原始碼中，會帶有字幕內容在哪一個網址的資訊，只要找到關鍵字「captionTracks」，就會看到一堆網址，Audio Player 就是將些資訊擷取出來用的，假設抓回來的網頁內容是 html，使用這樣的 regular expression 語法：

html.match(/"captionTracks":(\[.*?\])/)

但是 Google Apps Script 抓回來的，都是不完整的原始碼，今天發現原來它抓回來的內容，跟 YouTube 行動版的內容是一樣的(所以「都是不完整的原始碼」應該只是抓錯版本了)；從另一個角度來說，那我們只要強迫它抓桌機版的頁面，問題不就可以解決了？經過實證，還真的可以！

怎麼強制 Google Apps Script 去抓 YouTube 影片的桌機版內容呢？

其實很簡單，如果強制用桌機版，就在 YT 影片的網址加上這個參數：

• app=desktop

所以像這個 TED 的影片網址：

https://www.youtube.com/watch?v=yVq8r9w29DI

就改為：

https://www.youtube.com/watch?v=yVq8r9w29DI&app=desktop

利用 Google Apps Script 來抓 YT 的頁面，只要使用有加上 app=desktop 的網址，就能在抓回來的原始碼中，抓到正確的 「captionTracks」內容了。

那反過來說，想強制使用行動版的話，在影片的網址要加上什麼參數？

• app=m

▋ 強制使用中文頁面

前面利用在 YT 影片網址加上 app=desktop 解決挖不到「金」的問題，後來又發現頁面不是使用中文的問題。沒關係，「大魔王」都解決了，語言的問題，以前在玩 Google 的其它服務也遇過，直接在網址中指定就好了，加上：

• hl=zh-TW

利用 hl 的參數可以指定頁面中要使用哪一種語言，而 zh-TW 是繁體中文的代碼，所以我只要將前面的網址繼續接龍，變成：

https://www.youtube.com/watch?v=yVq8r9w29DI&app=desktop&hl=zh-TW

好了，大功告成！

研究兩天，中間一直摸不著頭緒，沒想到下午去爬個樟山寺，吸收完大自然的能量以後，就通了。這關過了，應該可以讓 Audio Player 繼續演進，讓它直接抓 YT 自動翻譯的字幕內容，以翻譯為中文來說，其實只要在字幕的網址後面再加上「tlang=zh-TW」的參數就可以了，想起來應該不會太難(done)。

▋ 相關連結

• 雄: HTML5 FUN : PLAYER 增強聽讀能力的小工具