今天来研究一下m3u8视频

我们在浏览视频网站的时候,会发现一些地址并不是真实的视频地址,而是一些Blob链接。打开网络面板查看,会看到一些.ts文件以及.m3u8文件。这些都是啥?今天就来探索一下,并且实现一下。

视频会被切片成一份一份的ts文件,用于快速传输。而m3u8是一个存放视频切片地址的索引文件。

优点

m3u8的优点是能够优化网络传输,节省带宽。在用户是弱网环境下时,能够提供低质量的源,提供更好的播放体验。并且允许用户在切换不同质量的视频流时,不中断播放。

实现

首先确保你的电脑已经安装好了ffmpeg

然后我们将一个mp4视频进行切片,执行命令:

go 复制代码
ffmpeg -i input.mp4 -c copy -map 0 -f segment -segment_time 10 -segment_list output.m3u8 -segment_format mpegts 'output%03d.ts'

即可得到m3u8文件。打开m3u8文件,我们能看到,指向的是一个一个ts切片。

video标签不能直接播放m3u8源,需要借助hls这个文件

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
        <video id="video" controls></video>
        <script>
            var video = document.getElementById('video')
            var videoSrc = './output.m3u8'

            if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = videoSrc
            } else if (Hls.isSupported()) {
                var hls = new Hls()
                hls.loadSource(videoSrc)
                hls.attachMedia(video)
            }
        </script>
    </body>
</html>

直接打开文件会跨域,要通过live-server这个插件打开,即可播放视频

F12查看播放源,也是Blob链接

如果你手上有m3u8文件,那直接替换videoSrc,即可实现在线播放,这也是市面上在线播放m3u8视频的原理。

下载m3u8视频

我们先试着下载一个ts切片。先打开网络面板,复制地址,在新窗口中打开。

一个切片就已经下载好了

那么是否记得上面说的,一个m3u8文件里面,就保存着这个视频的切片地址?只要解析出这个文件中的所有的ts地址,循环下载,然后再通过ffmpeg合并,就能下载一个真实的地址了。

当然比较简单的做法,可以使用ffmpeg直接下载。首先获取m3u8的在线地址。

然后执行命令:

shell 复制代码
ffmpeg -i http://127.0.0.1:5500/output.m3u8 -c copy 11.mp4

完成下载

不过在线下载更好的方案我推荐使用这个网站进行下载:tools.thatwind.com/tool/m3u8do...

相关推荐
聊无生15 分钟前
JavaSrcipt 函数高级
开发语言·前端·javascript
xiyusec34 分钟前
HTML基础
前端·html
好开心331 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
xChive1 小时前
优化表单交互:在 el-select 组件中嵌入表格显示选项
前端·vue.js·交互·element-plus
tian-ming1 小时前
(十八)JavaWeb后端开发案例——会话/yml/过滤器/拦截器
java·开发语言·前端
duansamve1 小时前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
_jacobfu1 小时前
mac2024 安装node和vue
前端·javascript·vue.js
Ztiddler1 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
三天不学习1 小时前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
羽羽Ci Ci1 小时前
axios vue.js
前端·javascript·vue.js