項目概述
隨著視頻編碼技術的發(fā)展渔扎，相比H.264, H.265同等畫質(zhì)體積僅為一半、帶寬占用省一半产镐、畫質(zhì)更細膩等諸多優(yōu)勢倡蝙。 但Web瀏覽器還不支持H.265的解碼播放九串，因此本項目基于Web Assembly(封裝FFmpeg)、JS解封裝、Canvas投影以及AudioContext實現(xiàn)了Web端的H265播放猪钮。
播放器顯示效果如下：
功能簡介
播放器主要分為UI品山、Loader、數(shù)據(jù)處理烤低、數(shù)據(jù)渲染四個部分和3個線程肘交。一個是主線程，包括界面控制扑馁、下載控制涯呻、數(shù)據(jù)流控制、音視頻控制等功能腻要；數(shù)據(jù)加載線程复罐，完成元數(shù)據(jù)和數(shù)據(jù)片段的請求；數(shù)據(jù)處理線程雄家，完成數(shù)據(jù)解封裝和解碼效诅。
數(shù)據(jù)處理流程如下：
播放器的實現(xiàn)主要分為以下四個部分：
- UI：播放器顯示，包括screen和controlbar兩部分咳短，screen包括視頻圖像展示填帽、彈窗蛛淋、海報圖等咙好。controlbar包括進度條、播放按鈕褐荷、音量控制等組件勾效。
- Loader：負責媒體數(shù)據(jù)的加載和解析，目前僅支持HLS協(xié)議叛甫。通過worker實現(xiàn)數(shù)據(jù)的請求层宫，加載完成后，根據(jù)設置緩存大小其监，存儲請求的ts數(shù)據(jù)萌腿，當達到緩存上限后停止加載。解碼器從ts數(shù)據(jù)隊列獲取ts后抖苦，Hls
Loader會把請求過的ts釋放毁菱，繼續(xù)加載下一個ts，達到最大緩存限制后停止加載
- 數(shù)據(jù)處理：主要包括數(shù)據(jù)解封裝和H265解碼锌历，解封裝通過demuxe.js這個類庫實現(xiàn)贮庞，H265解碼通過ffmpeg打包生成的wasm軟解來實現(xiàn)，cpu使用率較高究西。
- 數(shù)據(jù)渲染：包括視屏渲染和音頻渲染窗慎，視頻渲染通過ImagePlayer把解碼后的yuv數(shù)據(jù)直接渲染到canvas，音頻通過AudioPlayer把AAC數(shù)據(jù)解碼后進行音頻播放，最后通過pts實現(xiàn)音視頻的同步遮斥。同步策略是以音頻為參考峦失，判斷當前視頻pts與獲取到的音頻pts的差值來調(diào)整視頻顯示時間來達到音視頻同步。
項目地址
本項目是一個公開的基礎可用版本术吗，并不含有具體的業(yè)務代碼宠进。業(yè)務可基于此項目進行具體業(yè)務實現(xiàn)。本項目實現(xiàn)代碼：https://github.com/goldvideo
包含三個相關項目：
demuxer: 純JS解碼TS/MP4工具
decoder_wasm: 借助于WebAssembly技術藐翎，基于ffmpeg的H.265解碼器材蹬。
h265player: H265播放器
