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。
FFmpeg音视频学习(二)—— 在线播放视频demo_第1张图片
m3u8索引文件:
FFmpeg音视频学习(二)—— 在线播放视频demo_第2张图片


使用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再代理转发到具体的媒体服务器。
粗搭了一个指向本机盘符下的媒体服务器。


效果

通过浏览器访问:
FFmpeg音视频学习(二)—— 在线播放视频demo_第3张图片


to be continued

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

你可能感兴趣的:(学习笔记,其他)