jsDelivr实现切片视频播放

如上图，视频成品链接为https://cdn.jsdelivr.net/gh/huxx16/m3u8/yourname/playlist.m3u8

嵌入Dplayer即可在个人博客内自建电影院。

本文将讲述实现原理、介绍什么是m3u8、如何转码并切片视频以及上传使用。

如何实现

jsd能加载GitHub中单个20M以下的静态资源，所以能实现图床的功能。视频床也就是同样的道理，但通常视频的大小都超出了20M的大小限制。这时我们就可以将视频切片，用m3u8索引 整合播放。

m3u8是什么

m3u8是苹果公司推出的视频播放标准，是m3u的一种，只是编码格式采用的是UTF-8。

　　m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。使用m3u8格式文件主要因为可以实现多码率视频的适配，视频网站可以根据用户的网络带宽情况，自动为客户端匹配一个合适的码率文件进行播放，从而保证视频的流畅度。

将m3u8索引文件与视频切片放在GitHub同一目录下，即可通过jsd调用达到播放目的

jsDelivr与GitHub都明白，那标题里的FFmpeg又是什么？

FFmpeg是一套Linux环境下开发出来的视频音频处理程序，但它可以在包括 Windows 在内的大多数操作系统中编译。我们用它来将视频切片。

手头有视频吗，现在就开始切片试试吧！

使用FFmpeg切片视频

视频转码

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

Q：如何转码？ 

A：小白建议格式工厂，老司机直接ffmpeg转吧，这里不提供ffmpeg转码教程了。格式工厂操作如下图

转码完成后输出MP4文件，我们记住它的位置

FFmpeg环境配置

2.去FFmpeg官网http://ffmpeg.org/下载软件包，软件包中找到主程序ffmpeg.exe

我们将它复制

粘贴到MP4的输出目录

win+R打开cmd，cd到这个目录

键入ffmpeg、回车。测试一下环境

显示如上选项即环境配置成功！

开始切片，假设你的视频文件名为abd.mp4

  1.先用ffmpeg把abc.mp4文件转换为abc.ts文件：

ffmpeg -y -i abc.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb abc.ts

  2.再用ffmpeg把abc.ts文件切片并生成playlist.m3u8文件，5秒一个切片：

ffmpeg -i abc.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 abc%03d.ts

这其中5表示5秒一个切片，可以自行更改（单个大小要在20m以下）

( playlist.m3u8可以自行改成xxx.m3u8 ，如更改则最终组成链接时需要对应的更改文件名)

等待完成，我们得到

 和

说明切片成功！（切片失败的原因可能是你磁盘空间不足导致）

上传所有文件至GitHub

这就不用解释了吧。。上传m3u8文件以及所有的xxx.ts文件

记得放在同一个文件目录中！

最终完成和我们的视频链接为

https://cdn.jsdelive.net/gh/GitHub用户名/库名/文件目录/playlist.m3u8

Eg：如图用户huxx16,文件存放在名为"m3u8"的库下/yourname目录

对应的链接就为 https://cdn.jsdelivr.net/gh/huxx16/m3u8/yourname/playlist.m3u8

以上！

什么？你说m3u8怎么播放？百度找个解析接口套进去试试吧

以上乱七八糟的教程早在2018年就有人在CSDN上提出了理论。我也有参考老蘑菇https://m1314.cn/403.html的这篇文章。可能我唯一做到的就是讲的乱七八糟了亿点吧。