FFmpeg基于HLS实现大视频分片下载播放[视频直播二]

时间 2020-05-14

标签 ffmpeg 基于 hls 实现视频分片下载播放直播繁體版

原文原文链接

关于HLS，上篇我们已经讲过，它基于http协议，内容包括两部分：m3u8描述文件，ts媒体文件。
它能够实现视频直播，不过直播有点延迟，延迟大小与循环体的大小有关。咱们将要利用它的循环体，来实现大视频的分片下载播放。
问：怎么将一个视频分片获得m3u8文件?
答：利用ffmpeg工具。
问：那么什么是FFmpeg呢？
答：FFmpeg是一套能够用来记录、转换数字音频、视频，而且将其转化为流的开源程序。
它提供了录制、转换及流化音视频的完整解决方案。包含很是先进的音视频编码解码库libavcodec。
FFmpeg是在Linux平台下开发，但它能够在其余操做系统环境中编译运行。FF表明 fast forward 。
问：FFmpeg的组成？
答：主要包含三部分：
第一部分是四个做用不一样的工具软件，分别是：
ffmpeg.exe，ffplay.exe，ffserver.exe和ffprobe.exe。
•ffmpeg.exe：音视频转码、转换器
•ffplay.exe：简单的音视频播放器
•ffserver.exe：流媒体服务器
•ffprobe.exe：简单的多媒体码流分析器
第二部分是能够供开发者使用的SDK，为各个不一样平台编译完成的库。
若是说上面的四个工具软件都是完整成品形式的玩具，那么这些库就至关于乐高积木同样，咱们能够根据本身的需求使用这些库开发本身的应用程序。这些库有：
•libavcodec：包含音视频编码器和解码器
•libavutil：包含多媒体应用经常使用的简化编程的工具，如随机数生成器、数据结构、数学函数等功能
•libavformat：包含多种多媒体容器格式的封装、解封装工具
•libavfilter：包含多媒体处理经常使用的滤镜功能
•libavdevice：用于音视频数据采集和渲染等功能的设备相关
•libswscale：用于图像缩放和色彩空间和像素格式转换功能
•libswresample：用于音频重采样和格式转换等功能
第三部分是整个工程的源代码，不管是编译出来的可执行程序仍是SDK，都是由这些源代码编译出来的。
FFmpeg的源代码由C语言实现，主要在Linux平台上进行开发。FFmpeg不是一个孤立的工程，它还存在多个依赖的第三方工程来加强它自身的功能。在当前这一系列的博文/视频中，咱们暂时不会涉及太多源代码相关的内容，主要以FFmpeg的工具和SDK的调用为主。到下一系列咱们将专门研究如何编译源代码并根据源代码来进行二次开发。javascript

下载与安装FFmpeg
《FFmpeg官网》html

配置环境变量java

【使用】
在视频所在的文件夹，输入如下命令（我这里有一个123.mp4的电影）：编程

ffmpeg -i 80s.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 60 output/output.m3u8

初始视频地址123.mp4
hls_time 10 表示切片视频的时长,默认为2
hls_list_size 表示 m3u8 文件记录切片的数量,默认为5.即只记录最后5条切片,设置为0表示记录全部切片浏览器

漫长的等待.......服务器

问：浏览器怎么播放m3u8格式的视频？
答：使用safari浏览器打开就能够播放数据结构

<!DOCTYPE hmtl>
    <html>
    <head>
    <title>the5fire m3u8 test</title>
    </head>
    <body>
    <video controls autoplay >
            <source src="http://127.0.0.1:8080/frozen/video/finish/output.m3u8">
    </video>
    </body>

可是，在其余浏览器上却：ide

所以咱们得调成使用flash播放，这里使用的是swfobject.js。《StrobeMediaPlayback.swf》
【拓展：swfobject.js】
首先，咱们要为SWF资源预留一个HTML结点。这个HTML结点内的全部内容都会在客户端被Flash资源替换，当客户端没有安装Flash播放器的时候，这些内容会显示出来。这一特点在SEO以及对用户体验方面很是有必要。函数

<!DOCTYPE hmtl>
    <html>

        <head>
            <meta charset="UTF-8">
            <title>m3u8播放器</title>
            <script type="text/javascript" src="swfobject/src/swfobject.js" ></script>
        </head>

        <body>
            <div id="player">
            </div>
            <script>
                var flashvars = {
                    // M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m) 
                    // escaped it for urls with ampersands         
                    src: escape("http://127.0.0.1:8080/frozen/video/finish/output.m3u8"),
                    // url to OSMF HLS Plugin         
                    //plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf",
                    plugin_m3u8:"http://127.0.0.1:8080/frozen/video/finish/HLSProviderOSMF.swf"

                };
                var params = {
                    // self-explained parameters         
                    allowFullScreen: true,
                    allowScriptAccess: "always",
                    bgcolor: "#000000"
                };
                var attrs = {
                    name: "player"
                };

                swfobject.embedSWF(
                    // url to SMP player         
                    //"http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf",
                    "http://127.0.0.1:8080/frozen/video/finish/StrobeMediaPlayback.swf",
                    // div id where player will be place         
                    "player",
                    // width, height         
                    "800","485",
                    // minimum flash player version required         
                    "10.2",
                    // other parameters         
                    null, flashvars, params, attrs
                );
            </script>
        </body>

    </html>

大功告成！！！！工具