欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Html5播放hls格式的視頻示例代碼

  發(fā)布時間：2024-08-19 16:42:14   作者：林小白的日常   我要評論
HLS是一種基于HTTP協(xié)議的流媒體傳輸協(xié)議，它的出現(xiàn)使得視頻的傳輸更加穩(wěn)定和可靠，本文給大家介紹Html5如何播放hls格式的視頻，感興趣的朋友一起看看吧

一、什么情況下需要播放

當前端需要嵌入設備視頻，比如用到魔鏡、螢石云、海康威視等平臺，怎么能將視頻地址在前端頁面中播放呢，這里要引用視頻播放的js。

一般hls格式的視頻有http、https，根據(jù)平臺提供的接口獲取視頻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通過將整個視頻分成一系列小的分片，并通過HTTP協(xié)議進行傳輸，從而實現(xiàn)了視頻的實時播放和邊下邊播的功能。

工作原理：

1、 切片

在HLS中，視頻被切分成多個小的分片，每個分片通常持續(xù)幾秒鐘。這樣做的好處是，可以將視頻分片緩存在客戶端，從而降低了服務端的壓力。

2、編碼

在切片之前，視頻需要進行編碼。常見的編碼格式有H.264和H.265等。編碼的目的是將視頻數(shù)據(jù)壓縮，以便更好地適應網(wǎng)絡傳輸。

3、分發(fā)

切片好的視頻分發(fā)到一個或多個服務器上。這些服務器可以是CDN（內容分發(fā)網(wǎng)絡）服務器，也可以是普通的HTTP服務器。

4、M3U8文件

服務器會生成一個.m3u8文件，該文件是一個索引文件，包含了所有視頻分片的URL?？蛻舳送ㄟ^下載該文件來獲取視頻分片的地址。

5、客戶端請求

客戶端通過HTTP請求.m3u8文件，并從中獲取到視頻分片的地址。然后，客戶端會根據(jù)這些地址逐個請求視頻分片。

6、動態(tài)碼率調整

HLS支持動態(tài)碼率調整，這意味著客戶端可以根據(jù)當前網(wǎng)絡情況選擇合適的視頻分片進行播放。如果網(wǎng)絡帶寬足夠，客戶端可以選擇高質量的分片進行播放；如果網(wǎng)絡帶寬不足，客戶端可以選擇低質量的分片進行播放。

7、緩存

客戶端會將下載的視頻分片進行緩存，以便實現(xiàn)邊下邊播的功能。當用戶播放視頻時，客戶端會從緩存中讀取視頻數(shù)據(jù)進行播放。

8、實時性

由于視頻被切分成多個小的分片，客戶端可以實時地獲取最新的視頻分片。這意味著，即使視頻在服務端還沒有完全生成，客戶端也可以開始播放已經(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>

運行結果：

 由于hls是對視頻進行切片，所以隔幾秒hls.js里就會對url進行一次請求。

 四、方法二：使用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 來給我們解碼 -->
<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 來給我們解碼 -->
    <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>

運行結果：

 運行的視頻不自動播放，且報錯，需要手動點擊才能播放。

原因是網(wǎng)頁加載完成后立即播放音頻（或帶有音頻軌道的視頻）可能會意外地打擾到用戶，為了增加用戶體驗，緊接著2018年4月份Chrome發(fā)布的66版本也正式關閉了聲音自動播放。

解決方案：

一：設置靜音

audio的muted設置為true，讓用戶自己點擊查看

 代碼中這樣改：

    <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)頁已有交互行為（包括點擊、觸摸、按下某個鍵等等）

我這里是改成靜音了，運行結果：

到此這篇關于Html5如何播放hls格式的視頻的文章就介紹到這了,更多相關Html5 hls格式播放內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論