首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将m4s文件直接馈送到SourceBuffer不起作用

是因为SourceBuffer只能接受特定格式的数据进行播放。m4s文件是一种分段的媒体文件格式,通常用于流媒体传输。在将m4s文件馈送到SourceBuffer之前,需要对其进行解析和处理,以符合SourceBuffer的要求。

解决这个问题的一种方法是使用Media Source Extensions(MSE)API。MSE是一种浏览器API,允许JavaScript通过SourceBuffer将媒体数据传递给HTML5视频播放器。

具体步骤如下:

  1. 创建一个MediaSource对象:通过调用new MediaSource()来创建一个新的MediaSource对象。
  2. 监听MediaSource的sourceopen事件:使用mediaSource.addEventListener('sourceopen', callback)来监听sourceopen事件,该事件在MediaSource准备好接受数据时触发。
  3. 创建一个SourceBuffer对象:在sourceopen事件的回调函数中,通过调用mediaSource.addSourceBuffer(mime_type)来创建一个新的SourceBuffer对象。mime_type是媒体类型,例如'video/mp4'。
  4. 监听SourceBuffer的updateend事件:使用sourceBuffer.addEventListener('updateend', callback)来监听updateend事件,该事件在SourceBuffer完成数据添加后触发。
  5. 下载m4s文件并解析:使用XMLHttpRequest或Fetch API下载m4s文件,并解析其中的媒体数据。
  6. 将解析后的数据追加到SourceBuffer:通过调用sourceBuffer.appendBuffer(data)将解析后的数据追加到SourceBuffer中。data是解析后的媒体数据。
  7. 监听SourceBuffer的updateend事件:在updateend事件的回调函数中,可以继续追加更多的媒体数据,直到所有数据都被添加到SourceBuffer中。
  8. 播放媒体:在所有数据都被添加到SourceBuffer后,调用mediaSource.endOfStream()来结束数据流,并通过HTML5视频播放器进行播放。

推荐的腾讯云相关产品:腾讯云视频处理(https://cloud.tencent.com/product/vod)提供了丰富的视频处理功能,包括转码、截图、水印、封面生成等,可用于处理和转换m4s文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

通过调试技术,我理清了 b 站视频播放很快的原理

视频进度条这里的灰条也在更新: 当你直接点击后面的进度条: 观察下 range,是不是新下载的片段和前面不连续了? 也就是说会根据进度来计算出 range,再去请求。...而且 b 站用的是一种叫做 m4s 的视频格式: 它和 m3u8 类似,也是分段存储的,这样提前分成不同的小文件,然后 range 请求不同的片段文件,速度自然会很快。...然后再 command + f 搜索下代码,同样是用的 SourceBuffer: 这样,我们就知道了为什么 b 站视频播放的那么快了: m4s 分段存储视频,通过 range 请求动态下载某个视频片段...服务端存储这些视频片段的方式,b 站使用的 m4s,当然也可以用 m3u8,或者像知乎那样,动态读取 mp4 文件的部分内容返回。...通过自定义列在列表中直接显示了 Content-Range: 通过 command + f 搜索了响应的内容: 这篇文章就是对这些调试技巧的综合运用。

43930
  • 抖音直播原理解析-如何在 Web 中播放 FLV 直播流

    通过上图还可以发现 SourceBuffer 下面还细分了 TrackBuffer,因为你还可以不创建两个 SourceBuffer,只用一个 SourceBuffer 来播放视频和音频,让它内部自己分离音视频...首先我们使用 fetch 或 XHR 去下载数据,然后做些处理过后,数据交给 MediaSource,最后通过 video 元素进行播放, 如何 MediaSource 和 video 元素连接呢?...视频并没有直接送到 MediaSource 中,而是 SourceBuffer,一个 MeidaSource 中有一个或多个 SourceBuffer。...(一些音视频流可能会有问题) 使用 FMP4Remuxer 视频流封装成 FMP4 格式。 最后封装好的 FMP4 片段数据交给 MSE 播放。...上面 FlvDemuxer 和 FMP4Remuxer 的代码需要自己根据 flv 和 fmp4 文件格式编写, flv 中的每一帧的音频、视频和元信息都解出来,然后再将它们封装成 fmp4 格式。

    5.8K32

    不再碎片化学习,快速掌握 H5 直播技术

    直接可以 m3u8 写进 src 中,然后交由浏览器自己去解析。当然,我们也可以采取 fetch 来手动解析并获取相关文件。...3 个方法: addSourceBuffer(): 根据给定的 MIME 创建指定类型的 SourceBuffer removeSourceBuffer(): MS 上指定的 SourceBuffer...所以,SourceBuffer 提供两个最基本的操作 appendBuffer, remove。之后,我们就可以通过 appendBuffer直接 ArrayBuffer 放进去即可。...其中,SourceBuffer 还提供了一个应急的方法 abort() 如果该流发生问题的话可以直接指定的流给废弃掉。 所以,整个流程图为: ?...音视频的 ArrayBuffer 通过 MediaSource 和 SourceBuffer 的处理直接 && 接入。然后,就可以实现正常播放的效果。

    1.7K40

    无 Flash 时代,让直播拥抱 H5(MSE篇)

    如果你有现成的 video 文件,可以直接使用 FFmpeg 进行分析: ffmpge-i video.mp4。...removeSourceBuffer 用来移除某个 sourceBuffer。比如当前流已经结束,那么你就没必要再保留当前 SB 来占用空间,可以直接移除。...难道直接 media 的元素的 src 直接设置为 null 就 OK 了吗? 要是这样,我就日了狗了。MS 会这么简单么?... new duration 设置为当前 SourceBuffer 中最大的 endTime。 video/audio 的播放时长(duration) 设置为最新的 new duration。...segments 这种方式是直接根据 MP4 文件中的 pts 来决定播放的位置和顺序,它的添加方式极其简单,只需要判断 updating === false,然后,直接通过 appendBuffer

    2.7K40

    无 Flash 时代,让直播拥抱 H5(完整篇)

    如果你有现成的 video 文件,可以直接使用 FFmpeg 进行分析: ffmpge-i video.mp4。...removeSourceBuffer 用来移除某个 sourceBuffer。比如当前流已经结束,那么你就没必要再保留当前 SB 来占用空间,可以直接移除。...难道直接 media 的元素的 src 直接设置为 null 就 OK 了吗? 要是这样,我就日了狗了。MS 会这么简单么?... new duration 设置为当前 SourceBuffer 中最大的 endTime。 video/audio 的播放时长(duration) 设置为最新的 new duration。...segments 这种方式是直接根据 MP4 文件中的 pts 来决定播放的位置和顺序,它的添加方式极其简单,只需要判断 updating === false,然后,直接通过 appendBuffer

    4.8K40

    【Web技术】502- Web 视频播放前前后后那些事

    因此,HTML5除其他新的标签外, 标签带到当前 Web。 这个新标签允许您直接从HTML链接到视频,就像标签对图像所做的一样。...它的创建是为了直接使用 HTML 和 JavaScript 允许那些复杂的媒体使用案例。 这些“扩展” MediaSource 对象添加到 JavaScript。...我们只说三种可能的类型: 音讯 视频 音频和视频 实际上,“类型”是由其MIME类型定义的,其中还可能包含有关所使用的媒体编解码器的信息 SourceBuffers 都链接到单个 MediaSource,并且每个都将用于直接...切片 尽管如此,这里仍然有许多问题没有答案: 我们是否必须等待所有内容下载完毕,才能将其推送到SourceBuffer(因此可以播放)? 我们如何在多种品质或语言之间切换?...在这里,我们始终认为服务器端具有这些分片文件。 所有这些意味着, 我们不必等待整个音频或视频内容下载就可以开始播放。我们通常只需要第一部分。

    1.4K00

    冲顶大会有前端什么事吗?

    对于一些基础知识,推荐大家直接去这篇文章里面查看: https://www.villianhr.com/2017/03/31/全面进阶 H5 直播 现阶段,比较流行的协议主要有:HLS,RTMP,HTTPFLV...="640" height="360" frameRate="60/2" sar="1:1"/> 基本原理是,后台一份完整的流文件切片...其中,最主要的是它定义的模板解析机制,直接根据时间戳来协定。 MPD 基本简介 DASH 其实只是一系列概念,原意是 DynamicAdaptiveStreamingover HTTP。...上面我们已经了解 MPD 标签里面的基本属性,这些属性在整个 MPEG-DASH 里面非常重要,后面,我们简单讲解一下关于 MPD 更新和文件过期的点。...通过 dependencyId 指定模板 Rep@id,实现信息的直接复用。

    1.8K50

    循环神经网络(RNN)的基本原理

    点击蓝字关注我 1.引入RNN 1.1 前神经网络 如下所示: 其正向传播过程为: 图片 ,其中 图片 为第一层的权重参数 图片 , 图片 经过激活函数之后作为第二层的输入...此外, 前神经网络难以处理时序数据,比如视频、语音、文本等。时序数据的长度一般是不固定的,而前神经网络要求输入和输出的维数都是固定的,不能任意改变。...c可以经多种方式得到: Encoder结果c可以直接是最后一个神经元的隐状态 ;也可以在 的基础上做一些变换得到,比如 ;最后当然也可以使用所有神经元的隐藏状态进行变换得到。...,根据上述经典RNN的公式,我们可以推出此种Decoder的表达式如下: 图片 由于没有输入x,所以参数U不起作用。  ...第二种: 这种情况下Context不再作为初始隐状态,而是作为一个输入x送到所有神经元,公式如下所示: 图片  第三种: 第三种与第二种相比,输入不再只是c,还增加了上一个神经元的输出y,

    3.1K30

    花椒web端实时互动流媒体播放器

    前端的工作主要是做出一个PC主站点,在这个站点中的首页需要一个播放器,既能播放FLV直播视频流,还要在用户点击视频回顾按钮的时候, 弹出窗口播放HLS视频流;我们开始开发这个播放器的时候也没有多想, 直接使用了大家都能想到的...FLV.JS分析 FLV.js的工作原理是下载flv文件转码成IOS BMFF(MP4碎片)片段, 然后通过Media Source ExtensionsMP4片段传输给HTML5的Video标签进行播放...BMFF 片段中的 FTYP + MOOV)和 MediaSegment (ISO BMFF 片段中的 MOOF + MDATA); 这2个片段按照顺序添加到SourceBuffer中, 和对SouceBuffer...信息去下载相应的TS文件, 转码成IOS BMFF(MP4碎片)片段, 然后通过Media Source ExtensionsMP4片段传输给HTML5的Video标签进行播放; HLS.js的结构如下...问题是由视频下发而不是由服务器下发, 但延迟会高一点(可提前在视频中插入, 主持人后提出问题, 减少延迟); 视频补充增强信息的内容一般由云服务器来指定内容, 除前16位UUID之外, 内容不尽相同, 所以本播放器直接

    4K43

    技术解码 | DASH协议直播应用

    第一个是不同转码任务之间的切片位置对齐,第二个则是多个转码任务合并为一个多码率的Manifest文件。...合并生成多码率的Manifest文件 由于每个转码都在各个的转码机器上进行切片,因此也无法直接生成一个多码率的Manifest索引文件。 我们的解决办法则是再创建一个转封装任务。...通过DRM音视频内容进行加密,让音视频数据即使在网络上传输或客户端播放时被保存了下来,也会因为没有解密秘钥,而无法进行解密播放。...针对该场景,我们调整了转码切片,两个分片后就生成MPD下发,并保持后续还是3个分片数,6s+起播时间优化到4s+。...高码率的流意味着分片文件更大,下载耗时更长,从而导致首帧耗时更高。因此视频流码率从低到高排序,让播放器初始选取低码率文件下载播放,可以降低首帧耗时。

    6K30

    换热器控制策略——集成反馈、前和级联控制

    01 控制目标 为了给任何控制回路开发综合控制策略,重要的是识别感兴趣的过程变量或“受控变量”、操纵变量以及直接影响受控变量的不同干扰变量。...03 级联控制 在串级控制方案中,不是 PID 温度控制器的输出直接送到控制阀,而是将其作为设定点馈送到基于反馈 PID 的蒸汽流量控制器 (fbFC)。...04 前控制 与反馈控制不同,前控制在干扰发生的同一时刻采取纠正措施,前控制看不到过程变量,但它只看到干扰并在干扰发生时做出响应。 这使前控制器能够快速直接地补偿干扰的影响。...要实施前控制,必须了解过程模型以及干扰与过程变量之间的直接关系。...05 综合方法 使用反馈、前和级联控制的集成方法,如图所示,完全能够满足换热器控制要求: 前回路处理过程流体中的主要干扰级联流量控制回路处理与蒸汽压力和阀门问题相关的问题反馈循环处理其他一切

    47120

    视频直播技术干货:一文读懂主流视频直播系统的推拉流架构、传输协议等

    目前云直播开启旁路推流后,会通过互动直播后台音视频流推送到云直播后台,云直播后台负责收到音视频流转码成通用的协议格式并且推送到CDN,这样H5、小程序等端就可以通过CDN拉取到通用格式的音视频流进行播放了...这一种推流方式和SDK推流的不同之处在于音视频流是直接被推送到了云直播后台进行转码和上传CDN的,没有直接直播流转推到用户端的下行方式,因此相比SDK推流延迟会长一些。...M3U8文件地址喂给video就可以直接播放,PC端用MSE解码后大部分浏览器也都能够支持。但是由于其分片加载的特性,直播的延迟相对较长。...I帧就是我们通常说的关键帧,关键帧内包括了完整的帧内信息,可以直接作为其他帧的参考帧。B帧和P帧为了数据压缩得更小,需要由其他帧推断出帧内的信息。...首先根据视频封装格式提取出对应的音视频chunk数据,在MediaSource中分别对音频和视频创建SourceBuffer音视频的编码数据喂给SourceBufferSourceBuffer内部会处理完剩下的解码和音视频对齐工作

    4.9K43

    CNN初探

    卷积神经网络的前架构在神经抽象金字塔(Neural abstraction pyramid)中被横向和反馈连接扩展。所产生的复现卷积网络允许灵活地并入情景信息以迭代地解决局部模糊。...在前期间,每个滤波器对输入进行卷积,计算滤波器和输入之间的点积,并产生该滤波器的二维激活图(输入一般二维向量,但可能有高度(即RGB))。...然后又经过一个卷积层,变成了C3层的16个10X10的特征映射图,然后又经过一个池化层,得到S4层的16个5X5的特征映射,然后这16个5X5的特征映射送到3层的常规神经网络,得出最后的结果。...总结:我们可以这样想,前面的卷积层和池化层是为了提取输入的高级特征,送到全连通层的输入,然后训练出最后的结果。...keep_prob),根据0.5,我们生成一个跟隐藏层神经元个数的向量,true:false的比例是1:1(因为keep_prob=0.5),与隐藏层的输入进行相乘,那么会有一半隐藏层的神经元被丢掉,不起作用

    51110
    领券