H5頁面直播hls視頻

原創

2020-02-21 06:34

#PC、手機web頁面直播hls視頻

概述
一轉眼就到了11月，很多工作中遇到的坑都在一一解決，仔細想了想值得分享的應該是web頁面直播hls格式的視頻了，當時我們的項目是需要在手機嵌入的頁面來播放攝像頭的視頻，視頻格式是hls直播流，HTML5的video標籤並不能直接播放hls直播流，需要藉助插件來實現。
關於插件的話網上也搜了一大堆用來測試，發現免費還好用的應該算是video.js了，video.js也是專門針對hls直播流做了一個依賴video.js的插件videojs-contrib-hls.js。前端頁面同時引入這兩個js插件就可以播放hls直播流。
###注意
當然播放也是有需要注意的地方：

後端傳過來的播放文件地址是以 *.m3u8爲後綴，關於hls轉換m3u8這裏就不介紹了，因爲我只是做前端的，對這個不瞭解
前端進行hls直播需要啓動server纔可以，不然直接播放會報錯，我用的是eclipse
hls直播有延遲，我們的是大約15秒，然後每次地址可以播放30s，我就用定時器調用接口來實現不間斷直播
代碼塊
好了，廢話不多說，直接上例子，例子也是video.js官網的：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>

</head>
<body>
<video id="example-video" width=960 height=540 class="video-js vjs-default-skin" controls poster="http://i.onionstatic.com/onionstudios/3819/16x9/800.jpg">
    <!--<source src="http://7xjr0i.com2.z0.glb.qiniucdn.com/test-vedio-hls.m3u8" type="application/x-mpegURL">-->
    <!--<source src="API/hls_test/hls_test/output.m3u8" type="application/x-mpegURL">-->
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>

<script type="text/javascript">
    var player = videojs('example-video');
    //player.play();
</script>
</body>
</html>

鏈接
gitgub地址：
video-hls

也有在線測試的地址：
http://jsbin.com/meqeqipaye/edit?html,output

video.js裏有很多格式的視頻播放解決方案，需要的可以看一下：
https://github.com/videojs翻博客看到boonya寫的一個視頻直播項目流程比較詳細，推薦下（2017-11-22更新）：
http://blog.csdn.net/boonya/article/details/52210576