目前几种视频流的简单对比：

协议

httpflv

rtmp

hls

dash

传输方式

http流

tcp流

http

http

视频封装格式

flv

flv tag

Ts文件

Mp4 3gp webm

延时

低

低

高

高

数据分段

连续流

连续流

切片文件

切片文件

Html5播放

可通过html5解封包播放(flv.js)

不支持

可通过html5解封包播放(hls.js)

如果dash文件列表是mp4webm文件，可直接播放

  • RTMP（Real Time Messaging Protocol）是基于TCP的，由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。

  • HLS（HTTP Live Streaming）是基于HTTP的，是Apple公司开放的音视频传输协议。

  • HTTP FLV则是将RTMP封装在HTTP协议之上的，可以更好的穿透防火墙等。

　　

Http_flv & RTMP

这两个协议实际上传输数据是一样的，数据都是flv文件的tag。http_flv是一个无限大的http流的文件，相比rtmp就只能直播，而rtmp还可以推流和更多的操作。但是http有个好处，就是是以80http通信的，穿透性强，而且rtmp是非开放协议。

这两个协议是如今直播平台主选的直播方式，主要原因就是延时极低。

将测试：RTMP延迟1s左右，HTTPFLV延迟1-2s左右，可用于对延迟要求比较苛刻的场景，但要注意兼容性，文章最后会说明HTTPFLV兼容性。

HTTP FLV直播Demo:

<!DOCTYPE html>

<html>

<head>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <title>flv.js demo</title>

    <style>

        .mainContainer {

            display: block;

            width: 1024px;

            margin-left: auto;

            margin-right: auto;

        }

        .urlInput {

            display: block;

            width: 100%;

            margin-left: auto;

            margin-right: auto;

            margin-top: 8px;

            margin-bottom: 8px;

        }

        .centeredVideo {

            display: block;

            width: 100%;

            height: 576px;

            margin-left: auto;

            margin-right: auto;

            margin-bottom: auto;

        }

        .controls {

            display: block;

            width: 100%;

            text-align: left;

            margin-left: auto;

            margin-right: auto;

            margin-top: 8px;

            margin-bottom: 10px;

        }

        .logcatBox {

            border-color: #CCCCCC;

            font-size: 11px;

            font-family: Menlo, Consolas, monospace;

            display: block;

            width: 100%;

            text-align: left;

            margin-left: auto;

            margin-right: auto;

        }

    </style>

</head>

<body>

    <div class="mainContainer">

        <video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay>

            Your browser is too old which doesn't support HTML5 video.

        </video>

    </div>

    <script src="./flv.js?v=2"></script>

    <script>

         if (flvjs.isSupported()) {

            startVideo()

        }

        function startVideo(){

            var videoElement = document.getElementById('videoElement');

            var flvPlayer = flvjs.createPlayer({

                type: 'flv',

                isLive: true,

                hasAudio: true,

                hasVideo: true,

                enableStashBuffer: true,

                url: 'https://xl.live-play.acgvideo.com/live-xl/520658/live_12860646_332_c521e483.flv?wsSecret=778d91efcb22c588be28cb67ebe57082&wsTime=1510929009'

            });

            flvPlayer.attachMediaElement(videoElement);

            flvPlayer.load();

            flvPlayer.play();

        }

        videoElement.addEventListener('click', function(){

            alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )

        })

        function destoryVideo(){

            flvPlayer.pause();

            flvPlayer.unload();

            flvPlayer.detachMediaElement();

            flvPlayer.destroy();

            flvPlayer = null;

        }

        function reloadVideo(){

            destoryVideo()

            startVideo()

        }

    </script>

</body>

</html>

flv.js问题：（暂时发现这几个）

1. 播放一段时间后，音视频不同步

2. 播放一段时间后，音频模糊

3. 暂停后继续播放是接着暂停时的场景继续播，对于直播会产生延迟 =》 临时解决方案：暂停后继续播放时，手动销毁视频再重新加载播放

4. 手机端兼容性差

--------------------------------------------

1,2 问题解决方案：

尝试设置 config.fixAudioTimestampGap = false

控制台将不会输出大量警告信息。

经检测，不同的推流客户端，会导致音视频同步问题有不一样的体现。

LFLiveKit 的音频流时间戳问题，定期会有两帧之间存在两倍时间戳差，会导致严重音画不同步。

目前在我们平台，ios客户端音视频均同步，安卓客户端音视频不同步，需要设置flvjs的config.fixAudioTimestampGap = false才会音视频同步。

github issue：https://github.com/Bilibili/flv.js/issues/136

----------------------------------------------

判断flv.js在手机端是否支持点播和httpflv直播：

是否支持点播视频：flvjs.getFeatureList().mseFlvPlayback

是否支持httpflv直播流：flvjs.getFeatureList().mseLiveFlvPlayback

目前测试结果：

ios ：均不支持，包括微信和safari

安卓：微信均不支持；其他浏览器部分支持点播，全部不支持直播

完整版demo：https://github.com/saysmy/http-flv

--------------------------------------------

2019-01-05更新

经过多天的测试，对数十位主播分别用flvjs的master分支、#136、#354进行10分钟到2小时的测试，总结一下结论：

1. master分支、issue 136 都会出现不同程度主播音画不同步的情况，master分支音画不同步情况尤其严重。

2. #354 pr 可以正常播放所有主播的音视频，均同步。

3. 腾讯云TCPlayerLite和Web 直播播放器 1.0均使用flvjs库进行以html5方式播放flv（猜测使用master分支），经测试也是出现大面积音画不同步现象。

结论：

如果想在pc上使用flvjs播放flv格式直播，请选用 flvjs的PR#354。

也期待flvjs作者可以尽早确认此PR并合并到master，造福全人类！

HTTP-FLV直播初探的更多相关文章

  1. Car-eye-http-flv-module 实现nginx-rtmp-mudule HTTP方式的FLV直播功能

    nginx-rtmp-mudule RTMP 是一款优秀的Car-eye-http-flv-module 是在nginx-rtmp-mudule RTMP基础上修改的流媒体服务器,除了支持flash播 ...

  2. hls&flv直播请求过程

    hls&flv直播请求过程 直播类产品层出不穷,从各方面塑造了我们的生活方式.直播产品中,延时是决定用户体验的关键因素,它也将间接决定直播产品的成败.这其间,对延时影响较大的就是直播架构中选择 ...

  3. HLS视频点播&直播初探

    前端可选的视频直播协议大致只有两种: RTMP(Real Time Messaging Protocol) HLS(HTTP Live Streaming) 其中RTMP是Adobe开发的协议,无法在 ...

  4. 【转】HLS视频点播&直播初探

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  5. flv.js的追帧、断流重连及实时更新的直播优化方案

    目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...

  6. 从Html5直播到互动直播，看直播协议的选择

    目前,国内主流的直播协议有HLS.RTMP.HTTP FLV,适用于不同的直播场景. 一.HLS.RTMP与HTTP FLV 1.HLS HLS 全称是 HTTP Live Streaming, 是一 ...

  7. 基于nginx-rtmp-module模块实现的HTTP-FLV直播模块（nginx-http-flv-module）

    本文后续的内容将在这里更新:<基于nginx-rtmp-module模块实现的HTTP-FLV直播模块(nginx-http-flv-module)续>.注意:下文的配置很多已经不能用了, ...

  8. FLV提取AAC音频单独播放并实现可视化的频谱

    如上图,要实现对FLV直播流中音频的识别,并展示成一个音频相关的动态频谱. 一. 首先了解下什么是声音? 能量波,有频率有振幅,频率高低就是音调,振幅大小就是音量:采样率是对频率采样,采样精度是对幅度 ...

  9. 阿里云 Aliplayer高级功能介绍(四)：直播时移

    基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...

随机推荐

  1. linux的基本java环境搭建

    1.安装rz,sz以便于上传和下载文件 yum install -y lrzsz 2.安装java环境 -- jdk1.8 官网下载jdk1.8:http://www.oracle.com/techn ...

  2. hdu5696 区间的价值

    区间的价值 我们定义"区间的价值"为一段区间的最大值*最小值. 一个区间左端点在L,右端点在R,那么该区间的长度为(R-L+1). 现在聪明的杰西想要知道,对于长度为k的区间,最大 ...

  3. 奥利奥好吃吗？Android 8.0新特性适配测试报告来啦！

    WeTest 导读 谷歌2017 I/O开发者大会上发布了Android 8.0的正式版, 其官方代号为Oreo(奥利奥).网上关于Android8.0新功能特性的介绍已铺天盖地,新功能特性会对程序应 ...

  4. java的windows自动化-自动运行java程序

    那么在一些工具齐全并且已经有了一定的写好的java程序的情况下(环境变量和软件见上一章http://www.cnblogs.com/xuezhezlr/p/7718273.html),如何自动化运行j ...

  5. 一张表搞懂各种 Docker 监控方案 - 每天5分钟玩转 Docker 容器技术（86）

    前面我们已经介绍了ps/top/stats.Sysdig.Weave Scope.cAdvisor 和 Prometheus 多种容器监控工具和方案,是时候做一个比较了.下面将从五个方面来对比它们之间 ...

  6. 重写equals和hashCode

    equals()方法 1. 自反性:A.equals(A)要返回true. 2. 对称性:如果A.equals(B)返回true, 则B.equals(A)也要返回true. 3. 传递性:如果A.e ...

  7. PHP操作Memcached

    一.PHP连接Memcached: 一个简单的使用示例: $memcache = new Memcache; $memcache->connect("127.0.0.1",1 ...

  8. C++数组做参数

    首先,看一下下面这段代码: void changearr(int a[],int n){    cout<<sizeof(a)<<endl;         // 输出4}in ...

  9. codeblocks无法编译的问题

    (题外话:网上垃圾资源太多,良心推荐下载 codeblocks的码农们,别TM用DevC++,百度搜索100个不用devc++的理由加上我自己亲身经历!!!) https://jingyan.baid ...

  10. Linux系列教程（七）——Linux帮助和用户管理命令

    上篇博客我们介绍了Linux文件搜索命令,其中find是用的最多的也是功能最强大的文件或目录搜索命令,和另一个搜索命令locate的区别是,find命令是全盘搜索,刚创建的文件也能搜索的到,而loca ...