关键词：
目录
本文简单介绍一下如何使用FFmpeg、HLS和Nginx搭建在线视频流媒体播放系统，并使用浏览器进行验证测试。
1、综述
HLS (HTTP Live Streaming)是Apple的动态率自适应技术。主要用于PC和Apple终端的音视频服务。HLS包括一个m3u8的索引文件，TS媒体分片文件和key加密串文件，m3u8文件中包含了多个ts文件片的信息。
常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议，这两种是完全不同的方式，目前比较方便又好用的是用 HTTP 渐进下载方法。在这个中 Apple 公司的 HTTP Live Streaming 是这个方面的代表。它最初是苹果公司针对iPhone、iPod、iTouch和iPad等移动设备而开发的流媒体流方式，现在已经被广泛地应用于各种直播和录播系统中。
本文将详细讲述如何使用FFmpeg、HLS和Nginx在Linux系统中搭建一个在线视频播放系统。其中Nginx用于提供web访问服务，FFmpeg用来生成ts文件，m3u8-segmenter用来生成存放多个ts文件片信息的m3u8文件，HLS则是支持web页面直接访问后台媒体文件（m3u8和ts文件片）的协议。
2、安装nginx
在真正安装nginx服务器软件之前，我们先得安装编译所需的依赖库。在shell中执行以下命令，使用默认安装即可，如遇权限不足，请在命令行前加sudo命令。
1）安装gcc g++的依赖库
#apt-get install build-essential
#apt-get install libtool2）安装pcre依赖库
#apt-get install zlib1g-dev3）安装ssl依赖库
#apt-get install openssl下图表明本系统中已经安装了这些依赖库：
一切工作准备完毕，接下来就可以开始安装Nginx了,编译安装过程如下：
1）下载nginx源码压缩包
# wget http://nginx.org/download/nginx-1.11.3.tar.gz注意：这里下载的是nginx版本是1.11.3，具体获取最新版本请至官网查询。
2）解压nginx-1.11.3.tar.gz
#tar -zxvf nginx-1.11.3.tar.gz3）进入解压目录，配置指定安装路径
#cd nginx-1.11.3
#./configure --prefix=/usr/local/nginx4）编译，安装
#make
#make install上述步骤一切顺利会在/usr/local/nginx目录中安装好编译生成的Nginx，结果如下所示：
到此，Nginx的安装结束。
3、安装ffmpeg
这里我们使用源码编译安装FFmpeg，步骤如下：
1）下载源码，地址为：http://ffmpeg.org/download.html
2）进入ffmpeg源码目录
将下载的ffmpeg源码拷贝到/home/share目录中，如上所示。
3）编译安装YASM
#sudo apt-get install yasm4）安装libx264编解码库
#sudo apt-get install libx264-dev5）配置ffmpeg，编译，安装
#./configure --enable-libx264 --enable-gpl --enable-shared --prefix=/usr/local/ffmpeg
#make
#make install以上步骤成功会在/usr/local/ffmpeg目录中安装好ffmpeg，如下所示：
可执行文件在bin目录中。
4、安装m3u8-segmenter
这个工具是用于分割和创建m3u8文件，它从像ffmpeg这样的工具中获取MPEG-TS流，并将其分解为多个ts-片段，适合于来自iphone等设备的HTTP流媒体流。它还创造了M3U8流描述符，这是这种类型的流所必需的。编译安装步骤如下：
1）安装libavformat-dev
#apt-get install libavformat-dev2）进入m3u8-segmenter源码目录,编译安装
#cd /home/share/m3u8-segmenter
#aclocal
#automake -ac
#autoconf
#./configure
#make
#make install5、制作m3u8文件与ts文件
服务器的搭建准备工作已经就绪，现在我们来准备视频源。我们在Ubuntu系统的/home/share目录中准备了一段视频文件，接下来我们就开始制作m3u8文件与ts文件。
1）进入视频文件目录
#cd /home/share2）调用ffmpeg制作ts文件
# LD_LIBRARY_PATH=/usr/local/ffmpeg/lib /usr/local/ffmpeg/bin/ffmpeg -i test.wmv -acodec copy -vcodec libx264 test.ts3）制作m3u8文件
#/usr/local/bin/m3u8-segmenter -i /home/share/test.ts -n 30 -p /home/share/sample_test -m /home/share/test.m3u8 -u http://192.168.109.130/hls/注意，由于本案例中ffmpeg的安装指定的—prefix=，因此环境变量中并没有ffmpeg的库路径和path路径。因此上面的ffmpeg使用了全路径指定，m3u8-segmenter也是如此。
执行完上述命令之后，我们在/home/share目录中就生成了我们最终测试所需要的m3u8文件和ts文件片：
我们打开test.m3u8文件可以查看到以下内容：
m3u8文件中存储了ts时间片文件的url路径，home前面的的路径是我们在生成m3u8文件时指定的。hls//home/share/*是我们将ts文件片放到Nginx服务器html目录中的目录层级。
6、VLC播放器中测试
我们将m3u8文件和ts文件片拷贝到nginx的web工作目录，/usr/share/nginx/html(这个路径具体与安装路径相关)。因为不是root用户，我们只用命令行去操作，具体步骤如下：
1）将ts文件片以及m3u8文件拷贝到nginx的工作目录中
#cp -r /home/share/*.ts /usr/local/nginx/html/
# rm -f /usr/local/nginx/html/test.ts 注：test.ts不是我们要的测试文件，这里删除掉
# cp -r /home/share/test.m3u8 /usr/local/nginx/html/2）启动Nginx
# /usr/local/nginx/nginx -c /usr/local/nginx/conf/nginx.conf
# /usr/local/nginx/nginx –s reload以上操作执行完毕后，我们的服务器就搭建好并已启动，我们在window系统中打开vlc播放器，选择媒体->打开网络串流，在编辑框中输入m3u8文件的服务器地址，如下所示：
继续点击播放，效果如下：
7、web网页中的播放测试
接下来我们来实现网页中播放该视频，实现步骤如下：
1）下载koko.js播放网页视频的js脚本，地址：https://www.kokoplayer.com
2）编写html网页代码，如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<title>VRS</title>
</head>
<body>
<script src="/koko.js"></script>
<script>
function init()
var config = ;
config.autoPlay = true;
config.debug = true;
config.iconUrl = "koko.svg";
config.loop = true;
config.displayDuration = false;
config.enableTimeJump = false;
config.enableSmartPlay = false;
config.hideControls = true;
config.clickToPlay = true;
config.showPosterOnEnd = true;
config.controls = ['fast-forward', 'fullscreen', 'volume', 'play'];
<!--创建播放器实例对象-->
var player = new KoKoPlayer();
<!--设置播放窗口以及传入相关配置参数-->
var playerInstances = player.setup(document.querySelector("myvideo"),config);
playerInstances[0].mime = "video/mp4";
playerInstances[0].source(
type: 'video',
title: '测试视频',
autoplay: true,
sources: [
src: '/test.m3u8',<!--视频源地址-->
type:'application/x-mpegurl'
],
tracks: [
kind: 'captions',
label: '中文',
srclang: 'cn',
src: 'https://cdn.kokoplayer.com/video/hls/pirates-5/kokoplayer.vtt',
default: true
]
);
</script/body>
<body onload="init()">
<!--video元素控件用来显示视频-->
<video preload="none" type="video/mp4"> width="640" height="360" controls="true" autoplay="autoplay"></video>
</body>
</html>3）将编写好的代码拷贝到服务器的html目录中，这是Nginx服务器默认的根目录
# cp -r /home/share/koko.js /usr/local/nginx/html/
# cp -r /home/share/index.html /usr/local/nginx/html/这里只为测试，将nginx根目录中index.html直接替换，因为网页输入服务器地址默认就是打开Index.html。下面我们打开火狐浏览器，输入http://192.168.109.130：
火狐浏览器可以顺利播放。
我们接着用IE浏览器测试一下：
IE览器可以顺利播放,测试通过。
网易视频云：用nginx搭建flv,mp4,hls流媒体服务器
...频平台。今天，网易视频云就给大家分享关于用Nginx搭建flv,mp4,hls流媒体服务器的技术干货& 查看详情
nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和vue中播放http-flv视频流
场景Windows上搭建NginxRTMP服务器并使用FFmpeg实现本地视频推流：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/120868728Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article... 查看详情
用srs搭建webrtc流媒体服务器实战
...合，学习成本较高。而SRS聚焦视频相关，功能专一，语言使用了高性能的c++,并且支持Rtmp转Webrtc等其他强大的功能的媒体服务器。1.源码编译安装运行SRS使用这个命令开启RTC支持2.SRS常用命令3.配置nginx代理若不需要浏览器推流，... 查看详情
在mac上搭建nginx服务器(视频直播)(代码片段)
在Mac上搭建Nginx服务器前言:这里搭建额Nginx服务器,主要是起来作为视频直播推流拉流的中转站(流媒体处理服务器).按照下面的步骤开始:1.安装Homebrew,执行命令Homebrew简称brew,是macOS上的软件管理包工具,可以在mac中卸载和安装软件,... 查看详情
监控流媒体服务器的搭建和使用
...本厂的摄像头在兼容性上存在一些问题，如果一个项目中使用多个厂家的摄像头，会是一个大问题，因此需要有通用平台 查看详情
windows使用nginx+ffmpeg搭建rtmp服务器(代码片段)
简介Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。nginx-rmtp-module是Nginx服务器的流媒体插件。nginx通过rtmp模块提供rtmp服务,ffmpeg推送一个rtmp流到nginx,然后客户端通过访问nginx来收看实时视频流。... 查看详情
mac搭建nginx流媒体服务器，进行推流，拉流
...可以向这个地址进行推流，并且进行拉流播放后面我们会使用ffmpeg向这个地址推流rtmp://localhost:1935/mytv/room并且用vlc拉取这个地址的流进行播放执行命令，即可启动nginx服务器验证是否启动成功，只需要在浏览器中访问下以下链接... 查看详情
win2008server搭建流媒体服务（在线看电影）
什么是流媒体服务呢。所谓流媒体是指采用流式传输的方式在Internet播放的媒体格式，与需要将整个视频文件全部下载之后才能观看的传统方式相比，流媒体技术是通过将视频文件经过特殊的压缩方式分成一个个的小数据包，由... 查看详情
如何在win10中搭建流媒体服务器搭建
使用IIS在win2003sever上配置免费流媒体服务器第一步：通过任务栏的“开始->管理工具->internet信息服务管理器”第二步：启动INTERNET信息服务管理器设置窗口后在“网站”下将默认网站删除。然后在“网站”上点右键选择“新... 查看详情
使用 Qt MultiMedia 和 Widgets 播放网络流媒体视频
】使用QtMultiMedia和Widgets播放网络流媒体视频【英文标题】：PlayinganetworkstreamingvideousingQtMultiMediaandWidgets【发布时间】：2016-07-3112:47:34【问题描述】：我正在尝试构建一个简单的qt应用程序来播放实时视频流。流媒体视频未在我的... 查看详情
dss搭建手机流媒体服务器
...一下手机流媒体服务器的搭建，目的是实现通过3G手机看在线视频。开始的时候研究了一下Tudou手机版，可它哪并没有实现在线播放，因为视频地址是http协议的。参看了许多文章，终于了解到要用RTSP、MMS这类。RTSP有一个来自Apple... 查看详情
手把手教你从安装centos7.4镜像开始，搭建iot视频监控系统
...华为云ECS服务器安装CentOS7.4镜像，部署GINX服务器、搭建物联网视频监控系统》，作者：DS小龙哥。在CentOS7.4服务器版本的环境下安装nginx服务器、配置文件服务器、流媒体服务器。（1）配置NGINX为HTTP服务器，安装rtmp模... 查看详情
windows+nginx+rtmp+obs搭建流媒体推流服务(代码片段)
推流服务器搭建1、下载nginx-1.2.11.3-Gryphon地址：http://nginx-win.ecsds.eu/download/2、下载rtmp模块与nginx.exe放在同一目录gitcloneGitHub-arut/nginx-rtmp-module:NGINX-basedMediaStreamingServer3、配置文件conf/nginx-win.confrtmp server listen1935; chunk_siz... 查看详情
流媒体技术学习笔记之nginx-rtmp-module统计某频道在线观看流的客户数(代码片段)
获得订阅者人数，可以方便地显示观看流的客户数。查看已经安装好的模块/usr/local/nginx/sbin/nginx-V安装从源编译Nginx和Nginx-RTMP所需的工具sudoapt-getinstallbuild-essentiallibpcre3libpcre3-devlibssl-dev下载Nginx和Nginx-RTMP源码wgethttp://nginx.org/downloa 查看详情
搭建自己的直播流媒体服务器srs，以及srs+obs直播推拉流使用及配置(代码片段)
...P插件SRS+OBS这里介绍国产开源流媒体服务器SRS的搭建及使用。SRS简介SRS(SimpleRealtimeServer)是一个简单高效的实时视频服务器，是国人写的一款非常优秀的开源流媒体服务器软件，可用于直播/录播/视频客服等多种场景ÿ... 查看详情
使用ffmpeg搭建hls直播系统(代码片段)
...ginx,ssegment]0引言本文作为HLS综述的后续文章。主要目的是使用ffmpeg搭建一个简单的HLS点播及直播系统。使用nginx作为HTTP服务器。HLS不管点播还是直播，都是基于HTTP的文件分发系统，所以本文的基本思路是：使用nginx搭建HTTP服务... 查看详情
windows基于nginx搭建rtmp流媒体服务器（附带所有组件下载地址及验证方法）(代码片段)
...定数据传输的服务器，所以就研究了一下如何搭建及使用。1、下载nginx首先我们要知道一般nginx不能直接配置rtmp服务，在Windows系统上需要特殊nginx版本才能进行搭建:nginx1.7.11.3Gryphon.zip我们可以从这个地址找到该安装包并... 查看详情
stm32mp157-视频监控项目-ffmpeg-nginx-rtmp-流媒体视频(代码片段)
...实现之Nginx_哔哩哔哩_bilibili在教学视频中由于韦东山老师使用的是IMX6ULL开发板做的示例，我自己用的是STM32MP157Pro开发板，在学习过程中发现有一些地方不能直接照搬，否则开发板无法正常实现推流。所以打算把自己... 查看详情