背景:
最近研究了下关于音视频相关的技术,个人在音视频领域算是一个小白,本着好奇的心理去研究了一些内容,分享给有需要的同学。
写在前面:
一些网站或者系统,也会直接在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>