update post

Author: bitnpc

_posts/2022-05-27-hls_intro.md

@@ -54,7 +54,7 @@ tags:
 1. Index file
 2. Alternate Index file
 
-![HLS_Index](/assets/img/post/post-2022-05-27/hls_index.png){: width="972" height="589" .normal}_HLS Index_
+![HLS_Index](/assets/img/post/post-2022-05-27/hls_index.png){: width="972" height="589" .w-50 .normal}_HLS Index_
 
 ### ts 文件
 每个 `ts` 文件都由若干个 `ts packet` 组成，每个 `ts packet` 包是 `188` 字节。
@@ -90,7 +90,7 @@ Easy to integrate with existing key server infrastructure
 - Requires protected HDMI for external output  
 
 流程
-![HLS_fair_play](/assets/img/post/post-2022-05-27/hls_fair_play.png){: width="972" height="589" .normal}_HLS Fair Play_
+![HLS_fair_play](/assets/img/post/post-2022-05-27/hls_fair_play.png){: width="972" height="589"  .normal}_HLS Fair Play_
 
 ## 推流 Demo
 Conceptually, HTTP Live Streaming consists of three parts: the server component, the distribution component, and the client software.
@@ -140,7 +140,10 @@ $ mediastreamsegmenter -w 499 -t 1 224.0.0.50:9121 -s 16 -D -T -f ~/Desktop/hls_
 ```
 
 ### 使用 ffmpeg 推流
-1. 使用 mac 内置采集设备
+既可以使用系统内置摄像头采集音视频，也可以指定本地视频文件。
+
+#### 使用 mac 内置采集设备
+
 ```bash
 $ ffmpeg -f avfoundation -list_devices true -i ""
 
@@ -156,7 +159,7 @@ $ ffmpeg -f avfoundation -list_devices true -i ""
 $ ffmpeg -f avfoundation -framerate 30 -pixel_format uyvy422 -i "0:" -c:v h264 -fflags nobuffer -tune zerolatency -f mpegts udp://192.168.1.5:9121
 ```
 
-2. 使用指定文件
+#### 使用指定文件
 ```bash
 $ ffmpeg -re -i "/Users/tony/Downloads/sample.mp4" -c:v h264 -fflags nobuffer -tune zerolatency -f mpegts udp://192.168.1.5:9121
 ```
@@ -175,7 +178,7 @@ $ ffmpeg -re -i "/Users/tony/Downloads/sample.mp4" -c:v h264 -fflags nobuffer -t
 - 对 `mp4` 文件来说，由于有索引表，可以快速找到某个时间戳所对应的数据，所以 `seek` 操作可以快速完成。
 - `ts` 文件没有时间戳和数据包位置的对应关系，所以对播放器来说，给定 `seek` 的时间戳 `ts_seek`，首先应该根据文件的码率估算一个位置 pos，然后获取该位置的数据包的时间戳 `ts_actual`，如果 `ts_actual` < `ts_seek` ，则需要继续往后读取数据包；如果t s_actual> ts_seek，则需要往前读取数据包，直到读到 `ts_seek` 对应的数据包。所以 `ts` 文件的操作可能更加耗时； 如果 `ts` 包含的是 `CBR` 码流，则 `ts_actual` 与 `ts_seek` 一般差别不大， `seek` 相对较快； 如果 `ts` 包含的 `VBR` 码流， 则 `ts_actual` 与 `ts_seek` 可能相差甚远， 则 `seek` 相对较慢。
 
-![HLS_seek](/assets/img/post/post-2022-05-27/hls_seek.png){: width="972" height="589" .normal}_HLS Seek_
+![HLS_seek](/assets/img/post/post-2022-05-27/hls_seek.png){: width="972" height="589" .w-50 .normal}_HLS Seek_
 
 2. 不同分辨率的 `ts/fMP4` 文件的兼容性问题
 安卓端在播放 `m3u8` 视频时，遇到了花屏问题。查明原因是 `ts` 分辨率改变