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

最新推荐文章于 2025-04-12 21:25:38 发布

进阶的猴子

最新推荐文章于 2025-04-12 21:25:38 发布

阅读量2.8k

点赞数 2

文章标签： ffmpeg javascript html

本文链接：https://blog.youkuaiyun.com/qq_43592800/article/details/111555000

版权

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

**问：**为什么要使用这种方案呢？前端直接使用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>