小結：
1、HLS原理
視頻--->圖像、聲音分別編碼打包切割容器文件ts，建立純文本索引文件.m3u8
--->播放器http下載容器文件、索引文件，播放，下載
基於HLS可以實現直播和點播
直播有延遲
事先生成容器文件和索引文件，即可點播
HTML5實現視頻直播功能思路詳解_html5教程技巧_腳本之家 https://m.jb51.net/html5/587215.html
發布時間：2017-11-16 17:16:11 作者：腳本之家
發現目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以借助 video.js 采用RTMP），PC端則以 RTMP 為主實時性較好，接下來將圍繞這兩種視頻流協議來展開H5直播主題分享。
一、視頻流協議HLS與RTMP
1. HTTP Live Streaming
HTTP Live Streaming（簡稱 HLS）是一個基於 HTTP 的視頻流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協議。
HLS 協議基於 HTTP，而一個提供 HLS 的服務器需要做兩件事：
編碼：以 H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；分割：把編碼好的 TS 文件等長切分成后綴為 ts 的小文件，並生成一個 .m3u8 的純文本索引文件；瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續播，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：
#EXTM3U #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000 gear1/prog_index.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111 gear2/prog_index.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444 gear3/prog_index.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777 gear4/prog_index.m3u8
可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火牆影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那么至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩沖，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。
對於支持 HLS 的瀏覽器來說，直接這樣寫就能播放了：
<video src=”./bipbopall.m3u8″ height=”300″ width=”400″ preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>
注意：HLS 在 PC 端僅支持safari瀏覽器，類似chrome瀏覽器使用HTML5 video
標簽無法播放 m3u8 格式，可直接采用網上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。
2. Real Time Messaging Protocol
Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，現在屬於 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，並且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。
雖然無法在iOS的H5頁面播放，但是對於iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。瀏覽器端，HTML5 video
標簽無法播放 RTMP 協議的視頻，可以通過 video.js 來實現。
<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>
二、直播形式
目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：
① 背景視頻層
② 關注、評論模塊
③ 點贊動畫
而現行H5類似直播頁面，實現技術難點不大，其可以通過實現方式分為：
① 底部視頻背景使用video視頻標簽實現播放
② 關注、評論模塊利用 WebScoket 來實時發送和接收新的消息通過DOM 和 CSS3 實現
③ 點贊利用 CSS3 動畫
了解完直播形式之后，接下來整體了解直播流程。
HLS 視頻點播初探 - 雲+社區 - 騰訊雲 https://cloud.tencent.com/developer/article/1020521
視頻精簡下減少時長？創意不同意，要不把視頻壓縮下，挖槽那么模糊，創意不同意，好吧，還有其他的優化方案嗎？
HTTP Live Streaming（HLS）是蘋果公司實現的基於HTTP的流媒體傳輸協議，可實現流媒體的直播和點播。原理上是將視頻流分片成一系列HTTP下載文件。特點是將流媒體切分為若干 TS 片段（比如每10秒一段），然后通過一個擴展的 m3u 列表文件將這些 TS 片段集中起來供客戶端播放器接收。
Native支持
Android 3.0+
iOS 3.0+
怎么把mp4文件切分成若干TS片段？
我這里使用了ffmpeg，去官網下載你需要的系統版本，解壓到本地（E:\ffmpeg），配置環境變量（E:\ffmpeg\bin），dos窗口輸入ffmpeg -version 如有信息則說明成功，可以進行接下來切分mp4了。
1、首頁需要切分的視頻必須是視頻編碼為H.264，音頻編碼aac格式的mp4，可通過 ffprobe dnf.mp4命令來查看文件編碼
2、如果不是mp4格式，可用如下命令轉
ffmpeg -i demo.mkv -acodec copy -vcodec copy demo.mp4
3、將mp4切分為ts切片
ffmpeg -i dnf.mp4 -codec:v libx264 -codec:a mp3 -map 0 -f ssegment -segment_format mpegts -segment_list video/index.m3u8 -segment_time 10 video/%03d.ts
-segment_time每隔十秒切一個文件
切片完成后入下所示：
前端頁面可以用video標簽引入擴展m3u8文件將這些TS片段集中來供客戶端播放了。
<video src="video/index.m3u8"></video>