jsDeliver+GitHub+ffmpeg实现免费视频加速

利用 jsDeliver + GitHub 实现免费 CDN 加速视频,但是 jsDeliver 不支持加载超过 20M 的资源,所以视频需要切片压缩到 20M 以下。

1 准备

下载FFmpeg:http://ffmpeg.org/

将里面的 ffmpeg.exe 复制到需要切片的视频文件夹

cmd这个文件夹,关于ffmpeg的命令都在弹出黑框中执行

2 转码

转码有两种方式 格式化工厂 和 FFmpeg。

2.1 格式化工厂

对视频进行转码(转为 mp4),将视频文件转为视频编码 h.264,音频编码 aac 格式的 mp4 文件,mp4 视频文件不是 h.264 编码到后面切片的时候可能会遇到很多莫名其妙的问题。(音画不同步之类的)

2.2 FFmpeg

ffmpeg -i infile.mp4  -c:v libx264 -strict -2 outfile.mp4
  • infile.mp4 是待转码的文件(可以是其他格式,比如 avi…… 之类的)
  • outfile.mp4 是转码输出文件
  • libx264 转为 h.264 编码

3 切片

ffmpeg -i output.mp4 -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 output%03d.ts
  • output.mp4 需要切片的视频文件
  • playlist.m3u8 待生成的 m3u8 文件名
  • 5 切片时间,表示隔几秒进行切一个文件,切片时间自己调整,保证切出后每个文件都在20M以内
  • output%03d.ts 生成切割ts文件名,output%03d.ts 代表生成 output001.ts、output002.ts 这样的格式,03d 可以随意修改,占位符

切片成功图:

4 上传GitHub

删除ffmpeg.exe和mp4文件,将含有ts和m3u8的这个文件夹上传到github

然后通过jsdelivr访问

https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Video/BLACKPINK/HowYouLikeThat/playlist.m3u8

5 播放m3u8

5.1 接口

可以自己百度找一些m3u8播放器的接口。

演示例子中的代码:

<iframe src="https://api.xxxzhy.com/player/?url=https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Video/BLACKPINK/HowYouLikeThat/playlist.m3u8" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" width="100%" height="500px" frameborder="0"></iframe>

其中https://api.xxxzhy.com/player/?url=是我自己的接口

5.2 自己的弹幕播放器

我这里是用别人代码部署了自己的弹幕播放器。

播放器原作者:京都一只喵,蘑菇君做了一些小修复,

不过还是有个小bug就是 右键 视频统计信息 后,会弹出一个空白的页面,影响体验。

我修改后的版本下载地址:https://wwe.lanzous.com/iIxcWe95kve


参考:

超仿bilbili播放器带弹幕库后台 二次修复

GitHub + jsDelivr视频切片测试

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

客官,赏一瓶怡宝吧。

支付宝
微信