項目概述
隨着視頻編碼技術的發展，相比H.264，H.265具有同等畫質體積一半、畫質更清晰細膩、編碼效率更高等諸多優勢。 但因版權等因素主流瀏覽器還不支持H.265的解碼，因此需要專門的插件實現解碼。本項目基於Web Assembly(封裝FFmpeg庫)、JS解封裝、Canvas投影以及AudioContext，是Web端的H265播放器的完整解決方案。
播放器顯示效果如下：
功能簡介
播放器主要分為UI、Loader、數據處理、數據渲染四個部分和3個線程。一個是主線程，負責界面控制、下載控制、數據流控制、音視頻控制等功能；另一個是數據加載線程，負責meta數據和視頻分片數據的請求；還有一個是數據處理線程，即負責視頻數據的解封裝和視頻解碼。
數據處理流程如下：
播放器的實現主要分為以下四個部分：
- UI：播放器顯示，包括screen和controlbar兩部分，screen包括視頻圖像展示、彈窗、海報圖等。controlbar包括進度條、播放按鈕、音量控制等組件。
- Loader：負責媒體數據的加載和解析，目前僅支持HLS協議。通過worker實現數據的請求，加載完成后，根據設置緩存大小，存儲請求的ts數據，當達到緩存上限后停止加載。解碼器從ts數據隊列獲取ts后，Hls Loader會把請求過的ts釋放，繼續加載下一個ts，達到最大緩存限制后停止加載
- 數據處理：主要包括數據解封裝和H265解碼，解封裝通過demuxe.js這個類庫實現，H265解碼通過ffmpeg打包生成的wasm軟解來實現，cpu使用率較高。
- 數據渲染：包括視屏渲染和音頻渲染，視頻渲染通過ImagePlayer把解碼后的yuv數據直接渲染到canvas，音頻通過AudioPlayer把AAC數據解碼后進行音頻播放，最后通過pts實現音視頻的同步。同步策略是以音頻為參考，判斷當前視頻pts與獲取到的音頻pts的差值來調整視頻顯示時間來達到音視頻同步。
項目地址
本項目是一個公開的基礎可用版本，並不含有具體的業務代碼。業務可基於此項目進行具體業務實現。本項目代碼：https://github.com/goldvideo
包含三個相關項目：
- demuxer: JS解封裝TS/MP4工具，負責TS碼流的解封裝與轉封裝
- decoder_wasm: 基於開源ffmpeg的H.265解碼器，結合WebAssembly技術，實現前端視頻解碼
- h265player: H265播放器界面，包括數據加載、控制器、播放流程與畫面同步渲染等