高质量的视频播放往往只需要一个m3u8文件视频流搞起来

最新推荐文章于 2024-09-26 09:15:00 发布

小王不头秃

最新推荐文章于 2024-09-26 09:15:00 发布

阅读量2.1k

点赞数 3

分类专栏：前端文章标签：音视频 hls m3u8 前端

本文链接：https://blog.csdn.net/qq_43627076/article/details/122813560

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

高质量的视频播放往往只需要一个m3u8文件

前言
解决思路
具体步骤
成果

前言

为啥会突然想做这个呢，主要是因为直接播放大的mp4文件，实在太慢了。。。。

这加载速度。。。。。
在这里插入图片描述

在我欣赏了各大视频网站之后，发现人家都是弹的一个个ts文件，而且很大的电影也可以很快加载好，这就很有趣了，经过欣赏了各位大佬发布的帖子以及博客之后，我终于知道怎么搞这个了，接下来我们一起来试试

解决思路

首先我们要先了解一下如何简单的实现视频流来展现视频

第一步我们需要一个m3u8文件，那么这个m3u8文件是干啥的呢

诶，没错，这个m3u8文件就是存放多个ts文件的信息，就像下图这个样子，博主做的是未进行加密的，有加密兴趣的兄弟们可以试一下
在这里插入图片描述
那接下来就是我们要解决的就是怎么将mp4拆分为一个个ts文件，就需要使用ffmpeg来对mp4文件进行拆分

这里需要大家先安装一下ffmpeg，教程在这ffmpeg安装教程

安装好之后，向你的电脑吟诵咒语就可以把视频拆分了，至于咒语是啥，在下面会有介绍
在这里插入图片描述

然后在h5的video标签中，把src的内容设置为我们生成的m3u8文件即可。

理论结束了，就可以开始操作了
在这里插入图片描述

具体步骤

首先就是将视频切分为多个ts文件以及一个m3u8文件，指令如下

将mp4文件转为ts文件

ffmpeg -y -i 1.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 1.ts

将ts文件切分为多个小ts文件并生成m3u8文件

ffmpeg -i 1.ts -c copy -map 0 -f segment -segment_list 1.m3u8 -segment_time 3 youqu_%3d.ts

然后就可以得到如下图这样的一堆ts文件
在这里插入图片描述

我这里还是使用h5，直接将video标签的src设置为生成的m3u8文件即可，如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video width="1000" controls="controls" id="video" preload="auto" autoplay muted></video>

</body>
<script src="js/hls.min.js"></script>
<script>
    if (Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('1.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
        });
    }
</script>

</html>