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索引文件。

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

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

准备思想

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

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

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

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

  • 安装依赖
yarn add dplayer -S // 视频播放器插件
yarn add hls.js -S  // 播放hls流插件
  • App.vue
<template><div id="dplayer" style="width: 400px"></div><p><button @click="playVideo">播放视频</button> &nbsp;<button @click="pauseVideo">暂停视频</button></p>
</template><script setup>
import { onMounted } from "vue";import Hls from "hls.js";
import DPlayer from "dplayer";console.log(DPlayer);let dpInstance = null;function playVideo() {console.log(dpInstance.play);dpInstance.play();
}function pauseVideo() {dpInstance.pause();
}onMounted(() => {const dp = new DPlayer({container: document.getElementById("dplayer"),video: {url: "https://xxxx.m3u8", //需要后端配合返回.m3u8格式 .m3u8格式必须包含其他http视频流格式type: "customHls", //类型可以mp4 || hls || flvcustomType: {customHls: function (video) {// let config = {//   xhrSetup: function (xhr) {//     xhr.withCredentials = true; // 会携带cookie//     xhr.setRequestHeader("token", "my-token");//   },// };const hls = new Hls();hls.loadSource(video.src);hls.attachMedia(video);},},},});window.dp = dp;dpInstance = dp;
});
</script><style lang="scss"></style>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BUUCTF-WEB-刷题记录(2)

[网鼎杯 2018]Fakebook 注册一个账户&#xff0c;进去之后查看源代码&#xff0c;感觉存在注入点 是数字型注入&#xff0c;payload&#xff1a; 1%20and(false) 1%20and(true)判断列数 1 order by 5改为4的时候则页面正常 判断显示位&#xff0c;可以看见第二列存在数据回…

智能优化算法应用:基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于乌燕鸥算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.乌燕鸥算法4.实验参数设定5.算法结果6.参考文献7.…

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍IIC通信简单介绍掉…

存储类型相关知识

C语言中定义变量的格式&#xff1a; 存储类型 数据类型 变量名;C语言的存储类型&#xff1a;常见的有const、static、extern、auto、register、volatile&#xff1b;const关键字&#xff1a;const关键字修饰变量时&#xff0c;该变量表示是一个只读变量&#xff0c;不能通过变量…

Lattice-Based Blind Signatures: Short, Efficient, and Round-Optimal

目录 摘要引言 Lattice-Based Blind Signatures: Short, Efficient, and Round-Optimal CCS 2023 摘要 我们提出了一种基于随机预言机启发式和标准格问题&#xff08;环/模块SIS/LWE和NTRU&#xff09;的2轮盲签名协议&#xff0c;签名大小为22KB。该协议是全面优化的&#xf…

shopify主题开发-1

shopify主题开发 windows环境 安装 Shopify CLI npm install -g shopify/cli shopify/theme使用 Dawn 初始化一个新主题 Dawn 是 Shopify 的参考主题&#xff0c;专为性能、灵活性和易用性而构建。它使用Online Store 2.0功能&#xff0c;包括JSON 模板&#xff0c;支持所有…

企业网盘在医疗行业资料管理中的应用与优势

随着企业网盘的广泛应用&#xff0c;医疗行业正逐渐实现资料安全存储和智能化管理。海量应用的推动下&#xff0c;医院管理正朝着线上化、智能化发展迈进。然而&#xff0c;医疗行业仍面临着诸多挑战。 医疗行业的痛点在于病例、档案、药品资料繁多且保存周期长。这些资料的整理…

服务注册发现 配置中心 springcloud alibaba nacos

文章目录 0100 系统环境0200 nacos安装0201 下载0202 安装 0300 工程说明0301 结构说明0302 运行效果 0400 代码说明0401 服务提供者&#xff08;Provider Service&#xff09;0402 服务消费者&#xff08;Consumer Service&#xff09;服务提供者SDK&#xff08;Provider Serv…

Mapper文件夹在resource目录下但是网页报错找不到productMapper.xml文件的解决

报错如下&#xff1a; 我的Mapper文件夹在resourse目录下但是网页报错找不到productMapper.xml。 结构如下&#xff1a;代码如下&#xff1a;<mappers><mapper resource"com/dhu/mapper/productMapper.xml" /> </mappers> 这段代码是在mybatis-co…

5G承载网和大客户承载的演进

文章目录 移动4/5G承载网联通和电信4/5G承载网M-OTN&#xff08;Metro-optimized OTN&#xff09;&#xff0c;城域型光传送网PeOTN&#xff08;packet enhanced optical transport network&#xff09;&#xff0c;分组增强型OTN板卡增强型PeOTN集中交叉型PeOTN VC-OTN&#x…

Hdoop学习笔记(HDP)-Part.11 安装Kerberos

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

python爬虫抓取网页图片教程

在Python中&#xff0c;你可以使用requests库来发送HTTP请求&#xff0c;以及BeautifulSoup或Scrapy库来解析网页内容。你也可以使用selenium库&#xff0c;它是一个自动化测试工具&#xff0c;用于模拟用户在浏览器中的操作。 下面是一个简单的例子&#xff0c;说明如何使用r…

ASP.NET Core 使用IIS调试出现505.24错误

最近一直再学习asp.net 相关的东西&#xff0c;主要是为前端app提供一个webapi接口。在使用iis调试程序时出现HTTP Error 500.24 - Internal Server Error错误&#xff0c;搞了好久才最终解决。 1.在项目中增加web.config配置文件 2.将配置文件改为如下内容 <?xml version…

C++模版

文章目录 C模版1、泛型编程2、函数模版2.1、函数模版概念2.2、函数模版格式2.3、函数模版原理2.4、函数模版的实例化2.5、模板参数的匹配原则 3、类模版3.1、类模版概念3.2、类模版格式3.3、类模板的实例化 C模版 1、泛型编程 泛型编程&#xff08;Generic Programming&#x…

003、应用程序框架-UIAbility

之——UIAbility 目录 之——UIAbility 杂谈 正文 1.UIAbility 2.基本使用 2.1 创建Ability工程 2.2 添加基础功能 2.3 新建页面 2.4 页面间的跳转 3.生命周期 总结 杂谈 UIAbility&#xff0c;其中的页面创建、页面间的跳转、数据传递、生命周期。 正文 1.UIAbil…

【数据结构】环形队列

环形队列 1. 定义 环形队列就是将队列在逻辑上看作环形结构、物理上仍是数组形式存储的一种数据结构。 其实现主要分为两种情况&#xff1a; 浪费空间法记录空间法 2. 实现 实现要考虑的是成员变量 2.1 记录空间法 使用used标识当前存储了多少元素&#xff0c;如果为空&a…

【0240】源码分析PG内核中的关键字列表(SQL keywords)

相关文章: 【0236】聊一聊PG内核中的命令标签(Command Tags、CommandTag、tag_behavior) 【0239】从编译原理角度理解 #include “xxx“ 或 #include<xxx> 的实现机制 1. PostgreSQL的SQL关键字列表(SQL Keywords) 1.1 keywords.c源文件内容 keywords.c源文件中的内容…

03.PostgreSQL常用索引与优化

PostgreSQL常用索引与优化 主要内容转载自《PostgreSQL 开发指南》 索引&#xff08;Index&#xff09;可以用于提高数据库的查询性能&#xff1b;但是索引也需要进行读写&#xff0c;同时还会占用更多的存储空间&#xff1b;因此了解并适当利用索引对于数据库的优化至关重要。…

基于ASP.NET MVC技术的图书管理系统的设计与实现

基于ASP.NET MVC技术的图书管理系统的设计与实现 摘要&#xff1a;图书管理系统是一套高新科学技术和图书知识信息以及传统历史文化完美结合的体现。它改变了传统图书收藏的静态书本式图书服务特征&#xff0c;实现了多媒体存取、远程网络传输、智能化检索、跨库无缝链接、创造…

type-c充电器输出电压5V9V12V15V20V PD协议诱骗快充应用方案

Type-C接口的PD充电器&#xff08;如iPhone的20W充电器&#xff09;默认是没有电压输出的&#xff0c;想要让Type-C的充电器输出5V、9V、12V、15V、20V&#xff0c;只需要在产品上使用一颗快充取电芯片XSP08即可。 工作原理&#xff1a; 各类小家电产品如平板电脑、智能穿戴产…