Html5播放hls格式的視頻示例代碼
我要評(píng)論一、什么情況下需要播放
當(dāng)前端需要嵌入設(shè)備視頻，比如用到魔鏡、螢石云、海康威視等平臺(tái)，怎么能將視頻地址在前端頁(yè)面中播放呢，這里要引用視頻播放的js。
一般hls格式的視頻有http、https，根據(jù)平臺(tái)提供的接口獲取視頻url，文件名是m3u8。hls的視頻地址示例：
https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/media/TheWindRises_mv/210314.m3u8
二、hls的原理
HLS（HTTP Live Streaming）是一種基于HTTP協(xié)議的流媒體傳輸協(xié)議，它的出現(xiàn)使得視頻的傳輸更加穩(wěn)定和可靠。HLS通過(guò)將整個(gè)視頻分成一系列小的分片，并通過(guò)HTTP協(xié)議進(jìn)行傳輸，從而實(shí)現(xiàn)了視頻的實(shí)時(shí)播放和邊下邊播的功能。
工作原理：
1、 切片
在HLS中，視頻被切分成多個(gè)小的分片，每個(gè)分片通常持續(xù)幾秒鐘。這樣做的好處是，可以將視頻分片緩存在客戶端，從而降低了服務(wù)端的壓力。
2、編碼
在切片之前，視頻需要進(jìn)行編碼。常見(jiàn)的編碼格式有H.264和H.265等。編碼的目的是將視頻數(shù)據(jù)壓縮，以便更好地適應(yīng)網(wǎng)絡(luò)傳輸。
3、分發(fā)
切片好的視頻分發(fā)到一個(gè)或多個(gè)服務(wù)器上。這些服務(wù)器可以是CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）服務(wù)器，也可以是普通的HTTP服務(wù)器。
4、M3U8文件
服務(wù)器會(huì)生成一個(gè).m3u8文件，該文件是一個(gè)索引文件，包含了所有視頻分片的URL?？蛻舳送ㄟ^(guò)下載該文件來(lái)獲取視頻分片的地址。
5、客戶端請(qǐng)求
客戶端通過(guò)HTTP請(qǐng)求.m3u8文件，并從中獲取到視頻分片的地址。然后，客戶端會(huì)根據(jù)這些地址逐個(gè)請(qǐng)求視頻分片。
6、動(dòng)態(tài)碼率調(diào)整
HLS支持動(dòng)態(tài)碼率調(diào)整，這意味著客戶端可以根據(jù)當(dāng)前網(wǎng)絡(luò)情況選擇合適的視頻分片進(jìn)行播放。如果網(wǎng)絡(luò)帶寬足夠，客戶端可以選擇高質(zhì)量的分片進(jìn)行播放；如果網(wǎng)絡(luò)帶寬不足，客戶端可以選擇低質(zhì)量的分片進(jìn)行播放。
7、緩存
客戶端會(huì)將下載的視頻分片進(jìn)行緩存，以便實(shí)現(xiàn)邊下邊播的功能。當(dāng)用戶播放視頻時(shí)，客戶端會(huì)從緩存中讀取視頻數(shù)據(jù)進(jìn)行播放。
8、實(shí)時(shí)性
由于視頻被切分成多個(gè)小的分片，客戶端可以實(shí)時(shí)地獲取最新的視頻分片。這意味著，即使視頻在服務(wù)端還沒(méi)有完全生成，客戶端也可以開(kāi)始播放已經(jīng)生成的分片。
三、方法一：使用hls.js播放
需要引用hls.js
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
全部代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>視頻播放</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<video id="HLS_Player" autoplay="autoplay" loop muted controls="controls" width="100%" height="100%"></video>
<script type="text/javascript" >
HLS_Player = document.getElementById('HLS_Player');
if (Hls.isSupported()) {
HLS_Controller = new Hls();
HLS_Controller.loadSource("https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/media/TheWindRises_mv/210314.m3u8")
HLS_Controller.attachMedia(HLS_Player);
HLS_Controller.on(Hls.Events.MANIFEST_PARSED, function() {
HLS_Player.play();
});
} else if (HLS_Player.canPlayType('application/vnd.apple.mpegurl')) {
HLS_Player.src = '';
HLS_Player.addEventListener('loadedmetadata', function() {
HLS_Player.play();
});
}
</script>
</body>
</html>運(yùn)行結(jié)果：
由于hls是對(duì)視頻進(jìn)行切片，所以隔幾秒hls.js里就會(huì)對(duì)url進(jìn)行一次請(qǐng)求。
四、方法二：使用video.js播放
需要引用一下js和css文件.
<script src="https://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script> <link rel="stylesheet"> <!-- PC 端瀏覽器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 來(lái)給我們解碼 --> <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
全部代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>視頻播放</title>
<script src="https://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<link rel="stylesheet">
<!-- PC 端瀏覽器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 來(lái)給我們解碼 -->
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
</head>
<body>
<div class="video" style="width: 100%;height: 60vh">
<video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%"
playsinline webkit-playsinline
autoplay controls preload="auto"
x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
<source id="hls-source" src="">
</video>
</div>
<script type="text/javascript" >
var player = window.player = videojs('example-video');
player.src({
src:'https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/media/TheWindRises_mv/210314.m3u8',
type: 'application/x-mpegURL'
});
player.play();
</script>
</body>
</html>運(yùn)行結(jié)果：
運(yùn)行的視頻不自動(dòng)播放，且報(bào)錯(cuò)，需要手動(dòng)點(diǎn)擊才能播放。
原因是網(wǎng)頁(yè)加載完成后立即播放音頻（或帶有音頻軌道的視頻）可能會(huì)意外地打擾到用戶，為了增加用戶體驗(yàn)，緊接著2018年4月份Chrome發(fā)布的66版本也正式關(guān)閉了聲音自動(dòng)播放。
解決方案：
一：設(shè)置靜音
audio的muted設(shè)置為true，讓用戶自己點(diǎn)擊查看
代碼中這樣改：
<video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%" muted
playsinline webkit-playsinline
autoplay controls preload="auto"
x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
<source id="hls-source" src="">
</video>二、用戶和網(wǎng)頁(yè)已有交互行為（包括點(diǎn)擊、觸摸、按下某個(gè)鍵等等）
我這里是改成靜音了，運(yùn)行結(jié)果：
到此這篇關(guān)于Html5如何播放hls格式的視頻的文章就介紹到這了,更多相關(guān)Html5 hls格式播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html5自動(dòng)播放mov格式視頻的實(shí)例代碼
這篇文章主要介紹了html5自動(dòng)播放mov格式視頻的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-14