SWT

Videojs 播放RTMP協議和HLS協議的視頻流 

Videojs 播放RTMP協議和HLS協議的視頻流

 

RTMP

RTMP協議（Real Time Messaging Protocol）是一種流媒體傳輸協議，是直播APP中最常用的流媒體傳輸協議，它最主要的優勢就是低延時。 RTMP 協議進行數據傳輸時，它是一整條數據流被封裝成FLV通過HTTP提供出去，因此在服務器不會有落地文件，基於TCP 長連接，不需要多次建連，所以延時通常為1 -3s，遠超HLS。

HLS

HTTP Live Streaming協議被縮寫為HLS，是蘋果公司發布的基於HTTP的流媒體傳輸協議（因此蘋果的所有系統都支持HLS）。 其工作原理是切片式傳輸，把直播流切成無數片，用戶在觀看視頻時，每次客戶端可以只下載一部分，然後在這部分播放時從許多不同的備用源中下載其他資源，因此HLS協議可以任由用戶的意願選擇不同的碼率。

播放RTMP協議

video.js 5.x以下版本，Flash技術是Video.js核心存儲庫的一部分,無需引入。 video.js 6.x以上版本，Flash被剝離，需要單獨引入videojs-flash.js，否則無法播放。
<head>
    <title>播放器</title>
    <meta charset="utf-8">
    <link href="public/video-js.css" rel="stylesheet">
    <script src="public/video.js"></script>
    //rtmp協議基於flash，需要引入videojs-flash.js
    <script src="public/videojs-flash.js"></script>
</head>
<body>
<video id='myvideo' width=960 height=540 class="video-js vjs-default-skin">
    <source src="rtmp://xxxxxxxx/streamname">
</video>
</body>
<script>

    window.onload = function () {
        let player = videojs('myvideo', {}, function () {
            console.log('videojs播放器初始化成功')
        });
        player.play();

    };
</script>
 

播放HLS協議

video.js6.0版本需要引入videojs-http-streaming.js video.js7.0以上版本無需引入
<head>
    <title>播放器</title>
    <meta charset="utf-8">
    <link href="public/video-js.css" rel="stylesheet">
    <script src="public/video.js"></script>
</head>
<body>
<video id='myvideo' width=960 height=540 class="video-js vjs-default-skin">
    <source src="https://xxxxxxx.xxx/xxxxx.m3u8">
</video>
</body>
<script>

    window.onload = function () {
        let player = videojs('myvideo', {}, function () {
            console.log('videojs播放器初始化成功')
        });
        player.play();

    };
</script>
Back