是否有可能在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