您当前的位置:首页 > 建站知识 > 编程知识

FFmpeg制作视频流及播放

发布时间: 2020-07-14 │ 浏览:2916 

HTML的video标签可以播放视频文件,MP4格式的视频文件如果较大,再加上网速慢时,容易造成卡顿,影响播放体验。解决的办法是对视频文件切片,边下载边播放。

FFmpeg是多媒体处理工具,被广泛应用。那我们就用这个工具来试试吧。

我们去官网下载(https://ffmpeg.zeranoe.com/builds/),目的是要获取最新版本。做为网站程序开发者,使用新技术很重要,因为随着技术的进步,旧版本会爆出漏洞,而新版本会修补已知漏洞。闲话少说,在官网页面上找到【Download】按钮下载:

解压后把整个文件夹放到目的地,我们看看文件夹里的内容:

ffmpeg执行文件在bin文件夹里,点开看下

接着到系统环境变量里,把ffmpeg.exe所在的绝对路径填上,这样做是为了在DOS命令行输入ffmpeg时不用指定路径。


FFmpeg安装配置虽然简单 ,但我们还是要确认一下FFmpeg是否能正常工作,在命令行中输入:ffmpeg –version,回车后看到:

说明FFmpeg安装正常了。

FFmpeg的操作要在命令行上敲键盘输入,我们的网页程序要全自动进行。如何解决这个矛盾?
还好PHP里能调用命令行操作,即shell_exec函数。代码如下:
$video = shell_exec("ffmpeg -y -i a.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb b.ts");
$video = shell_exec("ffmpeg -i b.ts -c copy -map 0 -f segment -segment_list c.m3u8 -segment_time 10 video-%03d.ts");
shell_exec函数的入参就是ffmpeg命令,ffmpeg命令的含义不详细说了,这里只要明白如何使用。
a.mp4是源视频文件;
b.ts是切片后的文件;
c.m3u8是索引文件,后面我们要播放的就是这个m3u8文件;
video-%03d.ts是一个文件系列,即video-000.ts,video-001.ts.....
执行以上代码后,会在a.mp4同一目录下生成b.ts,c.m3u8,video-000.ts......等一系列文件。

接着看如何播放c.m3u8文件。用JS代码实现:
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>
    <source id="source" src="c.m3u8"  type="application/x-mpegURL">
</video>

<script>
    var myVideo = videojs('myVideo',{
        bigPlayButton : true,
        textTrackDisplay : false,
        posterImage: false,
        errorDisplay : false,
    });
    myVideo.play();
    myVideo.pause();
</script>

最后还要在IIS站点上设置MIME类型,

不然IIS认不出.m3u8