MediaSourceExtension fMP4流播放失败
MediaSourceExtension fMP4流播放失败
提问于 2018-01-11 09:44:06
按照this链接，我只需将webm格式更改为fMP4，如下所示。但它不起作用。原始的test.webm文件工作正常。
对于webm，配置如下：
//source: http://html5-demos.appspot.com/static/test.webm
var FILE = "test.webm"
var codec = 'video/webm; codecs="vorbis,vp8"';对于fMP4，如下所示更改配置：
//source http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4
var FILE = "car-20120827-85.mp4";
var codec = 'video/mp4; codecs="mp4a,avc"';
//var codec = 'video/mp4; codecs="mp4a.40.2,avc1.640028"';我猜fMP4的mime可能是错的，但我在网上搜索了很多次后还是找不到。
<!DOCTYPE html>
<html>
<body>
<section>
<video controls autoplay width="320" height="240"></video>
<pre id="log"></pre>
</section>
<script>
//source: http://html5-demos.appspot.com/static/test.webm
//var FILE = "test.webm"
//var codec = 'video/webm; codecs="vorbis,vp8"';
//source http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4
var FILE = "car-20120827-85.mp4";
var codec = 'video/mp4; codecs="mp4a,avc"';
//var codec = 'video/mp4; codecs="mp4a.40.2,avc1.640028"';
var NUM_CHUNKS = 5;
var video = document.querySelector('video');
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) {
var sourceBuffer = mediaSource.addSourceBuffer(codec);
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) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
logger.log('appending chunk:' + i);
if (i == NUM_CHUNKS - 1) {
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('webkitsourceended', 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>
<script>
function Logger(id) {
this.el = document.getElementById('log');
}
Logger.prototype.log = function(msg) {
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode(msg));
fragment.appendChild(document.createElement('br'));
this.el.appendChild(fragment);
};
var logger = new Logger('log');
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-11 21:23:54
问题是fMP4是一种与webm不同的格式。虽然您可以将webm文件拆分为任意定义的块，但不能使用fMP4执行此操作。
fMP4文件只是一堆“盒子”，基本上是带有type、length和content的结构(可以包含其他盒子，使其具有层次化)。您必须解析该文件，并首先为sourceBuffer提供一个moov框(初始化段)，然后是一系列可以解码和播放的moof mdat框。
您可能需要阅读一些关于fMP4格式(又称ISO BMFF)的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48198692
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号