video blob

最新推荐文章于 2023-01-30 12:35:22 发布

weixin_34391854

最新推荐文章于 2023-01-30 12:35:22 发布

阅读量501

点赞数

文章标签： python 前端 ViewUI

原文链接：https://my.oschina.net/yizhichao/blog/2244929

版权

2019独角兽企业重金招聘Python工程师标准>>>

分段缓冲播放，video的src为blob:http协议 / https

var video = document.querySelector('video');
var mediaSource = new MediaSource;
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen)

function sourceOpen () {
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  sourceBuffer.addEventListener('updateend', function () {
    mediaSource.endOfStream();
    video.play();
  });
  sourceBuffer.appendBuffer(buf); // buf is the arraybuffer to store the video data
};

https://stackoverflow.com/questions/14317179/display-a-video-from-a-blob-javascript/14360868#14360868

function display(vid){

    var video = document.getElementById("video");
    video.src = window.URL.createObjectURL(vid);

}

I would like to display a video from a Javascript Blob/File object in the HTML5 video tag.

This code only works for small videos :

var reader = new FileReader();
reader.onload = function(e) {
    document.getElementById("video").src=reader.result;
 }
reader.readAsDataURL(vid);

I cannot use this for big videos (> 10MB). Is there a solution to display a big video from a blob object in HTML 5?

function playVideo(videoStream){ // as blob 

 var video = document.querySelector('video');

 var videoUrl=window.URL.createObjectURL(videoStream.data);// blob.data gives actual data

 video.src = videoUrl;
}

首先创建变量名为 video 的 DOM 对象。之后，创建变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjecturl 来将 DOM::Video 对象的属性 src 和 mediaSource 进行“连接”。接下来，通过注册事件 Event::sourceopen来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。调用 MediaSource::addSourceBuffer 方法来构建一个存放视屏数据的 Buffer。在往 Buffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调，可以知晓数据已经加载完毕，然后调用 Video::play 函数通知浏览器播放视频。至此，整个 Blob 运行机制讲解完毕。详细的技术细节需要花一段时间来查看，暂时停止在这里。我们先知道这个是什么东西。<(￣3￣)>