视频直播协议分 2 种：HLS vs RTMP。

    这篇文章「H5 直播启航」已有很好的总结，摘录如下：

    HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如：MPlayerX、VLC 也都支持 HLS 协议。

    可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应，所以适应性很好，不会受到防火墙影响。但它也有一个致命的弱点：延迟现象非常明显。如果每个 ts 按照 5 秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度，减少 m3u8 中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

    Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端 WEB 播放是它的硬伤。

    这里，我们使用 video.js 实现一个简单的 RTMP 播放页面。2w+ star 看起来靠谱的样子😀
    因为涉及 Flash 还搭配了 videojs-flash 这个库。

    网页视频直播小记 - 图1

    1. <html>
    2. <head>
    3.   <title> Stream Player </title>
    4.   <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video-js.css" rel="stylesheet">
    5.   <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video.js"></script>
    6.   <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
    7. </head>
    8. <body>
    9.  <center>
    10.    <video
    11.      id="livestream"
    12.      class="video-js vjs-default-skin vjs-big-play-centered"
    13.      controls
    14.      autoplay
    15.      preload="auto"
    16.      data-setup='{}'>
    17.      <source src="rtmp://pull-g.kktv8.com/livekktv/100987038" type="rtmp/flv">
    18.    </video>
    19.  </center>
    20. </body>
    21. </html>

    这里有 2 个小坑须要注意下：

    1. 页面不能直接以文件的形式打开，必须托管在 server 上然后以网页的形式打开。可以参考前作：「一个小巧的 Node.js http server」。

    2. 因为依赖于 Flash 播放器，在 Chrome 浏览器中打开时须要设置允许当前网页使用 Flash。

    网页视频直播小记 - 图2

    === THE END ===