FFmpeg利用hls协议实现大视频分片下载视频并播放

最新推荐文章于 2024-08-13 08:33:49 发布

进修的CODER

最新推荐文章于 2024-08-13 08:33:49 发布

阅读量1.9k

点赞数

分类专栏： Web 文章标签： ffmpeg centos7

本文链接：https://blog.csdn.net/lovequanquqn/article/details/102959524

版权

Web 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

HLS，Http Live Streaming 是由Apple公司定义的用于实时流传输的协议，HLS基于HTTP协议实现，传输内容包括两部分，一是M3U8描述文件，二是TS媒体文件。详解
总之:hls协议可以实现视频的直播功能,也可以实现视频的点.我们可以利用点播这一功能点来实现视频的播放,从而不再暴露我们视频的src地址,并实现分片下载播放的功能.

如何将一个视频分片并得到`m3u8`文件

利用ffmpeg工具,一个处理视频图片的强大工具,可以通过命令来执行操作.

安装

window安装详见

使用

在命令行输入ffmpeg -i 80s.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 60 output/output.m3u8即可在output目录下得到m3u8文件以及切片后的ts视频文件

初始视频地址80s.mp4 可以是http开头的绝对地址
hls_time 10 表示切片视频的时长,默认为2
hls_list_size 表示 m3u8 文件记录切片的数量,默认为5.即只记录最后5条切片,设置为0表示记录所有切片

播放 `m3u8`文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>你的课程列表--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
    <meta name="author" content="${site.author}"/>
    <link rel="icon" href="${site.logo}">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/user.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/static/css/admin.css" media="all">
    <link rel="stylesheet" href="${base}/static/css/template.css" media="all">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
</head>
<body class="childrenBody">
<#--<div id="videoWrapper" style="height: 620px;width: 90%;margin-left: 5%;"> </div>'-->
<div style="margin-left: 16%;margin-top: 10px;">
    <video
            id="my-player"
            controls
            preload="auto"
            poster="${video.sectionImgHref}"
            data-setup='{}' width=960px height=560px class="video-js vjs-default-skin" >
        <!-- <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> -->
        <source src="${video.sectionHref}" type="application/x-mpegURL"></source>

        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
            </a>
        </p>
    </video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>
<script>
    var options = {
        html5: {
            hls: {
                withCredentials: true
            }
        }
    };
    var player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('Your player is ready!');

        // In this context, `this` is the player that was created by Video.js.
        this.play();

        // How about an event listener?
        this.on('ended', function() {
            videojs.log('${video.sectionImgHref}');
        });
    });
</script>
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/tools.js"></script>
<!-- 注意：这里的 CDN 资源链接可能不是最新版，具体可访问：https://cdn.baomitu.com/chimee-player -->
<#--<script crossorigin="anonymous" integrity="sha384-SXr8VWwLxnDHbP01tSBd9kLkkBaNLdKiSPgt0JSaFkamzTLeKk43G8Ip6roYcVJQ" src="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.browser.js"></script>-->
<#--<link crossorigin="anonymous" integrity="sha384-PVWz2r7pc/OJZoh44AxKqdptMuhB9o1XwItiKDseXemF5L5qjvbkUad4VJYibvLU" href="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.browser.css" rel="stylesheet">-->
<#--<script crossorigin="anonymous" integrity="sha384-B05N8FHrzfT6J8rg3PPRjeqPQnWuyjZdoSLoAZMYK+msOEPsz/K/Bh6kHyY2C9a1" src="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.min.js"></script>-->
<#--<script>-->
<#--    new ChimeePlayer({-->
<#--        wrapper: '#videoWrapper',  // video dom容器-->
<#--        src: '${video.sectionHref}',-->
<#--        controls: true,-->
<#--        poster:'${video.sectionImgHref}',-->
<#--        kernels: {-->
<#--            hls: {-->
<#--                handler: ChimeeKernelHls,-->
<#--                debug: true-->
<#--            }-->
<#--        }-->
<#--    });-->
<#--</script>-->
</body>
</html>

#####第二版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>你的课程列表--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
    <meta name="author" content="${site.author}"/>
    <link rel="icon" href="${site.logo}">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/user.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/static/css/admin.css" media="all">
    <link rel="stylesheet" href="${base}/static/css/template.css" media="all">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
</head>
<body class="childrenBody">
<style>
    .vjs-paused .vjs-big-play-button,
    .vjs-paused.vjs-has-started .vjs-big-play-button {
        display: block;
    }
    .video-js .vjs-big-play-button{
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.5em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 2.5em;
        background-color: #73859f;
        background-color: rgba(115,133,159,.5);
        border-width: 0.15em;
        margin-top: -1.25em;
        margin-left: -1.75em;
    }
    /* 中间的播放箭头 */
    .vjs-big-play-button .vjs-icon-placeholder {
        font-size: 1.63em;
    }
    /* 加载圆圈 */
    .vjs-loading-spinner {
        font-size: 2.5em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1.5em;
    }
    .video-js.vjs-playing .vjs-tech {
        pointer-events: auto;
    }
    .video-js .vjs-time-control{display:block;}
    .video-js .vjs-remaining-time{display: none;}
</style>
<#--<div id="videoWrapper" style="height: 620px;width: 90%;margin-left: 5%;"> </div>'-->
<div id="video-block">

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>
<script>
    var videoBlock = document.getElementById('video-block');
    ///不同设备不同class
    var videoClass,isPc,options;
    判断PC还是移动端
    var sUserAgent = navigator.userAgent.toLowerCase();
    if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
        //跳转移动端页面
        videoClass = "video-js vjs-default-skin vjs-big-play-centered vjs-16-9 vjs-fluid";
        isPc = false;
    } else {
        //跳转pc端页面
        videoClass = "video-js vjs-default-skin vjs-big-play-centered";
        isPc = true;
        videoBlock.setAttribute("style",'margin-top:10px;margin-left:15%;')
    }
    var videoDiv = '<video\n' +
        '            id="my-player"\n' +
        '            controls\n' +
        '            preload="auto"\n' +
        '            width="600px"\n' +
        '            height="400px"\n' +
        '            class="'+videoClass +'"\n' +
        '            poster="${video.sectionImgHref}"\n' +
        '            data-setup=\'{}\' >\n' +
        '        <!-- <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> -->\n' +
        '        <source src="${video.sectionHref}" type="application/x-mpegURL">\n' +
        '\n' +
        '        <p class="vjs-no-js">\n' +
        '            To view this video please enable JavaScript, and consider upgrading to a\n' +
        '            web browser that\n' +
        '            <a href="http://videojs.com/html5-video-support/" target="_blank">\n' +
        '                supports HTML5 video\n' +
        '            </a>\n' +
        '        </p>\n' +
        '    </video>'

    ///动态更改html内容
    videoBlock.innerHTML = videoDiv;
    <#--if(isPc === true){-->
    <#--    options = {-->
    <#--        volumeMenuButton: {-->
    <#--            inline: false,//设置音量bar为竖直-->
    <#--            vertical: true//设置音量bar为竖直-->
    <#--        },-->
    <#--        html5: {-->
    <#--            hls: {-->
    <#--                withCredentials: true-->
    <#--            }-->
    <#--        }-->
    <#--    };-->
    <#--}else{-->
    <#--    options= {-->
    <#--        volumeMenuButton: {-->
    <#--            inline: false,//设置音量bar为竖直-->
    <#--            vertical: true//设置音量bar为竖直-->
    <#--        },-->
    <#--        html5: {-->
    <#--            hls: {-->
    <#--                withCredentials: true-->
    <#--            }-->
    <#--        }-->
    <#--    };-->
    <#--}-->
    <#--///初始化播放器-->
    <#--var player = videojs('my-player', options, function onPlayerReady() {-->
    <#--    videojs.log('Your player is ready!');-->

    <#--    // In this context, `this` is the player that was created by Video.js.-->
    <#--    this.play();-->

    <#--    // How about an event listener?-->
    <#--    this.on('ended', function() {-->
    <#--        videojs.log('${video.sectionName} load finish!');-->
    <#--    });-->
    <#--});-->
</script>
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/tools.js"></script>
<!-- 注意：这里的 CDN 资源链接可能不是最新版，具体可访问：https://cdn.baomitu.com/chimee-player -->
<#--<script crossorigin="anonymous" integrity="sha384-SXr8VWwLxnDHbP01tSBd9kLkkBaNLdKiSPgt0JSaFkamzTLeKk43G8Ip6roYcVJQ" src="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.browser.js"></script>-->
<#--<link crossorigin="anonymous" integrity="sha384-PVWz2r7pc/OJZoh44AxKqdptMuhB9o1XwItiKDseXemF5L5qjvbkUad4VJYibvLU" href="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.browser.css" rel="stylesheet">-->
<#--<script crossorigin="anonymous" integrity="sha384-B05N8FHrzfT6J8rg3PPRjeqPQnWuyjZdoSLoAZMYK+msOEPsz/K/Bh6kHyY2C9a1" src="https://lib.baomitu.com/chimee-player/1.4.8/chimee-player.min.js"></script>-->
<#--<script>-->
<#--    new ChimeePlayer({-->
<#--        wrapper: '#videoWrapper',  // video dom容器-->
<#--        src: '${video.sectionHref}',-->
<#--        controls: true,-->
<#--        poster:'${video.sectionImgHref}',-->
<#--        kernels: {-->
<#--            hls: {-->
<#--                handler: ChimeeKernelHls,-->
<#--                debug: true-->
<#--            }-->
<#--        }-->
<#--    });-->
<#--</script>-->
</body>
</html>