m3u8 視頻在線提取工具

工具在線地址，推薦使用 chrome 瀏覽器。

研發背景

• m3u8視頻格式簡介

  • m3u8視頻格式原理：將完整的視頻拆分紅多個 .ts 視頻碎片，.m3u8 文件詳細記錄每一個視頻片斷的地址。
  • 視頻播放時，會先讀取 .m3u8 文件，再逐個下載播放 .ts 視頻片斷。
  • 經常使用於直播業務，也經常使用該方法規避視頻竊取的風險。加大視頻竊取難度。

• 鑑於 m3u8 以上特色，沒法簡單經過視頻連接下載，需使用特定下載軟件。

  • 但軟件下載過程繁瑣，試錯成本高。
  • 使用軟件的下載狀況不穩定，常出現瀏覽器正常播放，但軟件下載速度慢，甚至沒法正常下載的狀況。
  • 軟件被編譯打包，沒法瞭解內部運行機制，不清楚裏面到底發生了什麼。
• 基於以上緣由，開發了本工具。

  

工具特色

• 無需安裝，打開網頁便可用。
• 強制下載現有片斷，無需等待完整視頻下載完成。
• 操做直觀，精確到視頻碎片的操做。

功能說明

【解析下載】輸入 m3u8 連接，點擊下載視頻。
【跨域複製代碼】當資源出現跨域限制時，點擊複製頁面代碼，在視頻頁面的控制檯輸入。將工具注入到視頻頁面中，解決跨域問題。
【從新下載錯誤片斷】當部分視頻片斷下載失敗時，點擊該按鈕，從新下載錯誤片斷。
【強制下載現有片斷】將已經下載好的視頻片斷強制整合下載。能夠提早觀看已經下載的片斷。該操做不影響當前下載進程。
【片斷Icon】對應每個 .ts 視頻片斷的下載狀況。「灰色」：待下載，「綠色」：下載成功，「紅色」：下載失敗。點擊紅色 Icon 可從新下載對應錯誤片斷。

使用說明

• 打開視頻目標網頁，鼠標右鍵「檢查」，或者「開發者工具」，或者按下鍵盤的「F12」鍵
• 找到 network，輸入 m3u8，過濾 m3u8 文件。
• 刷新頁面，監聽 m3u8 文件。

  

• 找到目標m3u8文件，查看文件內容，是否符合格式。

  • 以下爲索引文件，不是真正的視頻 m3u8 文件

    

  • 通常內容有許多 ts 字眼的文件纔是咱們須要的視頻 m3u8 文件。

    

• 拷貝這個 m3u8 文件的連接。

  

• 打開工具頁面，輸入連接，點擊「解析下載」。
• 出現片斷 Icon，則證實操做成功，耐心等待視頻下載。
• 片斷所有下載成功，將觸發瀏覽器自動下載，下載整合後的完整視頻。
• 若是有片斷下載失敗，則點擊對應片斷，或點擊「從新下載錯誤片斷」按鈕。從新下載錯誤片斷。

  

異常狀況

【沒法下載，沒有顯示片斷Icon】

• 通常因爲跨域形成。
• 點擊「跨域複製代碼」按鈕。
• 打開視頻目標網頁的「開發者工具界面」，找到 console 欄。

  

• 粘貼剛剛複製的內容，回車。
• 滾動頁面到底部，發現工具顯示在底部。而後在注入的工具中正常使用。

  

【下載後的視頻資源不可看】

• 網站對視頻源進行了加密操做。不一樣的視頻網站有不一樣的算法操做。沒法通用處理。
• 通常網站不會有這種狀況。愛奇藝，騰訊等大視頻網站纔會有該安全措施。

  

實現思路

【下載並解析 m3u8 文件】

• 直接經過 ajax 的 get 請求 m3u8 文件。獲得 m3u8 文件的內容字符串。讀取字符串進行解析。
• 須要注意的是，m3u8 文件不是 json 格式，不能將 dataType 設置爲 json。

【隊列下載 ts 視頻片斷】

• 一樣使用 ajax 的 get 請求視頻碎片，一個 ajax 請求一個 ts 視頻碎片，但關鍵點在於，下載的是視頻文件，屬於二進制數據，須要將 responseType 請求頭設置爲 arraybuffer。xhr.responseType = 'arraybuffer'
• 使用隊列下載，是由於視頻碎片太多，不可能一次性請求所有。須要分批下載。
• 同時因爲瀏覽器同源併發限制，視頻同時請求數不能過多。本工具設置爲併發下載數爲 10。

【組合 ts 視頻片斷】

• 看似很難，但其實使用 Blob 對象便可將多個 ts 文件整合成一個文件。new Blob()，傳入 ts 文件數組。
• 這裏有個小細節須要注意，須要在 new Blob 的第二個參數中設置文件的 MIME 類型，不然將默認爲 txt 文件。 const fileBlob = new Blob(fileDataList, { type: 'video/MP2T' })

【自動下載】

• 下載，固然先要得到文件連接，即剛生成的 Blob 文件連接。
• 使用 URL.createObjectURL，便可獲得瀏覽器內存中，Blob 的文件連接。URL.createObjectURL(fileBlob)
• 最後，使用 a 標籤的 a.download 屬性，將 a 標籤設置爲下載功能。主動調用 click 事件a.click()。完成文件自動下載。

  

核心代碼

【整合及自動下載】

// 下載整合後的TS文件
    downloadFile(fileDataList, fileName, fileType) {
      this.tips = 'ts 碎片整合中，請留意瀏覽器下載'
      const fileBlob = new Blob(fileDataList, { type: 'video/MP2T' }) // 建立一個Blob對象，並設置文件的 MIME 類型
      const a = document.createElement('a')
      a.download = fileName + '.' + fileType
      a.href = URL.createObjectURL(fileBlob)
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },

是的，涉及新知識點的部分只有上面一小段，其餘的都是 JS 的基礎應用。

除了 vue.js 文件，本工具代碼均包含在 index.html 文件裏面。包括換行，一共 540 行代碼，其中 css 樣式 190 行，html 標籤 30 行。JS 邏輯代碼 300 行。

羅列這些代碼量只是想代表，本工具運用到的都只是 JS 的常見知識，並不複雜。鼓勵你們多嘗試閱讀源碼，其實看源碼並無想象中的那麼困難。

源碼連接

完結撒花，感謝閱讀。