FFmpeg音视频学习（二）—— 在线播放视频demo

前言

RTMP协议连接流媒体服务器成本太高，
我们选择使用HLS流媒体协议连接http服务器（Nginx）来进行近实时流式传输。

将视频分段成.ts文件，10s一段，可快进定位到某一段文件。
m3u8索引文件，每段ts文件都被记录在其中。

---

处理视频

将视频转换为m3u8/ts文件
（据说由MP4格式转化播放效果会比较好？）

将avi格式视频转换为MP4格式（其他格式类推）：
ffmpeg -i hero.avi -c:v libx264 -s 1280x720 -pix_fmt yuv420p -b:a 127k -b:v 2085k -r 20 .\hero.mp4
-c:v libx264：视频编码采用x264
-s：视频的分辨率
-pix_fmt：像素采样方式，主流三种：YUV4:4:4, YUV4:2:2, YUV4:2:0。用于根据采样方式从码流中还原每个像素点的YUV（亮度信息与色彩信息）值。
-b：码率
-r：帧率

再将MP4转换为m3u8：
ffmpeg -i hero.mp4 -hls_time 10 -hls_list_size 0 -hls_segment_filename ./hls/hero_%05d.ts ./hls/hero.m3u8
-hls_time：设置每片的长度，单位为秒
-hls_list_size：保存的分片的数量，设置为0表示保存所有分片
-hls_segment_filename：段文件的文件名

我是直接下载了一个MP4格式的视频，所以新建一个hls文件夹后，直接转换成m3u8。

m3u8索引文件：

---

使用Nginx搭建媒体服务器

这里大概意思意思本机搭建。

 # 媒体服务器
   server {
	listen	      90;
	server_name   localhost;

	# 视频目录
	location /video/ {
		alias  E:/workspace/orcas/video/;
	}
   }

代理：

 # 媒体服务器
    upstream video_server_pool {
	server 127.0.0.1:90 weight=10;
    }

 # 媒体服务代理
   server {
	listen        80;
	server_name video.orcas.com;

	location /video/ {
		proxy_pass http://video_server_pool;
		add_header Access-Control-Allow-Origin $origin_list;
		add_header Access-Control-Allow-Credentials true;
		add_header Access-Control-Allow-Methods GET;
	}
   }

---

前端代码

选择使用Video.js的H5播放器，在浏览器不支持H5时会切换至Flash播放器。
还需要它的一个hls协议的插件videoj-contrib-hls.js。
都在前端引入。
video.html：

<video id=example-video width=800 height=600 class="video-js vjs-default-skin vjs-big-play-centered" controls
       poster="http://127.0.0.1:90/video/add.jpg">
    <source
            src="http://video.orcas.com/video/hls/hero.m3u8"
            type="application/x-mpegURL">
</video>
<input type="button" onClick="switchvideo()" value="switch"/>

<script src="/plugins/videojs/video.js"></script>
<script src="/plugins/videojs/videojs-contrib-hls.js"></script>

source中的地址会请求到Nginx代理服务器，然后Nginx再代理转发到具体的媒体服务器。
粗搭了一个指向本机盘符下的媒体服务器。

---

效果

通过浏览器访问：

---

to be continued

有时间再学习下如何倍速播放等更多的功能。