是否有可能在JS中为HTML5视频源生成比特流？

我想在JavaScript中动态生成一个比特流，例如一个大型的OGG视频。是否可以告诉浏览器向位流请求JavaScript函数而不是向某个位置发送HTTP-GET-Request？是否有可能在JS中为HTML5视频源生成比特流？

将数据提供给视频标签的唯一可能方式是我找到的数据：-URL。但是这需要将整个视频编码到文档中。

对于大型视频来说这是一个糟糕的解决方案，通常会进行流式传输。 AFAIK不能将更多数据动态添加到数据URL。

有谁知道这是可能的吗？

2012-03-13 anty

你的意思是用“数据：字符串” - 正如人们可以在一个img标签？（http://stackoverflow.com/questions/1207190/embedding-base64-images） – T4NK3R 2014-03-05 10:10:53

现在，这应该有可能与MediaSource API。

这里是从上面的链接的例子：

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

var assetURL = 'frag_bunny.mp4'; 
// Need to be specific for Blink regarding codecs 
// ./mp4info frag_bunny.mp4 | grep Codec 
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; 

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { 
    var mediaSource = new MediaSource(); 
    //console.log(mediaSource.readyState); // closed 
    video.src = URL.createObjectURL(mediaSource); 
    mediaSource.addEventListener('sourceopen', sourceOpen); 
} else { 
    console.error('Unsupported MIME type or codec: ', mimeCodec); 
} 

function sourceOpen (_) { 
    //console.log(this.readyState); // open 
    var mediaSource = this; 
    var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); 
    fetchAB(assetURL, function (buf) { 
    sourceBuffer.addEventListener('updateend', function (_) { 
     mediaSource.endOfStream(); 
     video.play(); 
     //console.log(mediaSource.readyState); // ended 
    }); 
    sourceBuffer.appendBuffer(buf); 
    }); 
}; 

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(); 
};

来源

2017-04-21 09:08:08 anty