系统中的教程视频有些文件很大，采用直接播放文件的方式，相当卡。m3u8把视频分割成以秒为单位的文件，边播边下，能很好的解决了播放的问题。

Nginx做http解析，ffmepg进行视频转换,video.js网页播放器，三者融合，完美解决。

一、Nginx的配置

Nginx具体的配置方法，见我的知乎中的另一篇Nginx文章，有详细的配置。下面是在Nginx运行正常的情况配置。

要把播放视频的任务由Nginx负责解析，主要配置过程如下：

1、新建视频播放的站点，所有播放视频源都来自此站点

站点目录：E:web_siteftedu-video-hls

域名访问：http:域名ftedu-video-hls，所有这样访问的都解析到以上目录中去。

配置Nginx.conf文件：

upstream server-video{

server localhost:80;

}

#虚拟主机的配置

server {

listen 80;

server_name localhost;

root E:/web_site;

index index.html;

}

server {

listen 80;

server_name 域名;

location /ftedu-video-hls { # http://域名/ftedu-video-hls 都解析到本地

types{ # 解析m3u8类型的设置

application/vnd.apple.mpegurl m3u8;

video/mp2t ts;

}

proxy_pass http://server-video;

access_log off;

add_header Cache-Control no-cache;

add_header Access-Control-Allow-Origin *;

}

location / {

proxy_pass 域名默认WEB服务器;

add_header backendIP $upstream_addr;

access_log off;

proxy_redirect off;

proxy_read_timeout 3600; #超时设置

}

}

nginx -s reload 后， 如果访问：http:域名ftedu-video-hls能正常访问E:web_siteftedu-video-hls目录中的index.html，则配置正常。

2、关于视频播放设置相关的配置说明

和m3u8视频相关的配置在新版本Nginx中都不需要做什么配置了，网上说要添加文件类型映射这都是低版本需要操作，1.17.9这个版本是不用添加什么的。注意上面配置文件这里设置：

types{ # 解析m3u8类型的设置

application/vnd.apple.mpegurl m3u8;

video/mp2t ts;

}

二、ffmepg的使用，生成m3u8文件

1、关键点，视频格式：

一定要转成H264的MP4格式，如果下面的操作出现错误通常都是，视频格式的问题。

2、mp4转成Ts文件的命令

注意以下命令的执行目录都是在：E:web_siteftedu-video-hlsvideo20200407

视频文件的存放地址：E:web_siteftedu-video-hlsvideo20200407

按时间进行排序，这里存放各种培训视频文件，生成后以供解析.

E:ffmpegbinffmpeg -y -i 20200407.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 202004007.ts

说明："E:ffmpegbinffmpeg"这是ffmpeg的路径

20200407.mp4 这是要转的mp4文件

202004007.ts 生成的ts文件

3、生成m3u8文件命令

E:ffmpegbinffmpeg -i 202004007.ts -c copy -map 0 -f segment -segment_time 10 -segment_list 202004007.m3u8 202004007%03d.ts

说明："E:ffmpegbinffmpeg"这是ffmpeg的路径

202004007.ts 上条命令生成的ts文件

-segment_time 10 生成ts文件10秒左右为一段

202004007.m3u8 m3u8文件名

202004007%03d.ts 每段小ts文件的名称

命令执行完成后，生成了很多小ts文件和m3u8文件，这就完成。mp4文件就可以删除了。

三、jQueryVideo.js实现在线播放视频

下载后，在网页里引入：

<link href="css/video-js.min.css" rel="stylesheet">

<script src="js/video.min.js"></script>

<video id="my-video" class="video-js" controls preload="auto" width="400" height="300"

poster="#" data-setup="{}">

<source src="http://域名/ftedu-video-hls/video/20200407/202004007.m3u8" type="application/x-mpegURL">

<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="HTML5 Video Support" target="_blank">supports HTML5 video</a> </p>

</video>

关键点：

<source src="http://域名/ftedu-video-hls/video/20200407/202004007.m3u8" type="application/x-mpegURL">

源引用刚生成的m3u8文件，确认这个文件能下载就可以播放没有问题了。