ffmpeg + video.js(mp4转.m3u8)视频播放

标签： ffmpeg javascript html

**问：**为什么要使用这种方案呢？前端直接使用h5的video标签来播放mp4的视频资源不行吗？

**答：**直接使用h5的video标签固然可以，而且方便，直接将视频的地址插入到video标签的src里面即可。

**But：**仅仅是播放本地的资源还好，但是如果把资源放在服务器上，就会慢好多。

**方案：**就是将mp4切割为多个片段，然后一段一段的去加载，相比于一次性去加载，这种切片的形式会好很多。许多在线的视频播放器也是采用的这种方案。

**关于：**关于m3u8的介绍可以参考这儿–m3u8简介

一、首先需要安装ffmpeg，这里以linux环境(CentOS 7)为例：

sudo rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro

sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

//安装ffmpeg和开发包
sudo yum install ffmpeg ffmpeg-devel -y

安装过程大概5-6分钟左右的样子，最后出现下图所示基本就OK了：

我们来输入命令测试一下是否安装成功：ffmpeg -version,如图：

二、接下来，我们通过FileZilla将本地的mp4视频文件上传至云服务的目录下，这里我把它上传至我的云服务器目录/usr/local/etc下，然后在这个目录下创建一个文件夹mkdir hls来存放后面要存放的mp4被转码后的ts片段和主体的.m3u8文件。

接下来就是转码命令了：

ffmpeg -i test.mp4 -hls_time 10 -hls_list_size 0 -hls_segment_filename ./hls/test_%05d.ts ./hls/test.m3u8

-hls_time 10: 设置每片的长度，我这里是10秒，为一个片段。

-hls_list_size 0:设置播放列表保存的最多条目，设置为0会保存所有信息。

-hls_segment_filename：设置转码后的切片存放地址和文件名，./hls为hls文件夹下，test_%05d.ts为生成的五位数序列化文件名，格式例如：test_00000.ts、test_00001.ts……

test.m3u8为扩展的 m3u 列表文件，将这些 ts 片段集中起来供客户端播放器接收。m3u8文件的内容如下：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:13
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:11.040000,
test_00000.ts
#EXTINF:9.240000,
test_00001.ts
#EXTINF:11.200000,
test_00002.ts
#EXTINF:8.880000,
test_00003.ts
#EXTINF:9.800000,
test_00004.ts
#EXTINF:10.200000,
test_00005.ts
#EXTINF:10.800000,
test_00006.ts
#EXTINF:8.840000,
test_00007.ts
#EXTINF:10.920000,
……
test_00026.ts
#EXTINF:12.640000,
test_00027.ts
#EXT-X-ENDLIST

可以看到这里面包含了所有ts片段，当我们去请求test.m3u8文件的时候，就会顺序加载这里面的每个ts文件。

写一个简单的html文件来测试一下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videoJs</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
        <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
        <style>
            ul {
                list-style: none;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            li {
                width: 200px;
                height: 40px;
                line-height: 40px;
                margin: 20px 20px;
                background: #ccc;
                cursor: pointer;
                border-radius: 8px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            li:hover {
                background: #000;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <h1>.m3u8视频流播放测试</h1>
        <section id="videoPlayer">
            
        </section>
        <ul>
            <li data-src="http://xx.xx.xx:8081/hls/test.m3u8">test</li>
        </ul>
        <script type="text/javascript">
            function createvideo(url) {
                let str = `
                    <video id="video_demo" muted autoplay width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
                        <source src="" type="application/x-mpegURL" id="target">
                    </video>
                `
                let wrap = document.getElementById('videoPlayer')
                wrap.innerHTML = str
                let source = document.getElementById('target')
                source.src = url ? url : 'http://xx.xx.xx:8081/hls/test.m3u8'
                var player = videojs('video_demo', { "poster": "", "controls": "true" }, 											function() {
                    this.on('play', function() {
                        console.log('正在播放');
                    });
                    //暂停--播放完毕后也会暂停
                    this.on('pause', function() {
                        console.log("暂停中")
                    });
                    // 结束
                    this.on('ended', function() {
                        console.log('结束');
                    })
                });
                player.play()
            }
            createvideo()
        </script>
    </body>
</html>

把页面放到服务器上去访问，下面为请求成功的样子：

**注意:**如果是在云服务器上搭建的转码，页面在本地访问资源有可能会产生跨域问题，可以把页面放在服务器上去访问，如果是本地页面访问本地的转码资源是不会有大问题的。

本文链接：https://blog.csdn.net/qq_43592800/article/details/111555000

智能推荐

html5拖放--15行js代码实现两个div内容互换

本文首发于我的个人博客:http://cherryblog.site/ ，欢迎大家前去参观本文项目地址，sortable插件地址：https://github.com/sunshine940326/sortable demo地址：https://github.com/sunshine940326/drag 在写我们后台的管理程序中需要有一个拖放的功能，然后我们有一个这样的功能，实现11个固定且大...

git切换分支报错，不管什么标题名字，都报非法字符，所以就不起名字了。

切换分支的时候，报了标题这么个错误，error: ”xxx did not match any file(s) known to git. 看见不能切换分支，我首先 git status 查看了一下当前状态，如下图然后，就会发现，其实我的这个错误非常明显，就是在我的 beat 分支下有文件修改，所以切换不了。ok，解决方法： 1. 如果修改的这些文件没什么用，完全可以删除。（我这儿的...

Oracle分析函数之LEAD和LAG实际应用

Oracle分析函数之LEAD和LAG实际应用在前几天的工作中按照客户的需求，需要对客户信息进行数据分析，即某人存在多个状态的账号，将客户信息账号状态分析出结果，和客户确认汇报，根据保留规则，保留唯一账号，以保证程序可用性。起初，根据聚合函数进行查询分析，需要写一大串的SQL，即不美观又复杂，很容易产生错误。后续想到Oracle分析函数中的lead和lag，SQL简洁了很多且容易产生报告数据。 ...

小知识积累（不断更新中）

判断变量的类型（数组，对象） tyopof：不推荐，因为无法区别数组与对象，数组是对象的子对象 instanceof：可以使用还可以用来判断是否属于函数 Object.prototype.toString.call()：最兼容，推荐使用定时器的执行顺序或机制 js是单线程的，浏览器遇到setTimeout或者setInterval会把定时器推入浏览器的待执行事件队列里面但是不执行，先执行完当前...

ROS自学实践(6)：ROS进行激光SLAM建图——gmapping

本节主要记录运行ROS自带的SLAM建模包gmapping方法，为后续理解这些代码，建立自己的SLAM算法打下基础。基于粒子滤波算法二维栅格地图需要里程计信息 1.通过命令行安装gmapping包 2.配置gmapping节点 3.运行gazebo模型及gmapping节点 4.打开rviz 添加laserscan、map、robotmodel模型 5.移动小车，建立模型 6.保存当前地图 ...

ffmpeg + video.js(mp4转.m3u8)视频播放

智能推荐

猜你喜欢