关于html5:H5播放HLS之hlsminjs库

58次阅读

共计 2912 个字符，预计需要花费 8 分钟才能阅读完成。

为了产生 HLS 视频，咱们能够借助 srs 来实现 rtmp 推流并生成 HLS 流，具体具体应用能够参考我之前的文章，这里不再赘述。

咱们要实现 web 端播放传统的音视频，最重要的实现就是 rtmp 实时视频推送至 srs 集群，为了演示我这里只启动一个 srs 简略利用，重点放在 web 端播放相干技术的解说，对于 srs 实时视频推送一块，我在《SRS 直播集群计划》一文曾经做了很具体的介绍，这里不再赘述。

首先，咱们能够应用 ffmpeg 或者 obs 采集本地视频并推送到 srs 协转服务中，这里我应用 obs 进行采集与推送（ffmpeg 每次都须要敲命令），关上 obs=> 起源一栏增加“视频捕捉设施”=> 右下角“设置”，具体如图下所示。

为了生成 HLS 流，咱们须要配置 srs 开启 HLS 直播，该配置如下：

listen              1935;
max_connections     1000;
srs_log_tank        file;
srs_log_file        ./objs/srs.log;
http_api {
    enabled         on;
    listen          1985;
}
http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}
stats {
    network         0;
    disk            sda sdb xvda xvdb;
}
vhost __defaultVhost__ {
    gop_cache       off;
    queue_length    10;
    min_latency     on;
    mr {enabled     off;}
    mw_latency      100;
    tcp_nodelay     on;
    hls {
        enabled         on;
        hls_fragment    1;
        hls_window      6;
        hls_path        ./objs/nginx/html;
        hls_m3u8_file   [app]/[stream].m3u8;
        hls_ts_file     [app]/[stream]-[seq].ts;
        hls_cleanup     on;# 是否清理过期 ts 文件片
        hls_dispose     5;# 清理过期文件工夫
    }
}

这里的几个重要参数我感觉还是要略微阐明一下的：

hls_fragment：秒，指定 ts 切片的最小长度。实际上 ts 文件的长度由以下公式决定：

ts 文件时长 = max(hls_fragment, gop_size)
hls_fragment：配置文件中的长度。譬如：5 秒。gop_size：编码器配置的 gop 的长度，譬如 ffmpeg 指定 fps 为 20 帧 / 秒，gop 为 200 帧，则 gop_size=gop/fps=10 秒。那么，最终 ts 的时长为 max(5, 10) = 10 秒。这也是为什么有些流配置了 hls_fragment，然而 ts 时长依然比这个大的起因。

hls_td_ratio：倍数。管制 m3u8 的 EXT-X-TARGETDURATION，参考 Rewrite HLS 写入 ts 局部
hls_aof_ratio：倍数。纯音频时，当 ts 时长超过配置的 hls_fragment 乘以这个系数时就切割文件。例如，但 hls_fragment 是 10 秒，hls_aof_ratio 是 2.0 时，对于纯音频，10s*2.0=20 秒时就切割 ts 文件。
hls_window：秒，指定 HLS 窗口大小，即 m3u8 中 ts 文件的时长之和，超过总时长后，抛弃第一个 m3u8 中的第一个切片，直到 ts 的总时长在这个配置项范畴之内。即 SRS 保障上面的公式

hls_window >= sum(m3u8 中每个 ts 的时长)

hls_cleanup：是否删除过期的 ts 切片，不在 hls_window 中就是过期。能够敞开革除 ts 切片，实现时移和存储，应用本人的切片管理系统。
hls_dispose：HLS 清理的过期工夫（秒），零碎重启或者超过这个工夫时，清理 HLS 的所有文件，包含 m3u8 和 ts。默认为 0，即不清理。
hls_wait_keyframe：是否按 gop 切片，即期待到关键帧后开始切片。测试发现 OS X 和 android 上能够不必按 gop 切片。

启动 srs

./objs/srs -c srs/conf
tailf ./objs/srs.log

obs 开始推送流

应用 vlc 测试 rtmp

rtmp://192.168.12.187:1935/live/1

应用 vlc 测试 HLS

能够看到 rtmp 和 hls 都能够点播，那么接下来的工夫咱们就基于这两条流开发 web 前端的页面来点播视频。

对于 HLS 点播的第一种形式，咱们 web 前端 H5 页面咱们能够应用 hls.min.js 库来实现 web 端的点播。

该库依照我以上的配置提早大略在 7s 左右，为升高延时能够适当调整如下参数：

hls_fragment 和 hls_window 为较小的值

hls_fragment 为 ts 片段大小，每一个 ts 文件大小，尽量设置小点以便一个 ts 文件不需期待太长时间就生成且疾速下载；ts 文件大小与 hls_fragment 和 gop 无关，ts 文件时长取两者最大值，所以 gop 的 i 帧距离在采集端也尽量小点。

gop 大小调小

正如下面剖析到，ts 文件大小与 gop 无关，采集端能够升高改值，如果 GOP 过大服务器端的缓存也会变大

h264 编码应用 H.264 baseline profile，缩小编码时耗费的工夫。
音频尽量应用 AAC-LC Codec，这样会缩小编码时耗费的工夫。

hls.min.js 库的应用如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>H5 播放 m3u8 文件 </title>
</head>

<body>
    <script src="js/hls.min.js"></script>
    <video id="video" style="width:500px;height: 300px; border: 1px solid red;">
        测试
    </video>
    <script>
        if (Hls.isSupported()) {
            // 获取 video 标签
            var video = document.getElementById('video');
            // 实例化 Hls 对象
            var hls = new Hls();
            // 传入门路
            hls.loadSource('http://192.168.12.187:8080/live/1.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {video.play(); // 调用播放 API
            });
        } else {alert("不反对 HLS");
        }
    </script>
</body>

</html>

通过测试该库的播放十分晦涩，提早通过调整仍然放弃在 7s 左右。
源码获取、单干、技术交换请获取如下联系方式：
QQ 交换群：961179337

微信账号：lixiang6153
公众号：IT 技术快餐
电子邮箱：lixx2048@163.com

正文完