【音视频】m3u8的生成以及播放

最新推荐文章于 2024-07-22 20:14:18 发布

疯癫的老码农

最新推荐文章于 2024-07-22 20:14:18 发布

阅读量1.3k

点赞数 13

分类专栏：网络结构文章标签：音视频 html5 javascript ffmpeg

本文链接：https://blog.csdn.net/HWTwilight/article/details/135547563

版权

网络结构专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文讨论了音视频技术中的m3u8和M4S格式，介绍了如何使用ffmpeg生成m3u8文件，以及在HTML中通过HLS.js实现m3u8的在线和离线播放，特别关注了B站采用的M4S方式。

摘要由CSDN通过智能技术生成

背景：

最近研究了下关于音视频相关的技术，个人在音视频领域算是一个小白，本着好奇的心理去研究了一些内容，分享给有需要的同学。

写在前面：

一些网站或者系统，也会直接在html中设置一个mp4的文件，使用video进行直接播放，相比m3u8的方式更为直接，至于说使用mp4播放是否性能比m3u8要好，我没有做过详细的研究，但是从对m3u8的理解的角度，m3u8其实就是对视频做了切割，播放的时候一个个ts进行下载。

在研究这块的时候，就很好奇像B站是使用什么方式播放离线视频的呢？后来在看网络请求的时候它使用了m4s的方式，与m3u8的方式有点类似的切割为多个文件，具体差异后续再进行比较。

m3u8的生成以及播放正文

1、mp4基于ffmpeg生成m3u8文件

执行命令：

ffmpeg -i test.mp4 -vcodec copy -acodec copy -bsf:v h264_mp4toannexb -hls_time 10 -hls_list_size 0 -f hls test/test.m3u8

生成的m3u8文件如下：

2、html源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

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

3、浏览器播放m3u8文件

略

疯癫的老码农

关注

13
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
【音视频】m3u8的生成以及播放

一些网站或者系统，也会直接在html中设置一个mp4的文件，使用video进行直接播放，相比m3u8的方式更为直接，至于说使用mp4播放是否性能比m3u8要好，我没有做过详细的研究，但是从对m3u8的理解的角度，m3u8其实就是对视频做了切割，播放的时候一个个ts进行下载。
复制链接

扫一扫