借助MediaSource和SourceBuffer来实现webm格式视频的分片传输

本文链接：https://blog.youkuaiyun.com/liulangdeyue/article/details/38944679

本文介绍如何利用MediaSource和SourceBuffer实现在浏览器中对webm格式视频进行分片传输，以减少大视频文件播放时的延迟。通过fileReader读取并切片视频文件，发送端向接收端发送初始化消息，接收端接收到数据片后按序添加到sourcebuffer。解决快速连续append导致的错误，可以采用接收端数据队列或发送端设置发送间隔的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在CloudTV项目的初期曾实现了整段视频的对等传输和播放，但是当视频较大时会产生相当长时间的延迟（具体延迟时间由网络状况和视频文件大小决定）；因此开始尝试视频的切片传输。

基于没有过多的音视频编码基础，所以尝试了对webm格式视频的强制型切片传输。

之所以选择webm格式的视频，一是webm格式被html5和目前大多数浏览器所支持，二是webm格式视频相对编码方式比较单一，所使用的codec比较单一，所以在添加sourcebuffer时直接使用addSourceBuffer('video/webm; codecs="vorbis,vp8"')即可；

其基本思想比较简单：

对于视频发送端，用fileReader读取文件后，使用slice()函数将文件切片，然后将每个segment逐一传输到对等接收端；

对于视频接收端，将接收到得每一个文件片append到<video>标签对应的sourcebuffer上（在上一篇文章中已经讲过如何将sourcebuffer对应到video标签上）

但是具体实现时使用了一下几个技巧来解决一些问题：

（1）在发送端开始发送视频数据之前，需要先向对等端发送初始化消息通知（video command： start）对等端准备接受视频数据

对等端接收到初始化消息后，开始初始化工作：

if(data['type']=="video_com"){
						if(data['content']=="start"){
							var oSourceBuffer, oMediaSource = new MediaSource();
                            var url = window.URL.createObjectURL(oMediaSourc