icarus主题下实现视频播放

以下操作是在 icarus 主题的 4.1.1 版本下完成的。

一直希望能在自己站点上播放视频，但是视频的存储和读取是个大问题。作为万年白嫖党，靠着网上的教程，跟着摸索出了：

利用 HLS 技术和 ffmpeg 工具实现视频切片
在 Github 上存储视频切片文件
借助免费 CDN（jsDelivr）加速 Github 文件
引入 DPlayer 视频播放插件

而实现的视频播放功能。

首先声明，以下操作是在 icarus 的 4.1.1 版本下进行的。当然这其实和用哪个主题无关，只要是基于 hexo 搭建的网站都适用。具体实现过程可分为四个环节：

视频切片

1、先下载切片工具 ffmpeg（适用于 Windows）。

2、将下载好的压缩包中 bin 目录下的 ffmpeg.exe 文件拖到和待切片视频文件同一个目录下。

视频文件的编码格式务必要保证是 H264 格式的，音频编码要保证是 AAC 格式的，否则在后续环节中可能会报错。

3、将原视频文件进行切片。先在当前目录下 git bash 后执行以下命令，其中开头的 ffmpeg.exe 文件前需带上其当前所处的文件夹位置：

1	$ /e/GitHub/site_vid/200812/ffmpeg.exe -y -i xxx.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb xxx.ts

得到新的 .ts 文件后，再将执行命令，其中 segment_time 5 是指切割的每个片段的时长为五秒：

1	$ /e/GitHub/site_vid/200812/ffmpeg.exe -i xxx.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 xxx%03d.ts

即得到切好的数个 .ts 小文件以及一个 .m3u8 文件。

4、将当前目录下除切片得到的的数个 .ts 小文件和 .m3u8 文件外其他文件都删除。

上传至 Github

将处理好的视频文件上传至自己指定 Github 仓库的新建文件夹中。

几个与 DPlayer 解析有关的文件

可以将 hls.js、jquery-3.5.min.js、DP.js、DP.css 等几个文件上传至自己的 Github 仓库内以方便调用，其地址可以与此前上传文件的仓库保持一致。在我的仓库中，这几个文件使用 CDN 后的地址为：

https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/jquery-3.5.min.js
https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/hls.min.js
https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/DP.css
https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/DP.js

在文档中插入 DPlayer

将下述 html 代码插入自己的 Markdown 文档中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/DP.css">

<div id="dplayer" class="dplayer-video dplayer dplayer-no-danmaku dplayer-paused"></div>
<script src="https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/jquery-3.5.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/lpy716/site_vid@0.1/DP.js"></script>
<script>
  $(function(){ 
    const dp = new DPlayer({
      container: document.getElementById('dplayer'),
      autoplay:false,
      theme:"#42b983",
      loop:false,
      lang:"zh-cn",
      preload:"auto",
      volume: 0.8,
      mutex: true,
      video: {
          url: '输入使用了CDN的.m3u8文件地址',
          type: 'hls',
          defaultQuality: 0,
          pic: '',
          thumbnails: '',
      },
  });
})
</script>