Total Pageviews

Monday, 23 August 2021

让你的网站支持播放m3u8视频

 m3u8视频相对于mp4mkv来说更容易被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>

No comments:

Post a Comment