m3u8视频相对于mp4、mkv来说更容易被CDN缓存,在线播放加载会更快
m3u8视频制作
先来了解一下m3u8视频是怎么制作出来的(不然学了也没用对吧?) 使用ffmpeg可以很方便的将视频转换为m3u8格式,具体命令如下
ffmpeg -i 原视频 -c copy -f segment -segment_list play.m3u8 -segment_time 5 play_%4d.ts
运行完命令之后你会得到一大堆.ts文件和一个.m3u8文件,每个文件都在几MB左右这也是m3u8容易被缓存的原因,切片视频防止超出cdn的单个文件缓存大小限制,每个.ts文件都是一个几秒钟的视频,而.m3u8文件是一个列表记录了每个.ts文件的位置和.ts文件的时长,可以直接使用文本编辑器打开.m3u8文件。
把.m3u8文件和全部.ts放入同一个网站目录就可以使用了
由于分割成多个小文件所以可以上传到GitHub然后使用jsdelivr加速哦,但是不建议这样滥用!
在浏览器中播放
很多浏览器都不支持直接video标签直接播放.m3u8文件,我们需要使用video.js来进行兼容,代码如下:
<!--引入依赖--> <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.min.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script> <!--创建播放器--> <video class="video-js" controls="true" preload="auto" data-setup='{}'> <source src="m3u8视频链接"></source> 视频加载失败,您的浏览器可能不支持video标签或未启用JavaScript </video>
本文作者为萝莉工坊,转载请注明。