一般我們播放本地視頻都是使用 video標簽，但是<video> 元素只支持三種視頻格式：MP4、WebM、Ogg，對于在線視頻直接使用video是沒法播放的，這里介紹幾款這兩天我在做播放在線監(jiān)控視頻功能時使用過的幾款播放器，初次接觸流媒體踩了一堆坑，到目前為止對這部分內(nèi)容都還了解的很淺顯，若有問題請在評論區(qū)指出，歡迎交流。
該文章旨在為小白推薦播放方案，誰還不是從小白過來的呢？
先介紹幾個概念：
流協(xié)議:流協(xié)議就是在兩個通信系統(tǒng)之間傳輸多媒體文件的一套規(guī)則，它定義了視頻文件將如何分解為小數(shù)據(jù)包以及它們在互聯(lián)網(wǎng)上傳輸?shù)捻樞颍琑TMP與 RTSP 是比較常見的流媒體協(xié)議。
HLS：HLS (HTTP Live Streaming)是Apple的動態(tài)碼率自適應(yīng)技術(shù)。主要用于PC和Apple終端的音視頻服務(wù)。包括一個m3u(8)的索引文件，TS媒體分片文件和key加密串文件。參考:HLS。簡單來說，HLS是一種協(xié)議，如果你的視頻源是http://xxxx.m3u8這種，就選擇這種協(xié)議，.m3u8是個文本文件，直播時，他的內(nèi)容實時變更，內(nèi)部指向一個或多個.ts文件。
HTTP-FLV: HTTP-FLV 是將音視頻數(shù)據(jù)以 FLV 文件格式進行封裝，再將 FLV 格式數(shù)據(jù)封裝在 HTTP 協(xié)議中進行傳輸?shù)囊环N流媒體傳輸方式。HTTP-FLV 的實現(xiàn)原理： HTTP-FLV 利用 HTTP/1.1 分塊傳輸機制發(fā)送 FLV 數(shù)據(jù)。雖然直播服務(wù)器無法知道直播流的長度，但是 HTTP/1.1 分塊傳輸機制可以不填寫 conten-length 字段而是攜帶 Transfer-Encoding: chunked 字段，這樣客戶端就會一直接受數(shù)據(jù)。參考：FLV 和 HTTP-FLV。
簡單來說就是你的視頻源是直播且是http://xxxx.flv，就選擇這種協(xié)議播放。還有個websocket-flv，是基于websocket的。
RTMP與RTSP： 什么是RTMP 和 RTSP？它們之間有什么區(qū)別？
H264(AVC)與H265(HEVC)：都是視頻編碼，是視頻壓縮格式，由于視頻本身的碼流太大，所以需要經(jīng)過壓縮然后再通過網(wǎng)絡(luò)進行傳輸，其中H265是H264的升級版，很多播放器無法播放H265視頻。
下列播放器排名不分先后，自己評判。
1.西瓜播放器
優(yōu)點：
1.官網(wǎng)教程非常簡單清晰，上手快。這
2.使用起來體驗感很好
3.支持直播點播，支持hls，http+flv，dash，WebRTC直播，還有音樂播放器
4.提供在線可調(diào)試demo
缺點：
1.xgplayer-hls.js不能播放hls H.265視頻，因為是基于hls.js封裝的，hls.js支持H264，不支持H265。
2.xgplayer-hls測試后發(fā)現(xiàn)同樣不能播放hls H.265視頻。
3.播放不同的視頻需要自己切換對應(yīng)的包，如xgplayer-flv.js，xgplayer-hls.js（也可以算是優(yōu)點，包體積更小，更靈活，看你怎么評判了）
我一開始選取的這款播放器，但很遺憾，我的監(jiān)控視頻是hls協(xié)議的H.265視頻，沒法播放。。。但總的來說如果不播放H.265視頻，個人非常推薦！
2.h265web.js
?文章來源地址http://www.zghlxwxcb.cn/news/detail-717528.html
2.使用后是目前唯一一個可以滿足我需求的播放器，可以播放hls協(xié)議的H.265視頻，主碼流的，視頻信息如下：
但問題是很卡！卡爆了的卡!，但是好歹出現(xiàn)了畫面，后改為輔碼流視頻源才播放流暢，視頻信息如下：
?
缺點：
1.很占內(nèi)存，引入項目后至少占1個g內(nèi)存，而且對h265視頻解析是使用canvas繪制的方式(目前好像只有這種方案才能播放)，對比使用video播放來說慢了些。但h265webj內(nèi)部做了判斷，當視頻是h264格式的會改為video標簽播放。
2.播放器底部的controll需要自己實現(xiàn)，官網(wǎng)提供的是各種api，提倡自己封裝。可參考我這兩篇文章自己實現(xiàn)，或自己查閱文檔封裝。
h265web.js 同時播放多個視頻，修改官方example 中player.js并重新編譯
前端使用hls方式播放h265(HEVC)格式的.ts在線文件，附vue2.x封裝h265web.js代碼
3.控制臺作者給自己打廣告，連播放器要傳的參數(shù)token都是自己的廣告。。。不過問題不大，開源的嘛，可以理解。
4.還有個問題，在tag v20211104和最新版本 tag v20220916播放上面那個主碼流 hls協(xié)議的H.265視頻時發(fā)現(xiàn)，低版本tag v20211104反而更流暢？猜測是后續(xù)版本迭代升級后體積變大，占用更多內(nèi)存，導(dǎo)致后面的版本播放更卡頓。
擴展：
若因為卡頓導(dǎo)致播放延遲，可進行追幀設(shè)置，動態(tài)更改播放倍數(shù)優(yōu)化。我并未實現(xiàn)相關(guān)代碼，因為調(diào)試起來太麻煩了，監(jiān)控是內(nèi)網(wǎng)視頻，沒法在線調(diào)試。。。目前來說播放效果都比較好，延遲也不高，幾秒左右。
3.videojs
一個比較成熟的方案，用的人比較多，但我沒怎么用過，我大概測試了下，可播放hls協(xié)議下h.264視頻，但不支持播放hls 協(xié)議下的h.265視頻，然后我就pass 掉了。
測試播放.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('正在播放');
});
//暫停--播放完畢后也會暫停
this.on('pause', function() {
console.log("暫停中")
});
// 結(jié)束
this.on('ended', function() {
console.log('結(jié)束');
})
});
</script>
</body>
</html>
4.liveweb
iveweb是可支持H.264/H.265視頻播放的流媒體播放器，性能穩(wěn)定、播放流暢，可支持的視頻流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具備較高的可用性。liveweb還擁有Windows、Android、iOS版本，其靈活的視頻能力，極大滿足了用戶的多樣化場景需求。
liveweb具備較強的靈活性，在視頻直播過程中l(wèi)iveweb可通過H5進行視頻解碼，只要客戶端支持H5，就能完美進行視頻的無插件直播，同時還支持大碼率視頻直播，并可支持H.264、H.265兩種編碼格式。
Liveweb是好游科技自主開發(fā)的網(wǎng)頁播放器，支持 RTSP、RTMP、HTTP、HLS、UDP、RTP、File 等多種流媒體協(xié)議播放，同時也有多種顯示方式 (GDI,D3D) 及格式 (RGB24,YV12,YUY2,RGB565)，經(jīng)過 7x24 小時連續(xù)拷機測試，能夠很好的處理斷連
如果大家正在找尋一款供能強大的流媒體播放器，那么liveweb將會是一個不錯的選擇，我們也歡迎大家的了解和試用。
?文章來源：http://www.zghlxwxcb.cn/news/detail-717528.html
?
到了這里，關(guān)于瀏覽器不需要安裝插件，前端播放在線視頻方案，幾款播放器介紹，hls協(xié)議下的h.265視頻播放方案推薦的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
