系统中的教程视频有些文件很大,采用直接播放文件的方式,相当卡。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文件,确认这个文件能下载就可以播放没有问题了。

86159ca8f161b2ddceeee0553bc67e42.png
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐