video标签实时动态添加blob对象
时间: 2023-11-15 10:00:29 浏览: 79
通过video标签实时动态添加blob对象,可以实现视频的实时播放。具体实现方法如下:
1. 创建变量名为video的DOM对象,创建变量名为mediaSource的MediaSource对象。
2. 通过函数createObjectURL将video对象的src和mediaSource进行连接,然后通过注册事件event::sourceopen来触发当前连接之后的的回调处理。
3. 回调处理就是需要赋值视频数据的地方,调用MediaSourceBuffer::addSourceBuffer方法来构建一个存放视频数据的Buffer。
4. 在往buffer中存放数据结束后触发事件updateend。
5. 然后调用play函数通知浏览器播放视频。
具体代码如下:
```
var video = document.createElement('video');
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
sourceBuffer.addEventListener('updateend', function() {
mediaSource.endOfStream();
video.play();
});
// 往sourceBuffer中添加blob对象
sourceBuffer.appendBuffer(blob);
});
```
阅读全文