前言

今早接到了一個在私人投資基金工作的朋友的訊息，因工作需要把聯發科的法說會整理成逐字稿，所以需要把法說會影片下載下來，然後把影片丟到逐字稿軟體再修改一些翻錯的地方，找到了法說會的連結進去後，一個樸實無華的網頁映入眼簾

大大的iframe影片加上一個聯發科橘的背景，跟簡簡單單的header / footer商標，原本她想說開開心心的按下影片右鍵，就可以準備去享受假日鬆一下了，殊不知….

Ok聯發科工程師太狠了，直接鎖右鍵的下載功能🥵

也沒辦法透過網路上那些丟網址然後幫你載影片的連結來載，因此來請我幫忙看看有什麼方法🆘

正文開始

這時身為前端工程師第一步就是報價（x
按右鍵打開原始碼（o

打開後，可以從html DOM tree很容易看出他用iframe來顯示影片

找到下方javascript下載資料的部分，可以發現最關鍵的一行是在最後loadIframe(“player”, playerLink + vodRssUrlVo[0].url);這個部分

然後我們可以知道，playerLink是定義在上方的一個字串，vodRssUrlVo[0].url是vodRssUrlVo那個list of object裡面的url參數，也是一個字串而已
所以我們把playerLink跟vodRssUrlVo[0].url合起來會變成如下的網址（自行去除跳脫字元，\u0026為&的意思）：
webplayer-cds.cdn.hinet.net/ottplayer/Video..

將上面那個網址貼到瀏覽器後，原本以為這樣找到影片的源頭就可以下載了，殊不知只出現一個全屏的影片，一樣被鎖定右鍵下載了

於是我們換個思路，直接從瀏覽器的開發者工具來監聽網路封包，打開Network視窗後按下重新整理，去看看chrome下載了什麼東西，我們可以發現右下角的initiator有一些從video.js來的檔案

點下其中的media_b2000001_0.ts後，可以知道他request的url是什麼

把上面的
https://mediatekvod-ott2b.cdn.hinet.net/vod_mediatek/_definst_/smil:mediatek/mediatek01_20220729160302/consult-hls-cl-pc.smil/media_b2000001_0.ts
貼到瀏覽器後，瀏覽器幫我們下載了一個.ts檔案，打開後正是我們要的影片檔！只是只有前十秒

這裡的ts不是我們熟悉的Typescript XD，而是一種影片的格式

以此類推，底下的編號_1, _2, _3…分別就是11~20秒, 21~30秒, 31~40秒的影片檔案，於是我們可以簡單寫的for迴圈來自動下載這些檔案

我們直接將影片拉到最後，得到最後一個片段的編號是377，然後我們可以把上面的code直接貼到開發者工具的視窗，按下enter後瀏覽器就會開始幫我們不斷下載資料，這邊要注意的細節是每個10秒片段的下載都要間隔一段時間（這邊設2秒），原因是聯發科網頁的後端如果短時間收到大量請求，只會接受最後一個，比如我如果直接for迴圈0~377，他只會給我377的資料而已，這樣其實是很合理的設計，因為正常的user不可能同時這麼高頻的切換影片片段，正常情況後端只要知道你現在看的片段的開始跟結束時間，然後給你那一小段附近的資料就好，不然網路頻寬會爆開，老闆收到帳單會直接讓你飛起來🤩（p.s. 我公司的網頁只是租個aws最便宜的機器，然後流量也不高，一個月就要付6000了，雲端的生意還是好賺na，三大雲端設備公司的財報增速也都普遍30% up）

抓完了一堆影片片段後，剩下的就是合起來輸出成一個mp4或mp3音檔了
這邊我採用的是ffmpeg套件的mac版，可以直接從官網下載，然後用來合併與轉檔我們剛剛載的一堆資料，下方直接提供shell script的code供參考：

這邊需求因為只是要音檔，所以我轉成mp3，如要影片，可以把最後那行#註解拿掉就可以了，然後只要將上面的code寫成一個檔案，比如檔名叫merge_video.sh，接著打開terminal，輸入sh ./merge_video.sh就可以跑起來了，大功告成！

總結

懶的寫總結拉，下班下班🤪

And that’s a wrap! Enjoy. 🎆

👏