前言

因为github仓库对单个文件大小的上传限制，我们需要对文件进行切片处理生成m3u8和ts文件后方可上传

一、什么是 M3U8、TS 文件？

M3U8 是指 UTF-8 编码格式的 M3U 文件 (M3U 使用 Latin-1 字符集编码)
M3U 文件是一个记录索引的纯文本文件，打开它时播放软件并不会播放它
而是根据它的索引找到对应的音视频文件的网络地址进行在线播放
ts 是日本高清摄像机拍摄下进行的封装格式，全称为 MPEG2-TS。ts 即”Transport Stream” 的缩写。
将一个视频文件 (MP4) 切片分为很多个 TS 文件，一个 TS 文件的视频时常可以自定义，比如切片为 5 秒
那么其他 ts 文件也是 5 秒，但是这个不是完全准确，也就是说会有误差，会产生 4-7 秒左右的 ts 视频文件

二、使用步骤

1.使用 ffmpeg 工具进行切片

官网：https://ffmpeg.org/download.html

下载解压后打开 bin 目录，在里面找到 ffmpeg.exe 复制到自己新建的一个文件夹里，再把想要切片的视频 Copy 进来

(将 mp4 转成 ts 格式，1 对 1，转换后视频质量与大小无变化.)cmd中执行：

ffmpeg -y -i 你的名字.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 你的名字.ts

按时间隔分片，1 对 N，下面的 5 即每个分片5秒，自行修改

segment_list 00.m3u8 为切片后得到的 m3u8 文件
segment_time 5 %03d.ts 为切片后得到的 ts 文件名 5 代表每个 ts 文件 5 秒播放时常 (有误差，不完全 5 秒)

ffmpeg -i 你的名字.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 你的名字%03d.ts

把文件夹中原视频和新的最大ts文件以及ffmpeg.exe文件去除，剩下的上传github完成上传步骤

3.引用github视频文件到博客

代码如下：

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<video id="video" preload muted loop autoplay style="height: 100%;width: 100%;object-fit: cover;">
</video>
<script>var video = document.getElementById('video');var videoSrc = 'm3u8文件地址';if (Hls.isSupported()) {var hls = new Hls();hls.loadSource(videoSrc);hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function() {video.play();});}
</script>

用github储存视频并引用到博客相关推荐

github page hexo博客gitee_利用Github和hexo搭建个人免费博客
利用Github和hexo搭建个人免费博客详细过程: 概述: 详细的介绍了利用github和hexo搭建免费的博客,内容详细,浅显易懂,容易上手,大家一起进来看看吧! 1.配置Github相关操作: ...
在Github上建立自己的个人博客网站详细教程
概述之前闲着没事,就利用Github建了一个个人博客网站,效果还不错,今天就来分享一下. 建立自己个人博客网站的好处: 1.面试装逼,这个不必多说- 2.把平时积累的知识和项目记录下来,方便日后查看 ...
在win10子系统ubuntu平台下使用jekyll和github pages搭建自己的静态博客网站
前言总喜欢在自己闲得无聊的时候,折腾一些东西.最近喜欢上了markdown的方便简洁,就想借助jekyll和github pages来搭建一个静态博客网站,然后只需要跟平时写代码一样,上传自己的.m ...
Github+域名搭建个人主页（个人博客）
Github+域名搭建个人主页(个人博客) 一.工作准备搭建个人主页需要做的准备工作有两个: 1).注册Github账号,注册Github账号是免费的, Github网站地址:https://git ...
基于hexo使用github.io免费域名搭建个人博客记录
基于hexo使用github.io免费域名搭建个人博客记录说明,学习的时候,看的是这篇链接https://blog.csdn.net/sinat_37781304/article/details/8 ...
看C语言教学视频后第一次写博客
看完老师的课程教学视频过后第一次写博客,我用的是Visual Studio编译软件写的,我发现在这个新的软件里面输入scanf()不能运行成功而必须要是scanf_s()才能使得程序运行,下面是我编写 ...
如何用 windows+github搭建一个优美的hexo博客
如何用 windows+github搭建一个优美的hexo博客 1.Hexo简单介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内, ...
【视频】视频方面大神博客总结
1.雷霄骅博客 [总结]视音频编解码技术零基础学习方法:雷神对音视频技术的总结,包括:视频播放器原理.流媒体协议.封装格式.视频编码.音频编码.网络视音频平台对比.首先对雷神的顶礼膜拜,学完这篇博客, ...
推荐 14 个 GitHub 上优质的原创前端博客文章仓库
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 博客下面的顺序是随机的,不分先后. SHERlocked93/blog 公众号:前端下午茶作者:SHERlocked93 作者微 ...

用github储存视频并引用到博客

前言

一、什么是 M3U8、TS 文件？

二、使用步骤

1.使用 ffmpeg 工具进行切片

3.引用github视频文件到博客

用github储存视频并引用到博客相关推荐

最新文章

热门文章