hls实现播放m3u8视频&将视频流进行切片& HLS.js简介

github官网GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.HLS.js is a JavaScript library that plays HLS in browsers with support for MSE. - GitHub - video-dev/hls.js: HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.icon-default.png?t=N7T8https://github.com/video-dev/hls.js

1.简介格式

  • 1. MP4是最常见的封装格式了,应用范围广、灵活性高、兼容性强 。
  • MP4甚至支持自定义封面图,几乎所有的播放器、甚至是浏览器都支持这个封装格式。
  • 2. FLV格式与往期《直播协议》中的RTMP、HTTP-FLV是类似的,毕竟都是Adobe公司主导或推出的标准。
  • FLV是一种为网络视频设计的格式,网页加入flv.js插件就可以播放了 FLV可以做长连接需要用flv.js。
  • 3. 最后是HLS格式,在往期《直播协议》已经详细讨论过HLS了。
  • 在点播的场景下,HLS实质上就是把一整个大的视频文件分成很多个碎片视频文件
  • HLS格式的文件由两部分组成,一是多个只有几秒长度的.ts碎片视频文件,另一个是记录这些视频文件地址的.m3u8索引文件。

hls实现播放m3u8视频&将视频流进行切片& HLS.js简介_第1张图片

2.接到一个需求需要将视频流进行切片做优化后的视频流如何做到?

   目前市场主流的是hls .ts后缀将视频流进行切片前端如何做到?

准备思想

后端将源文件.mp4进行切片思想用.m3u8返回给前端 

 1.初始.m3u8文件包含url的其他.m3u8文件如下图

hls实现播放m3u8视频&将视频流进行切片& HLS.js简介_第2张图片

2.url的其他.m3u8包含.ts切片的视频流文件如下图

hls实现播放m3u8视频&将视频流进行切片& HLS.js简介_第3张图片

3.最后我们将初始化.m3u8放进url类型改为customHls即可播放将进度条拖动即可看出切片视频端

hls实现播放m3u8视频&将视频流进行切片& HLS.js简介_第4张图片

  • 安装依赖
yarn add dplayer -S // 视频播放器插件
yarn add hls.js -S  // 播放hls流插件
  • App.vue





下个文章如何解决并下载加密后的视频文件.ts

你可能感兴趣的:(音视频,前端,hls,javascript,vue.js)