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