一般我們播放本地視頻都是使用 video標(biāo)簽葵袭，但是<video> 元素只支持三種視頻格式：MP4涵妥、WebM、Ogg坡锡，對(duì)于在線視頻直接使用video是沒法播放的妹笆，這里介紹幾款這兩天我在做播放在線監(jiān)控視頻功能時(shí)使用過的幾款播放器，初次接觸流媒體踩了一堆坑娜氏，到目前為止對(duì)這部分內(nèi)容都還了解的很淺顯拳缠，若有問題請(qǐng)?jiān)谠u(píng)論區(qū)指出，歡迎交流贸弥。
該文章旨在為小白推薦播放方案窟坐，誰還不是從小白過來的呢？
先介紹幾個(gè)概念：
流協(xié)議:流協(xié)議就是在兩個(gè)通信系統(tǒng)之間傳輸多媒體文件的一套規(guī)則绵疲，它定義了視頻文件將如何分解為小數(shù)據(jù)包以及它們?cè)诨ヂ?lián)網(wǎng)上傳輸?shù)捻樞蛘茉В琑TMP與 RTSP 是比較常見的流媒體協(xié)議。
HLS：HLS (HTTP Live Streaming)是Apple的動(dòng)態(tài)碼率自適應(yīng)技術(shù)盔憨。主要用于PC和Apple終端的音視頻服務(wù)徙菠。包括一個(gè)m3u(8)的索引文件，TS媒體分片文件和key加密串文件郁岩。參考:HLS婿奔。簡單來說，HLS是一種協(xié)議问慎，如果你的視頻源是http://xxxx.m3u8這種萍摊，就選擇這種協(xié)議，.m3u8是個(gè)文本文件如叼，直播時(shí)冰木，他的內(nèi)容實(shí)時(shí)變更，內(nèi)部指向一個(gè)或多個(gè).ts文件笼恰。
HTTP-FLV: HTTP-FLV 是將音視頻數(shù)據(jù)以 FLV 文件格式進(jìn)行封裝踊沸，再將 FLV 格式數(shù)據(jù)封裝在 HTTP 協(xié)議中進(jìn)行傳輸?shù)囊环N流媒體傳輸方式。HTTP-FLV 的實(shí)現(xiàn)原理： HTTP-FLV 利用 HTTP/1.1 分塊傳輸機(jī)制發(fā)送 FLV 數(shù)據(jù)社证。雖然直播服務(wù)器無法知道直播流的長度逼龟，但是 HTTP/1.1 分塊傳輸機(jī)制可以不填寫 conten-length 字段而是攜帶 Transfer-Encoding: chunked 字段，這樣客戶端就會(huì)一直接受數(shù)據(jù)猴仑。參考：FLV 和 HTTP-FLV审轮。
簡單來說就是你的視頻源是直播且是http://xxxx.flv，就選擇這種協(xié)議播放辽俗。還有個(gè)websocket-flv疾渣，是基于websocket的。
RTMP與RTSP： 什么是RTMP 和 RTSP崖飘？它們之間有什么區(qū)別榴捡？
H264(AVC)與H265(HEVC)：都是視頻編碼，是視頻壓縮格式朱浴，由于視頻本身的碼流太大吊圾，所以需要經(jīng)過壓縮然后再通過網(wǎng)絡(luò)進(jìn)行傳輸，其中H265是H264的升級(jí)版翰蠢，很多播放器無法播放H265視頻项乒。
下列播放器排名不分先后，自己評(píng)判梁沧。
1.西瓜播放器- xgplayer
我使用的版本：
優(yōu)點(diǎn)：
1.官網(wǎng)教程非常簡單清晰檀何，上手快。這點(diǎn)個(gè)人認(rèn)為尤其重要廷支，小白哪懂那么多频鉴，就沖這個(gè)點(diǎn)個(gè)大大的贊！
2.使用起來體驗(yàn)感很好
3.支持直播點(diǎn)播恋拍，支持hls垛孔，http+flv，dash施敢，WebRTC直播周荐，還有音樂播放器
4.提供在線可調(diào)試demo
缺點(diǎn)：
1.xgplayer-hls.js不能播放hls H.265視頻，因?yàn)槭腔趆ls.js封裝的僵娃，hls.js支持H264羡藐，不支持H265。
2.xgplayer-hls測(cè)試后發(fā)現(xiàn)同樣不能播放hls H.265視頻悯许。
3.播放不同的視頻需要自己切換對(duì)應(yīng)的包仆嗦，如xgplayer-flv.js，xgplayer-hls.js（也可以算是優(yōu)點(diǎn)先壕，包體積更小瘩扼，更靈活，看你怎么評(píng)判了）
我一開始選取的這款播放器垃僚，但很遺憾集绰，我的監(jiān)控視頻是hls協(xié)議的H.265視頻，沒法播放谆棺。栽燕。罕袋。但總的來說如果不播放H.265視頻，個(gè)人非常推薦碍岔！
播放效果：
2.EasyPlayer.js
首先有的博客用的這個(gè)@easydarwin/easywasmplayer浴讯，但在npm上看到這個(gè)包不再支持了，我沒用過這個(gè)包蔼啦，感興趣的自己嘗試榆纽。
我用的是這個(gè)：EasyPlayer.js
版本如下：
優(yōu)點(diǎn)：
1.內(nèi)部自動(dòng)識(shí)別視頻格式，自動(dòng)使用對(duì)應(yīng)方法解碼捏肢。
缺點(diǎn)：
1.文檔錯(cuò)誤奈籽，不友好，按照文檔指示 npm install @easydarwin/easyplayer --save 后沒有找到官方說的EasyPlayer.swf文件
我在4.0.7版本中才找到這個(gè)文件鸵赫。
但是直接下載官方demo后跑起來發(fā)現(xiàn)衣屏，不需要這個(gè)文件也行，因此應(yīng)該是官方文檔沒有更新辩棒。（若遇到vue demo運(yùn)行報(bào)錯(cuò)勾拉，可能是nodejs 版本問題）
2.右鍵播放器有彈窗，（解決辦法：自己設(shè)置樣式隱藏）
<style>
// 隱藏彈窗
.easy-player-right-menu{
display: none !important;
}
</style>
3.該播放器是支持播放h265視頻的盗温，但應(yīng)該是指的flv格式的(我未測(cè)試過)藕赞， 實(shí)測(cè)時(shí)發(fā)現(xiàn)不支持播放hls 協(xié)議下的h265視頻
播放效果：
3.h265web.js
優(yōu)點(diǎn)：
1.詳情見官方文檔，篇幅有限不一一列舉
2.使用后是目前唯一一個(gè)可以滿足我需求的播放器卖局，可以播放hls協(xié)議的H.265視頻斧蜕，主碼流的，視頻信息如下：
但問題是很卡砚偶！卡爆了的卡!批销，但是好歹出現(xiàn)了畫面，后改為輔碼流視頻源才播放流暢染坯，視頻信息如下：
缺點(diǎn)：
1.很占內(nèi)存均芽，引入項(xiàng)目后至少占1個(gè)g內(nèi)存，而且對(duì)h265視頻解析是使用canvas繪制的方式(目前好像只有這種方案才能播放)单鹿，對(duì)比使用video播放來說慢了些掀宋。但h265webj內(nèi)部做了判斷，當(dāng)視頻是h264格式的會(huì)改為video標(biāo)簽播放仲锄。
2.播放器底部的controll需要自己實(shí)現(xiàn)劲妙，官網(wǎng)提供的是各種api，提倡自己封裝儒喊×头埽可參考我這兩篇文章自己實(shí)現(xiàn)，或自己查閱文檔封裝怀愧。
h265web.js 同時(shí)播放多個(gè)視頻侨颈，修改官方example 中player.js并重新編譯
前端使用hls方式播放h265(HEVC)格式的.ts在線文件余赢，附vue2.x封裝h265web.js代碼
3.控制臺(tái)作者給自己打廣告，連播放器要傳的參數(shù)token都是自己的廣告哈垢。妻柒。。不過問題不大温赔，開源的嘛蛤奢，可以理解鬼癣。
4.還有個(gè)問題陶贼，在tag v20211104和最新版本 tag v20220916播放上面那個(gè)主碼流 hls協(xié)議的H.265視頻時(shí)發(fā)現(xiàn)，低版本tag v20211104反而更流暢待秃？猜測(cè)是后續(xù)版本迭代升級(jí)后體積變大拜秧，占用更多內(nèi)存，導(dǎo)致后面的版本播放更卡頓章郁。
擴(kuò)展：
若因?yàn)榭D導(dǎo)致播放延遲枉氮，可進(jìn)行追幀設(shè)置，動(dòng)態(tài)更改播放倍數(shù)優(yōu)化暖庄。我并未實(shí)現(xiàn)相關(guān)代碼聊替，因?yàn)檎{(diào)試起來太麻煩了，監(jiān)控是內(nèi)網(wǎng)視頻培廓，沒法在線調(diào)試惹悄。。肩钠。目前來說播放效果都比較好泣港，延遲也不高，幾秒左右价匠。
播放效果：
4.videojs
一個(gè)比較成熟的方案当纱，用的人比較多，但我沒怎么用過踩窖，我大概測(cè)試了下坡氯，可播放hls協(xié)議下h.264視頻，但不支持播放hls 協(xié)議下的h.265視頻洋腮，然后我就pass 掉了廉沮。
測(cè)試播放.m3u8后綴視頻源html代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videoJs</title>
<link rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<section id="videoPlayer">
<video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
<source src="http://rm03.wscdn.hls.xiaoka.tv/live/fczjp0Dc_J60VGMN/playlist.m3u8" type="application/x-mpegURL" id="target">
</video>
</section>
<script type="text/javascript">
var player = videojs('example-video', { "poster": "", "controls": "true" }, function() {
this.on('play', function() {
console.log('正在播放');
});
//暫停--播放完畢后也會(huì)暫停
this.on('pause', function() {
console.log("暫停中")
});
// 結(jié)束
this.on('ended', function() {
console.log('結(jié)束');
})
});
</script>
</body>
</html>
5.rtsp流純前端播放方案 express+ffmpeg+flvjs
這種方案延遲較低，純前端實(shí)現(xiàn)rtsp+websocket-flv播放徐矩。
前端播放器只要支持websocket-flv就行滞时，不一定非要是flv.js，還需要啟動(dòng)nodejs后臺(tái)服務(wù)滤灯，要注意的是這臺(tái)運(yùn)行node服務(wù)的服務(wù)器上必須要安裝ffmpeg坪稽，最好是設(shè)置環(huán)境變量曼玩，若未設(shè)置則nodejs 代碼里也要改下路徑。該方案大概原理是nodejs內(nèi)部通過執(zhí)行ffmpeg命令實(shí)現(xiàn)對(duì)rtsp流轉(zhuǎn)flv窒百，然后通過websocket將flv流發(fā)送到前端黍判，前端使用flv.js 播放,注意，這個(gè)播放是基于websocket協(xié)議的篙梢。
這里我用vlc模擬rtsp流顷帖，然后啟動(dòng)node服務(wù)
前端使用flv.js將rtsp視頻源傳給node服務(wù)轉(zhuǎn)碼，成功播放視頻渤滞！
參考教程：里面基本都有源碼贬墩，思路都是一樣的，但異常情況需要自己處理妄呕，比如斷流陶舞，延遲等。
html5中播放rtsp流實(shí)現(xiàn)監(jiān)控绪励、直播等方案
RTSP流媒體播放器
如何實(shí)現(xiàn) RTSP 視頻播放肿孵？HTML5 播放 RTSP 視頻案例分享！
【前端】rtsp 與 rtmp 視頻流的播放方法
測(cè)試流搭建：
VLC搭建簡單的RTSP流媒體服務(wù)器
vlc搭建rtsp服務(wù)器作為測(cè)試流
感謝有這么多優(yōu)秀的庫供我們選擇疏魏，大家努力吧停做，爭取以后寫個(gè)自己的庫讓別人使用！
以上就是本篇文章全部內(nèi)容了大莫，寫了這么多蛉腌，若對(duì)你有幫助，請(qǐng)點(diǎn)個(gè)贊吧葵硕，謝謝支持眉抬！
本文地址：http://www.reibang.com/p/95869f3519b1，轉(zhuǎn)載請(qǐng)注明出處懈凹，謝謝蜀变。
參考：
見正文，引用較多介评，不一一列舉了库北。
