前言

为啥会突然想做这个呢，主要是因为直接播放大的mp4文件，实在太慢了。。。。

这加载速度。。。。。

在我欣赏了各大视频网站之后，发现人家都是弹的一个个ts文件，而且很大的电影也可以很快加载好，这就很有趣了，经过欣赏了各位大佬发布的帖子以及博客之后，我终于知道怎么搞这个了，接下来我们一起来试试

解决思路

首先我们要先了解一下如何简单的实现视频流来展现视频

第一步我们需要一个m3u8文件，那么这个m3u8文件是干啥的呢

诶，没错，这个m3u8文件就是存放多个ts文件的信息，就像下图这个样子，博主做的是未进行加密的，有加密兴趣的兄弟们可以试一下

那接下来就是我们要解决的就是怎么将mp4拆分为一个个ts文件，就需要使用ffmpeg来对mp4文件进行拆分

这里需要大家先安装一下ffmpeg，教程在这ffmpeg安装教程

安装好之后，向你的电脑吟诵咒语就可以把视频拆分了，至于咒语是啥，在下面会有介绍

然后在h5的video标签中，把src的内容设置为我们生成的m3u8文件即可。

理论结束了，就可以开始操作了

具体步骤

首先就是将视频切分为多个ts文件以及一个m3u8文件，指令如下

将mp4文件转为ts文件

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

将ts文件切分为多个小ts文件并生成m3u8文件

ffmpeg -i 1.ts -c copy -map 0 -f segment -segment_list 1.m3u8 -segment_time 3 youqu_%3d.ts

然后就可以得到如下图这样的一堆ts文件

我这里还是使用h5，直接将video标签的src设置为生成的m3u8文件即可，如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><video width="1000" controls="controls" id="video" preload="auto" autoplay muted></video></body>
<script src="js/hls.min.js"></script>
<script>if (Hls.isSupported()) {var video = document.getElementById('video');var hls = new Hls();hls.loadSource('1.m3u8');hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function() {video.play();});}
</script></html>

这里需要引入一下hls.js，使用这个包来帮我们解析m3u8文件，从而生成视频流

成果

一个3GB左右的视频，在使用这种方式之后，播放还是很流畅的，如下图这样

大家如果有问题的话，欢迎点击下方公众号小卡片与博主交流，感谢阅读

高质量的视频播放往往只需要一个m3u8文件视频流搞起来相关推荐

mysql frm 没有myd_MySQL表只对应一个.frm文件，没有.MYD 和.MYI文件
今天在学习MySQL的时候,发现新建一个数据库表的时候,表只对应一个.frm文件,却没有.MYD 和.MYI文件. 经过一番查找之后才发现,我本地的MySQL存储表的时候,使用的默认数据库存储引擎是I ...
一款好用的JS插件xm-select【只需要引用一个JS文件就搞定】
一款好用的JS插件xm-select[只需要引用一个JS文件就搞定] 先上js代码:复制保存直接用 !function(e){var t={};function n(o){if(t[o])return ...
mysql frm 没有myd_为什么MySQL表只对应一个.frm文件，没有.MYD和.MYI文件_MySQL
bitsCN.com 为什么MySQL表只对应一个.frm文件,没有.MYD和.MYI文件今天在学习MySQL的时候,发现新建一个数据库表的时候,表只对应一个.frm文件,却没有.MYD 和.MYI ...
1000+高质量数据集免费高速下载！一个好用又丰富的AI公开数据集平台
数据.算力.算法被视为推动AI发展的三大要素,其中数据是决定模型质量的关键,更好的数据才能训练出更好的模型.因此,找到高质量数据集是炼丹的第一步. 然而,由于开源数据的质量参差不齐.预览困难,且数据量 ...
论异步编程的正确姿势：十个接口的活现在只需要一个接口就能搞定!
今日推荐 Java 8 一行代码解决了空指针问题,太厉害了...List中remove()方法的陷阱,被坑惨了!25000 字详解 23 种设计模式,原来可以这么简单!最牛逼的 Java 日志框架,性 ...
高质量C /C编程指南---第1章文件机关
第1章文件机关每个C /C步伐平居分为两个文件.一个文件用于生活生活步伐的声明(declaration),称为头文件.另一个文件用于生活生活步伐的完成(implementation),称为定义(d ...
好用到爆！多种数据库只需一个工具就能搞定！
长久以来,小编一直没有一款用的很顺手的数据库客户端管理工具,经常是用用这个用用那个,总觉得没有一款哪方面都特别满意的. 前几天一位学长给我推荐了一款名为DataGrip的工具,着实让人眼前一亮. Da ...
高质量c/c++编程(10)
第10章类的继承与组合对象(Object)是类(Class)的一个实例(Instance).如果将对象比作房子,那么类就是房子的设计图纸.所以面向对象设计的重点是类的设计,而不是对象的设计. 对于 ...
高质量C++/C编程指南（林锐）
版本/状态作者参与者起止日期备注 V 0.9 草稿文件林锐 2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件林锐 2001-7-18至 2001-7-24 朱洪海审查 ...

高质量的视频播放往往只需要一个m3u8文件视频流搞起来

高质量的视频播放往往只需要一个m3u8文件

前言

解决思路

具体步骤

成果

高质量的视频播放往往只需要一个m3u8文件视频流搞起来相关推荐

最新文章

热门文章

高质量的视频播放往往只需要一个m3u8文件 视频流搞起来

高质量的视频播放往往只需要一个m3u8文件

前言

解决思路

具体步骤

成果

高质量的视频播放往往只需要一个m3u8文件 视频流搞起来相关推荐

最新文章

热门文章

高质量的视频播放往往只需要一个m3u8文件视频流搞起来

高质量的视频播放往往只需要一个m3u8文件视频流搞起来相关推荐