Matery主题的主页使用了Dplayer插件是可以播放视频的,由于博主用的视频文件较大,用不起各家的对象存储服务,故在好兄弟那里嫖来了用Github+jsDelivr的方式来存储视频。需要注意的是
jsDeliver不支持加载超过20M的资源,所以视频需要压缩到20M以下。超过20M的视频可以通过Hls分片的方式将文件分割成一片一片的ts文件。Github没有对仓库容量限制,却限制了单次推送不能超过100M。
一、将视频进行分片
1.下载并使用ffmpeg
ffmpeg官网:http://ffmpeg.org/download.html#build-windows
ffmpeg编译版下载地址:https://ffmpeg.zeranoe.com/builds/
将刚刚下载完成的ffmpeg编译版进行解压并进入bin目录
在目录内按住Shift并右键选择在此处打开Powershell窗口(你这里也可能显示的是打开命令提示符,也是可以的)
打开之后就会看到一个黑框框的窗口,再次输入代码即可使用
2.使用ffmpeg进行转码
# infile.mp4 是待转码的文件(可以是其他格式,比如 FLV/AVI之类的)
# outfile.mp4 是转码输出文件的格式及文件名
# libx264 转为 h.264 编码
ffmpeg -i infile.mp4 -c:v libx264 -strict -2 outfile.mp4
3.使用ffmpeg将视频进行分片,并生成M3U8文件
# output.mp4 需要切片的视频文件
# playlist.m3u8 待生成的 m3u8 文件名
# 5 切片时间,表示隔几秒进行切一个文件
# output%03d.ts 生成切割ts文件名,output%03d.ts 代表生成 output001.ts、output002.ts 这样的格式,03d 可以随意修改,占位符
ffmpeg -i output.mp4 -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 output%03d.ts
二、推送至Github并使用jsDelivr
1.在Github新建仓库
Github新建仓库地址:https://github.com/new
仓库名称必须填写,仓库描述可不填写,但是仓库必须选择公开。
2.上传文件至Github
进入视频分片所在的目录内
git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/用户名/仓库地址.git
git push -u origin master
3.使用jsDelivr的链接
jsDelivr视频链接格式为:https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>/<文件及路径>/playlist.m3u8
4.Chrome无法加载视频
Matery使用的Dplayer没有支持Hls协议
hls.js 是一款基于 Media Source Extensions 开发的,用于实现 HTTP Live Streaming 开源JavaScript类库。它可以实现将MPEG-2 和 AAC/MP3码流变成自制的 MP4的分片。并且可以直接绑定在Video 上,实现播放。
直接使用我好兄弟缓存的hls.js :smile: :arrow_left:
https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/file/hls.min.js
在Matery主题的layout.ejs内新增一行
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/TianZonglin/tuchuang/file/hls.min.js"></script>



