HTTP LIVE STREAM

Apple 公司提出的视频格式

制作 m3u8 文件

假设我们有一个 mp4 格式的视频，我们通过如下的 ffmpeg 转为 m3u8，设置每个 ts 片段的时长为 10s

$ ffmpeg -i output.mp4 -c:v h264 -c:a aac -f hls -hls_time 10 -hls_list_size 0 output.m3u8

将会得到如下输出结构

root
- output.mp4
- output0.ts
- output1.ts
- output.m3u8

视频的时长为 25s，一个被转为了 10s 的 ts 片段，另一个是 15s。中 output.m3u8 的内容:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:15
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
output0.ts
#EXTINF:15.040000,
output1.ts
#EXT-X-ENDLIST

TIP

在上面的 m3u8 里面 output0.ts 是一个非绝对路径，当客户端请求资源的时候，请求的是相对 m3u8 文件的位置，而不是相对网页的路径

这意味这，我们需要保持 m3u8 和 ts 文件在同一个文件夹中即可

播放 m8u3 文件

新建一个 HTML 文件

<video controls width="300">
    <source src="output.m3u8" type="application/x-mpegURL">
</video>

调整我们的文件目录如下：

public
- output0.ts
- output1.ts
- output.m3u8
index.html

用 vite 启动

$ vite --open

  VITE v4.5.2  ready in 150 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

然后用 Safari 浏览器可以看到我们的视频了，<video /> 标签直接支持播放 m3u8 文件

兼容 Chrome

Chrome 等浏览器需要一些包来兼容，我们可以使用 video-dev/hls.js

想要体验 Demo 可以在 https://hlsjs.video-dev.org/demo/ 输入我们上面 Vite 服务提供的 http://localhost:5173/output.m3u8 链接，可以快速看到在 Chrome 浏览器上的实现效果

下面是一个简单实现的例子：

<body>
    <video id="video" controls></video>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>
        if (Hls.isSupported()) {
            var video = document.getElementById('video')
            const hls = new Hls()
            hls.loadSource('output.m3u8')
            hls.attachMedia(video)
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'output.m3u8'
        }
    </script>
</body>

这样的话，在大部分浏览器上都能够正常播放了

和 m3u 的区别

m3u 的全称是 MP3 URL，或者完整地说是 Moving Picture Experts Group Audio Layer 3 Uniform Resource Locator

m3u 和 m3u8 都是用于流式传输音频和视频内容的播放列表格式。m3u 的 Unicode 版本是 M3U8，它使用 UTF-8 编码的字符

HTTP LIVE STREAM ​

制作 m3u8 文件 ​

播放 m8u3 文件 ​

兼容 Chrome ​

和 m3u 的区别 ​

HTTP LIVE STREAM

制作 m3u8 文件

播放 m8u3 文件

兼容 Chrome

和 m3u 的区别