喜歡研究視頻的小伙伴，想必對(duì)H.265已經(jīng)非常了解，作為ITU-T VCEG繼H.264之后所制定的新的視頻編碼標(biāo)準(zhǔn)，H.265可以在有限帶寬下傳輸更高質(zhì)量的網(wǎng)絡(luò)視頻，僅需原先的一半帶寬即可播放相同質(zhì)量的視頻。
但是實(shí)際運(yùn)用上，很多WEB瀏覽器對(duì)H.265的解碼播放支持的不是很好，所以呢，今天TJ君就給大家分享一個(gè)完整的開(kāi)源Web版H.265播放器完善方法。
此方法基于JS碼流解封裝、WebAssembly(FFmpeg)視頻解碼，利用Canvas畫(huà)布投影、AudioContext播放音頻。深入簡(jiǎn)出，比較適合感興趣的小伙伴進(jìn)行學(xué)習(xí)交流和實(shí)際開(kāi)發(fā)應(yīng)用。
首先下載項(xiàng)目源代碼，然后進(jìn)行工程打包：
# 以下打包命令任選一
* npm run dev # 運(yùn)行開(kāi)發(fā)環(huán)境
* npm run test # 運(yùn)行測(cè)試環(huán)境
* npm run build # 打包正式環(huán)境
* rollup -c # 打包c(diǎn)sj與esm版本
配置Nginx server：
server {
listen 8000;
location / {
root <path of goldvideo>/goldvideo;
index index.html index.htm;
autoindex on;
}
}
然后重啟Nginx，此時(shí)訪問(wèn)如下地址：
http://localhost:8000/h265player/demo/demo.html
能正常播放視頻的話就表示啟動(dòng)成功了。
那如何在實(shí)際頁(yè)面上展示呢？可以在頁(yè)面的head標(biāo)簽里面增加如下內(nèi)容：
<link rel="stylesheet" href="../dist/goldplay-h265.css">
<script src="../dist/goldplay-h265-sdk.js"></script>
<style>
.play-container {
width: 800px;
height: 500px;
}
</style>
然后需要?jiǎng)?chuàng)建一個(gè)div，作為播放器的容器
<div class="play-container"></div>
最后新建一個(gè)GoldPlay實(shí)例對(duì)象，傳入相應(yīng)參數(shù)，就可以實(shí)現(xiàn)視頻的播放
//播放器容器
let el = doc.querySelector('.play-container')
//播放器參數(shù)
let options = {
// 視頻播放地址
sourceURL: 'http://localhost:8000/h265player/data/video2/playlist.m3u8',
type: 'HLS'
// wasm庫(kù)地址
libPath: 'http://localhost:8000/h265player/dist/lib',
}
let player = new GoldPlay(el, options}
整個(gè)項(xiàng)目分為四大模塊、三大線程
分別是：
- UI模塊
- Loader模塊
- 數(shù)據(jù)處理模塊
- 數(shù)據(jù)渲染模塊
- main主線程
- 數(shù)據(jù)加載線程
- 數(shù)據(jù)處理線程
其中主線程負(fù)責(zé)整體項(xiàng)目的界面、下載、數(shù)據(jù)流、音頻、視頻各方面的功能調(diào)度；數(shù)據(jù)加載線程，則對(duì)元數(shù)據(jù)進(jìn)行各種請(qǐng)求；數(shù)據(jù)處理線程，則會(huì)完成最終的數(shù)據(jù)解封裝和解碼。
而解封和解碼分別用到了demuxer模塊通過(guò)JS實(shí)現(xiàn)視頻數(shù)據(jù)的解封裝，從而獲取到獨(dú)立的視頻（H265）數(shù)據(jù)和音頻（AAC）數(shù)據(jù)；通過(guò)ffmpeg實(shí)現(xiàn)H265數(shù)據(jù)的軟解碼，編譯成wasm。
四大模塊則會(huì)完成播放器的顯示、圖像的展示、按鈕的排布、數(shù)據(jù)的請(qǐng)求加載、視屏和音頻的渲染及同步。
如果是對(duì)視頻感興趣的小伙伴可以來(lái)看看這個(gè)項(xiàng)目：https://github.com/goldvideo/h265player
最后，記得關(guān)注我喲，帶你看更多有意思的好用工具。
