本篇的研究，目的是給基於 HLS 格式的 Web Player 播放器提供 MP4 支持。同時這個 Web Player 本身具有 Multi-CDN 和 P2P 的技術，因此需要考慮未來 MP4 格式也要支援這兩項技術，保留設計彈性。
Purpose
- Web Player 支援 MP4 格式播放。
- Web Player 支援 MP4 且可以啟用 Multi-CDN 和 P2P 技術。
Problem Formulation
實現 Multi-CDN 產生的後續工作：HTML 的 <video> 可以直接播放 MP4 來源的影片，瀏覽器也會實現播放影片需要的 Range request、Seeking 和 Buffer caching and management 等方法，但為了讓分段下載實作 Multi-CDN 機制，必須使用 MSE API 處理影片的內容。這樣一來，我們也必須實作瀏覽器原先已處理過的工作。
為了達成這個目標，我們需要對 Web Player 播放 MP4 格式的流程做進一步的研究。
Research
Media Source Extensions
Media Source Extensions (MSE) 是一種 W3C 的網頁技術規範，它允許網頁應用程式進行媒體串流的生成和操控。透過 MSE，網頁開發者能夠直接處理各種媒體數據源，包括但不限於本地文件和串流媒體。開發者可以將媒體數據分片(通常為音頻或視頻的片段)傳至音頻或視頻元素，實現各種影片播放功能，如自適應串流(Adaptive Streaming)、時間軸操作和影片編輯等等。事實上，HLS 和 DASH 皆是使用此規範實作。
不過需要注意的是，MSE 的緩衝容器 SourceBuffer 有最大 100MB 的容量限制，因此需要實現緩衝的快取和釋放。
由於需要對 Browser 原生的 Video Player 的 Method - File Seek 進行干涉，我們必需複寫 MSE 。
MP4Box.js
MP4Box.js 是一種使用 JavaScript 實現的 MP4 檔案解碼器(demuxer)，可用於處理和生成符合 ISO 基本媒體檔案格式，諸如 MP4、ISMA 和 DASH 等等的文件。MP4Box.js 是 MP4Box 的 JavaScript 版本，而 MP4Box 本身是一種功能強大的多媒體處理工具，支援在不重新編碼的情況下添加、修改和刪除媒體軌道。
MP4Box.js 可以幫助我們分析 metadata，並利用 metadata 產生 segment 的資訊，藉由這兩項資訊，可以快速又準確的下載播放器所需要的緩衝資料，甚至可以藉此產生 chunk 的 start range 和 end range。
我們會使用 MP4Box.js 協助擷取事件、進一步整理聚合的資料。
MP4 Player System Architecture and Methods
Flowchart of file download and buffer handling.
Flowchart of pre-buffering and buffer release.
Flowchart for handling onSeek.
Prototyping
我們把上面的組織流程整合，並考慮 Web Player 實際會遇到的過程，可以得出以下流程圖:
實際程式以及更詳細的解說會留倒另一個章節說明。
Discussion
How to integrating with Web Player
在 Web Player 實現類似 HTTP Live Streaming (HLS) 協議的 MP4 載入器，並整合至各種播放器。
Flowchart for integrate MP4 support into SDK.
由於目前 Web Player 的 File Seeker 並沒有考慮到將 Range Request 當做完整的下載請求，故需要進行架構修改：
- 支援 Range Request
- 檔案分片的緩存機制
- 檔案下載啟用 Multi-CDN 和 P2P
Flowchart for File Seeker.
Multi-CDN for MP4 format
Flowchart with Multi-CDN.
並不是每次 Range Request 都必須去驗證當前的 Multi-CDN 是否優秀，盡可能利用 HTTP 1.1 長連線的優勢。
Conclusion
- 支援 MP4 並整合至 Web Player 是可行的。
- 支援 MP4 的 Web Player 需要修改以實現下列功能：
- 重構 File Seeker：
- 支援 Range Request
- 檔案分片的緩存機制
- 檔案下載啟用 Multi-CDN 和 P2P
- 實現類似 HLS 的 MP4 載入器：
- 管理 SourceBuffer
- 事件 seeking 的處理
- 重構 File Seeker：