什么是流媒体
流媒体就是将视频文件分成许多小块儿，将这些小块儿作为数据包通过网络发送出去，实现一边传输视频数据 包一边观看视频。
什么是流式传输
客户端通过链接视频服务器实时传输音、视频信息，实现“边下载边播放”。
- 顺序流式传输
即顺序下载音、视频文件，可以实现边下载边播放，不过，用户只能观看已下载的视频内容，无法快进到未 下载的视频部分，顺序流式传输可以使用Http服务器来实现，比如Nginx、Apache等。 -
实时流式传输
实时流式传输可以解决顺序流式传输无法快进的问题，它与Http流式传输不同，它必须使用流媒体服务器并 且使用流媒体协议来传输视频，它比Http流式传输复杂。常见的实时流式传输协议有RTSP、RTMP、RSVP 等。
业务流程
1.将原始的视频文件通过编码器转换为适合网络传输的流格式，编码后的视频直接输送给媒体服务器
2.媒体服务获取到编码好的视频文件，对外提供流媒体数据传输接口，接口协议包括 ：HTTP、RTSP、 RTMP等
3.播放器通过流媒体协议与媒体服务器通信，获取视频数据，播放视频
视频点播方案
- 方案1
播放器通过 http协议从http服务器上下载视频文件进行播放
问题: 必须等到视频下载完才可以播放，不支持快进到某个时间点进行播放 - 方案2
播放器通过rtmp协议连接媒体服务器以实时流方式播放视频
问题: 使用rtmp协议需要架设媒体服务器，造价高，对于直播多采用此方案 - 方案3
播放器使用HLS协议连接http服务器（Nginx、Apache等）实现近实时流方式播放视频
HLS协议：基于Http协议，视频封装格式为ts，视频的编码格式为H264,音频编码格式为MP3、AAC或者AC- 3。
采用HLS方案可以实现边下载边播放，并且不用使用rtmp流媒体协议，不用构建专门的媒体服务器，节省成本
所以我们这里选择方案3
什么是HLS
HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。
IOS、Android设备、及各大浏览器都支持HLS协议。
- HLS的工作方式
将视频拆分成若干ts格式的小文件，通过m3u8格式的索引文件对这些ts小文件建立索引。一般 10秒一个ts文件，播放器连接m3u8文件播放，当快进时通过m3u8即可找到对应的索引文件，并去下载对应的ts文 件，从而实现快进、快退以近实时 的方式播放视频。 - HLS视频编码
将视频编码成HLS格式，最终会输出两类文件，m3u8文件和ts文件 - 视频播放
1.客户端先下载m3u8文件
2.根据m3u8文件列表下载ts文件
3.客户端播放ts文件
什么是视频编码
所谓视频编码方式就是指通过压缩技术，将原始视频格式的文件转换成另一种视频格式文件的方式。
- 文件格式
指.mp4、.avi、.rmvb等 这些不同扩展名的视频文件的文件格式。 - 编码格式
通过音视频的压缩技术，将视频格式转换成另一种视频格式，通过视频编码实现流媒体的传输。 比如：一个.avi的视频文件原来的编码是a，通过编码后编码格式变为b，音频原来为c，通过编码后变为d。 - 常见音视频编码格式
MPEG系列 （由ISO[国际标准组织机构]下属的MPEG[运动图象专家组]开发 ）视频编码方面主要是Mpeg1（vcd用 的就是它）、Mpeg2（DVD使用）、Mpeg4（的DVDRIP使用的都是它的变种，如：divx，xvid等）、Mpeg4 AVC（正热门）；音频编码方面主要是MPEG Audio Layer 1/2、MPEG Audio Layer 3（大名鼎鼎的mp3）、 MPEG-2 AAC 、MPEG-4 AAC等等。注意：DVD音频没有采用Mpeg的。
H.26X系列 （由ITU[国际电传视讯联盟]主导，侧重网络传输，注意：只是视频编码） 包括H.261、H.262、 H.263、H.263+、H.263++、H.264（就是MPEG4 AVC-合作的结晶）
目前最常用的编码标准是视频H.264，音频AAC。
FFmpeg
FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移植性和编解码质量，libavcodec里很多code都是从头开发的。
FFmpeg在Linux平台下开发，但它同样也可以在其它操作系统环境中编译运行，包括Windows、Mac OS X等。这个项目最早由Fabrice Bellard发起，2004年至2015年间由Michael Niedermayer主要负责维护。许多FFmpeg的开发人员都来自MPlayer项目，而且当前FFmpeg也是放在MPlayer项目组的服务器上。项目的名称来自MPEG视频编码标准，前面的"FF"代表"Fast Forward"
FFmpeg被许多开源项目采用，QQ影音、暴风影音等。
- Linux下安装ffmpeg
# 1.安装ffmpeg时需要提前安装yasm插件
wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -xvf yasm-1.3.0.tar.gz
cd yasm-1.3.0/
./configure && make && make install
# 2.安装ffmpeg
wget http://www.ffmpeg.org/releases/ffmpeg-3.4.tar.gz
tar -xvf ffmpeg-3.4.tar.gz
cd ffmpeg-3.4/
./configure && make && make install
# 3.查看版本号
[root@centos7-app ffmpeg-3.4]# ffmpeg -version
ffmpeg version 3.4 Copyright (c) 2000-2017 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-28)
configuration:
libavutil 55. 78.100 / 55. 78.100
libavcodec 57.107.100 / 57.107.100
libavformat 57. 83.100 / 57. 83.100
libavdevice 57. 10.100 / 57. 10.100
libavfilter 6.107.100 / 6.107.100
libswscale 4. 8.100 / 4. 8.100
libswresample 2. 9.100 / 2. 9.100
- windows下环境搭建
1.下载FFmpeg
FFmpeg下载地址
- 配置环境变量
把解压后的软件路径E:\soft\ffmpeg-20191029-d3dee67-win64-static\bin加到环境变量 - 是否安装成功
C:\Users\Administrator>ffmpeg -version
ffmpeg version git-2019-10-29-d3dee67 Copyright (c) 2000-2019 the FFmpeg developers
built with gcc 9.2.1 (GCC) 20191010
configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --e
nable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-
libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt --enable-amf
libavutil 56. 35.101 / 56. 35.101
libavcodec 58. 60.100 / 58. 60.100
libavformat 58. 33.100 / 58. 33.100
libavdevice 58. 9.100 / 58. 9.100
libavfilter 7. 66.100 / 7. 66.100
libswscale 5. 6.100 / 5. 6.100
libswresample 3. 6.100 / 3. 6.100
libpostproc 55. 6.100 / 55. 6.100
- 把avi格式转为mp4
ffmpeg -i test.avi -c:v libx264 -s 1280x720 -pix_fmt yuv420p -b:a 63k -b:v 753k -r 18 .\test.mp4
-c:v 视频编码为x264 ，x264编码是H264的一种开源编码格式。
-s 设置分辨率
-pix_fmt yuv420p：设置像素采样方式，主流的采样方式有三种，YUV4:4:4，YUV4:2:2，YUV4:2:0，它的作用是 根据采样方式来从码流中还原每个像素点的YUV（亮度信息与色彩信息）值。
-b 设置码率，-b:a和-b:v分别表示音频的码率和视频的码率，-b表示音频加视频的总码率。码率对一个视频质量有 很大的作用，后边会介绍。
-r：帧率，表示每秒更新图像画面的次数，通常大于24肉眼就没有连贯与停顿的感觉了。
# 码率
码率又叫比特率即每秒传输的bit数，单位为bps(Bit Per Second)，码率越大传送数据的速度越快。
码率的计算公式是：文件大小（转成bit）/ 时长（秒）/1024 = kbps 即每秒传输千位数
例如一个1M的视频，它的时长是10s，它的码率等于
1*1024*1024*8/10/1024 = 819Kbps
- mp4生成m3u8
# 将test.mp4视频文件按每10秒生成一个ts文件，最后生成一个m3u8文件，m3u8文件就是ts的索引文件
ffmpeg ‐i test.mp4 ‐hls_time 10 ‐hls_list_size 0 ‐hls_segment_filename ./hls/test_%05d.ts ./hls/test.m3u8
-hls_time 设置每片的长度，单位为秒
-hls_list_size n: 保存的分片的数量，设置为0表示保存所有分片
-hls_segment_filename ：段文件的名称，%05d表示5位数字
播放器选择
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或 浏览器插件播放器，其中以flash和H5播放器最常见。
flash播放器：缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览 器对flash支持也很好。
H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并且随着前端技术的发展，h5技术会越来越成熟。
这里我们采用H5播放器，使用Video.js开源播放器。
Video.js： https://github.com/videojs/video.js
videojs-contrib-hls： https://github.com/videojs/videojs-contrib-hls#installation （videojs-contrib-hls是播放hls的一个插件） 使用文档：http://docs.videojs.com/tutorial-videojs_.html
我们这里使用 video.js 6.7.3 版本，videojs-contrib-hls 5.14.1版本。
搭建媒体服务器
HLS协议是基于Http协议的，我们这里使用Nginx作为视频服务器。
- nginx.conf
# nginx.conf
server {
listen 80;
server_name localhost;
#视频目录
location /{
root /usr/share/nginx/html; # 项目路径
index index.html index.htm;
}
}
- 测试代码
./html/
├── index.html
├── video
│ ├── test_00000.ts
│ ├── test_00001.ts
│ ├── test_00002.ts
│ ├── test_00003.ts
│ ├── test_00004.ts
│ ├── test_00005.ts
│ ├── test_00006.ts
│ ├── test_00007.ts
│ ├── test_00008.ts
│ ├── test_00009.ts
│ ├── test_00010.ts
│ └── test.m3u8
└── videojs
├── video.js
├── videojs-contrib-hls.js
└── video-js.css
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>视频播放</title>
<link href="./videojs/video-js.css" rel="stylesheet">
</head>
<body>
<video
id=example-video
width=800 height=600
class="video-js vjs-default-skin vjs-big-play-centered"
controls
poster="http://192.168.5.134/video/add.jpg">
<source src="http://192.168.5.134/video/test.m3u8" type="application/x-mpegURL">
</video>
<input type="button" onClick="resetVideo()" value="switch"/>
<script src="./videojs/video.js"></script>
<script src="./videojs/videojs-contrib-hls.js"></script>
<script>
var player = videojs('example-video');
//player.play();
function resetVideo(){
player.src({
src: 'http://192.168.5.134/video/test.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});
player.play();
}
</script>
</body>
</html>
- 测试
http://192.168.5.134
