很多人想要把自己做的视频放到网上，但是发现各种云服务器或流量的价格太贵了。这时候，就可以用免费、可靠的GitHub来自建视频床。这是一种将视频文件存储在GitHub仓库中，并通过链接在博客或网站中嵌入视频的方法。以下是详细的操作步骤：

步骤 1: 创建GitHub仓库

  1. 登录GitHub并点击右上角的加号按钮，选择”New repository”创建一个新的仓库。
  2. 给仓库起一个名称，设置为公开（Public）并选择其他适当的选项。
  3. 点击”Create repository”创建仓库。

步骤 2: 安装ffmpeg

由于GitHub单个文件的上传限制是25MB，所以我们需要把视频切片成多个文件来上传。这个时候，我们需要安装使用ffmpeg。

如果你使用的是macOS，在终端中运行以下命令来安装ffmpeg：

1
brew install ffmpeg

如果你使用的是其他操作系统，请自行查找并安装ffmpeg工具。

步骤 3: 视频文件切片

在终端中，使用以下命令将视频文件切片成HLS格式（.m3u8和.ts文件）：

1
ffmpeg -i '视频文件名称' -c:v h264 -flags +cgop -g 30 -hls_time 5 -hls_list_size 0 -hls_segment_filename index%3d.ts 'index.m3u8'
  • -c:v h264: 使用H.264视频编码。
  • -hls_time 5: 设置每个切片的时长为5秒，你可以根据需要进行调整。
  • -hls_list_size 0: 设置.m3u8播放列表的大小，0表示不限制大小。
  • -hls_segment_filename index%3d.ts: 设置.ts切片文件的命名规则。

切片完成后，将生成的.m3u8和.ts文件保存到一个文件夹中，以便后续管理。

步骤 4: 将切片上传到GitHub仓库

  1. 将切片文件夹中的所有文件添加到你的GitHub仓库中。
  2. 提交更改并将切片文件推送到GitHub仓库。

步骤 5: 获取视频链接

你的.m3u8使用jsd加速的链接格式为：

1
https://cdn.jsdelivr.net/gh/用户名/仓库名/文件夹名/index.m3u8

步骤 6: 插入视频到博客中

在你的博客文章中，使用以下代码来嵌入视频：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls loop="false" width="100%"></video>
<script>
  var video = document.getElementById('video');
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('m3u8视频地址');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'm3u8视频地址';
    video.addEventListener('loadedmetadata', function () {
      video.play();
    });
  }
</script>

将上述代码中的m3u8视频地址替换为你在步骤5中获取的.m3u8链接。

通过以上步骤，你可以将视频文件存储在GitHub仓库中，并在博客中嵌入使用HLS.js进行播放的视频。确保仓库和视频文件是公开可访问的，以便他人能够观看你的视频。

希望这篇文章对你有帮助，如果遇到任何问题，请随时联系我，谢谢！