使用 Media Source API 让我自己的实现工作起来几乎没有运气。
我只是决定看看一个工作示例是否可以在本地正常工作，所以我复制并粘贴了示例中的源代码：http: //html5-demos.appspot.com/static/media-source.html
来源：查看源：http ://html5-demos.appspot.com/static/media-source.html
我没有“test.webm”视频，所以我可以使用自己的 .webm 视频文件。我正在使用的测试文件是 .webm 视频文件 14.6m
结果是它的工作方式并不完全相同。检查控制台我可以看到有一些错误，所以我添加了一个队列来收集视频块，同时来自媒体源的 sourceBuffer 正在更新。
这有助于修复错误，我可以看到播放器上完全加载了视频，但问题是视频永远不会开始播放。它只是一个黑屏，显示视频的时长。
如果我手动将其移动到 1 秒的起点，它将一直播放到最后。我假设这意味着实现工作正常。在黑屏时检查视频的 video.paused 布尔值也会返回错误。目前不确定这是否只是 html 视频的问题。
这是我对示例脚本的更新：
<script>
var FILE = 'test.webm';
// var FILE = 'perigny.mp4';
var NUM_CHUNKS = 10;
var video = document.querySelector('video');
finished = false;
window.MediaSource = window.MediaSource || window.WebKitMediaSource;
if (!!!window.MediaSource) {
alert('MediaSource API is not available');
}
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
function callback(e) {
console.log("video.paused: ", video.paused);
var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// sourceBuffer = mediaSource.addSourceBuffer('video/mp4;codecs="avc1.4d001e"');
queue = [];
sourceBuffer.addEventListener('updatestart',
function(e) { console.error('updatestart: ' + mediaSource.readyState);});
sourceBuffer.addEventListener('update',
function(e) {
console.log('update: ' + mediaSource.readyState);
});
sourceBuffer.addEventListener('updateend', function() { // Note: Have tried 'updateend'
console.log('updateend: ' + mediaSource.readyState);
if (queue.length > 0 && !sourceBuffer.updating) {
console.error("queue.shift");
// if (queue.length) {
sourceBuffer.appendBuffer(queue.shift());
}
if (finished && !sourceBuffer.updating) {
console.log("finished");
mediaSource.endOfStream();
console.log("MediaSource", mediaSource);
console.log("video.paused: ", video.paused);
video.pause();
video.play();
}
}, false);
logger.log('mediaSource readyState: ' + this.readyState);
GET(FILE, function(uInt8Array) {
var file = new Blob([uInt8Array], {type: 'video/webm'});
var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
logger.log('num chunks:' + NUM_CHUNKS);
logger.log('chunkSize:' + chunkSize + ', totalSize:' + file.size);
// Slice the video into NUM_CHUNKS and append each to the media element.
var i = 0;
(function readChunk_(i) {
var reader = new FileReader();
// Reads aren't guaranteed to finish in the same order they're started in,
// so we need to read + append the next chunk after the previous reader
// is done (onload is fired).
reader.onload = function(e) {
console.log("i", i);
if (sourceBuffer.updating || queue.length > 0) {
console.log("addSourceBuffer is updating");
queue.push(new Uint8Array(e.target.result));
}
else {
console.log("sourceBuffer.appendBuffer();");
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
}
logger.log('appending chunk:' + i);
if (i == NUM_CHUNKS - 1) {
console.log("End of stream");
finished = true;
// if (!sourceBuffer.updating)
// mediaSource.endOfStream();
} else {
if (video.paused) {
video.play(); // Start playing after 1st chunk is appended.
}
readChunk_(++i);
}
};
var startByte = chunkSize * i;
var chunk = file.slice(startByte, startByte + chunkSize);
reader.readAsArrayBuffer(chunk);
})(i); // Start the recursive call by self calling.
});
}
mediaSource.addEventListener('sourceopen', callback, false);
mediaSource.addEventListener('webkitsourceopen', callback, false);
mediaSource.addEventListener('sourceended', function(e) {
logger.log('mediaSource readyState: ' + this.readyState);
}, false);
function GET(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.send();
xhr.onload = function(e) {
if (xhr.status != 200) {
alert("Unexpected status code " + xhr.status + " for " + url);
return false;
}
callback(new Uint8Array(xhr.response));
};
}
</script>
编辑：希望帮助可能遇到此问题的其他人，让我添加解决方案/结果。
事实证明，这是我尝试使用的原始 .webm 视频文件的关键帧问题。似乎 MSE API 非常挑剔，即使它是它需要的确切文件格式。我最终从以下网址下载了 .webm 视频： http ://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
我计划现在继续使用这些其他文件格式。