当前位置： 首页 > news >正文

MSE+Range案例

news 2025/11/5 11:01:08

MSE的demo实现思路：首先准备fmp4格式的视频地址或者切片，接着将MSE挂载到video上，创建createObjectURL转二进制数据，fetch请求在线地址，分段请求，监听这个数据流的获取状态，当这个ReadyState为open的时候， sourceBuffer.appendBuffer(buf)处理接收到的数据，否则mediaSource.endOfStream()结束接收数据流。

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" />
</head><body><video controls></video><script>var video=document.querySelector('video');// 视频 URL 队列（按顺序播放）var assetURLs=[....];// 当前播放的 URL 索引var currentIndex=0;// MIME 类型var mimeCodec='video/mp4; codecs="avc1.42E01E, mp4a.40.2"';if('MediaSource' in window&&MediaSource.isTypeSupported(mimeCodec)) {var mediaSource=new MediaSource();video.src=URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen',sourceOpen);} else {console.error('Unsupported MIME type or codec: ',mimeCodec);}function sourceOpen (_) {var mediaSource=this;var sourceBuffer=mediaSource.addSourceBuffer(mimeCodec);function loadNextVideo () {if(currentIndex>=assetURLs.length) {console.log('All videos played.');return;}var assetURL=assetURLs[currentIndex];fetchAB(assetURL,function(buf) {sourceBuffer.addEventListener('updateend',function updateEndHandler (_) {sourceBuffer.removeEventListener('updateend',updateEndHandler);currentIndex++;if(currentIndex<assetURLs.length) {mediaSource.removeSourceBuffer(sourceBuffer); // 清空 SourceBuffermediaSource.endOfStream();loadNextVideo(); // 加载下一个视频} else {mediaSource.endOfStream();console.log('All videos loaded.');}video.play();});sourceBuffer.appendBuffer(buf);});}loadNextVideo();}function fetchAB (url,cb) {console.log(url);var xhr=new XMLHttpRequest();xhr.open('get',url);xhr.responseType='arraybuffer';xhr.onload=function() {cb(xhr.response);};xhr.send();}</script>
</body></html>

相关文章：

MSE+Range案例

MSE的demo实现思路&#xff1a;首先准备fmp4格式的视频地址或者切片&#xff0c;接着将MSE挂载到video上&#xff0c;创建createObjectURL转二进制数据&#xff0c;fetch请求在线地址&#xff0c;分段请求&#xff0c;监听这个数据流的获取状态&#xff0c;当这个ReadyState为o…...

编程日记 2025/1/4 5:52:09

C# 设计模式（结构型模式）：代理模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;代理模式 在软件开发中&#xff0c;有时我们需要通过某种方式间接地访问一个对象&#xff0c;这时就可以使用代理模式&#xff08;Proxy Pattern&#xff09;。代理模式通过引入一个代理对象来控制对目标对象的访问…...

编程日记 2025/1/4 5:51:08

YOLO——pytorch与paddle实现YOLO

YOLO——pytorch与paddle实现YOLO 本文将深入探讨YOLO目标检测的理论基础&#xff0c;并通过PyTorch和PaddlePaddle两个深度学习框架来展示如何实现基础的YOLO模型。我们将首先介绍YOLO的基本概念&#xff0c;这些理论基础是理解和实现YOLO网络的基础。通过PyTorch和PaddlePad…...

编程日记 2025/1/4 5:50:07

持续大额亏损，销量增幅有限，北汽蓝谷依旧黯然神伤

撰稿 | 行星 来源 | 贝多财经 “起了个大早&#xff0c;赶了个晚集”&#xff0c;用在如今的北汽蓝谷身上再合适不过。 2025年的第一个工作日&#xff0c;北汽蓝谷新能源科技股份有限公司&#xff08;SH:600733&#xff0c;简称“北汽蓝谷”&#xff09;对外披露了子公司北京…...

编程日记 2025/1/4 5:49:05

C# OpenCV机器视觉:背景减除与前景分离

在实验室的一角&#xff0c;阳光仿若一个急性子的小精灵&#xff0c;迫不及待地穿过窗帘缝隙&#xff0c;在阿强的桌面上欢快跳跃&#xff0c;洒下一片片斑驳陆离的光影&#xff0c;似乎在催促着阿强赶紧开启今日的奇妙探索。阿强端坐在桌前&#xff0c;眼神炽热地盯着眼前那台…...

编程日记 2025/1/4 5:48:04

C语言return与 ？ ：

上次讲解过一次函数&#xff0c;函数要配合return返回东西&#xff0c;但是在编写一些程序的时候我发现了很多冷门逻辑语法还没有掌握&#xff0c;当时讲课也是看一眼就过去了&#xff08;死去的记忆开始攻击我&#xff09; Return&#xff0c;爽&#xff01; 现在有一个小问…...

编程日记 2025/1/4 5:47:03

【论文阅读】SCGC : Self-supervised contrastive graph clustering

论文地址&#xff1a;SCGC : Self-supervised contrastive graph clustering - ScienceDirect 代码地址&#xff1a; https://github.com/gayanku/SCGC 摘要 图聚类旨在发现网络中的群体或社区。越来越多的模型使用自编码器&#xff08;autoencoders&#xff09;结合图神经网…...

编程日记 2025/1/4 5:46:02

python pyqt5+designer的信号槽和动态显示

至少需要两个文件&#xff0c;一个是python的主文件&#xff0c;一个是designer的UI文件 1.对UI文件的处理 首先需要将UI文件转化成python文件&#xff0c;并且引入到主文件中。 2.在主文件中接受UI上的一些动作和返回主文件处理的数据到UI界面上。 框中选中的部分&#xff0c…...

编程日记 2025/1/4 5:45:01

版本控制系统Helix Core 2024.2增强功能：与OpenTelemetry协议集成、Delta同步和传输等

“Perforce团队非常高兴为您带来Helix Core 2024.2版本&#xff0c;它拥有众多旨在提高团队效率、优化工作流程的增强功能。通过新的Open Telemetry协议集成&#xff0c;团队现在可以轻松将结构化日志集成到可观测性平台中。DeltaTransfer现在也适用于同步操作——这是2024.1版…...

编程日记 2025/1/4 5:43:59

certificate verify failed: unable to get local issuer certificate (_ssl.c:10

出现 “certificate verify failed: unable to get local issuer certificate (_ssl.c:10)” 这个错误通常是因为Python在尝试建立HTTPS连接时&#xff0c;无法验证服务器的SSL证书。这可能是因为本地系统中缺少必要的根证书&#xff0c;或者服务器的证书链不完整&#xff0c;导…...

编程日记 2025/1/4 5:41:56

关于大一上的总结

大一上总结 前言 源于学长们都喜欢写总结&#xff0c;今晚也正好听见一首有点触动心灵的歌&#xff0c;深有感慨&#xff0c;故来此写下这篇总结 正文 1.暑假前的准备 暑假之前姑且还是学习了基本的C语法&#xff0c;大概是到了结构体的地方&#xff0c;进度很慢&#xff0…...

编程日记 2025/1/4 5:40:53

JavaScript的基础知识

在鸿蒙操作系统的应用开发中&#xff0c;JavaScript作为一种广泛使用的编程语言&#xff0c;扮演着重要的角色。无论是构建用户界面还是实现业务逻辑&#xff0c;理解JavaScript的基础知识都是必不可少的。本文将深入探讨鸿蒙开发中与JavaScript相关的几个关键概念&#xff1a;…...

编程日记 2025/1/4 5:39:51

数据结构之单链表(超详解)

文章目录 1. 单链表1.1 概念、结构1.2 结点1.2.1 链表的性质 2. 链表的打印3. 尾插、头插创建结点尾插头插 4. 尾删、头删尾删头删 5. 查找指定结点6. 指定位置之前、之后插入数据指定位置之前插入数据指定位置之后插入数据 7. 删除指定位置结点7.1 删除指定位置之后结点8. 链表…...

编程日记 2025/1/4 5:37:48

告别编程困惑：GDB、冯诺依曼、操作系统速通指南

&#x1f31f; 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。&#x1f31f; &#x1f6a9;用通俗易懂且不失专业性的文字&#xff0c;讲解计算机领域那些看似枯燥的知识点&#x1f6a9; 目录 前言 一…...

编程日记 2025/1/4 5:36:47

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…...

编程日记 2025/1/4 5:31:43

基于AI边缘计算盒子的智慧零售场景智能监控解决方案

一、方案背景 随着零售业的快速发展&#xff0c;传统零售模式面临着诸多挑战&#xff0c;如人力成本高、管理效率低、顾客体验不佳等。智慧零售借助人工智能、物联网等技术手段&#xff0c;实现对零售场景的全面感知和智能管理。AI边缘计算盒子作为智慧零售的关键技术之一&…...

编程日记 2025/1/4 5:29:40

STM32G431收发CAN

1.硬件连接 PB8作为CAN_RX&#xff0c;PB9作为CAN_TX&#xff0c;连接一个CAN收发器TJA1051T/3 2. CubeMX里配置CAN 设置连接FDCAN1的参数&#xff0c;使用1个标准过滤器&#xff0c;波特率位500K 使能FDCAN1的中断 3 自动生成代码 3.1 初始化 static void MX_FDCAN1_In…...

编程日记 2025/1/4 5:28:37

如何得到深度学习模型的参数量和计算复杂度

1.准备好网络模型代码 import torch import torch.nn as nn import torch.optim as optim# BP_36: 输入2个节点&#xff0c;中间层36个节点&#xff0c;输出25个节点 class BP_36(nn.Module):def __init__(self):super(BP_36, self).__init__()self.fc1 nn.Linear(2, 36) # …...

编程日记 2025/1/4 5:27:36

2025年股指期货每月什么时候交割？

股指期货交割日是指期货合约到期时&#xff0c;买卖双方根据合约规定的指数价值进行现金结算的日期。在中国市场中&#xff0c;股指期货的交割日通常是合约到期月份的第三个星期五。这一规律适用于所有股指期货合约&#xff0c;无论是当月、下月合约&#xff0c;还是季度月合约…...

编程日记 2025/1/4 5:26:33

自从学会Git，感觉打开了一扇新大门

“同事让我用 Git 提交代码&#xff0c;我居然直接把项目文件压缩发过去了……”相信很多初学者都经历过类似的窘境。而当你真正掌握 Git 时&#xff0c;才会发现它就像一本魔法书&#xff0c;轻松解决代码管理的种种难题。 为什么 Git 能成为程序员的标配工具&#xff1f;它究…...

编程日记 2025/1/4 5:25:30

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/10/19 16:25:32

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/11/2 14:30:10

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/27 13:23:12

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/10/27 21:58:02

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/10/31 17:24:49

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/11/3 13:24:55

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/1 2:18:30

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/11/2 7:50:40

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/10/26 15:04:15