无法使Chrome浏览器使用mp4格式的MediaSource [英] Unable to get MediaSource working with mp4 format in chrome

问题描述

根据示例此处

我下载了webm文件，并将其编码为可在本地播放的mp4文件，但无法将其用作媒体源。

MP4Box将编解码器报告为 avc1.64000d，mp4a.40.2 ，但将其添加到源缓冲区并没有帮助。

这是一个演示的问题（我不指望它在Firefox中作为媒体源目前还不支持扩展）

以下是我测试的代码：

  var FILE，CODEC，mediaSource; 
 var NUM_CHUNKS = 5; 
 var video = document.querySelector（'video'）; 
 window.MediaSource = window.MediaSource || window.WebKitMediaSource; 
 if（!!! window.MediaSource）{
 alert（'MediaSource API is not available'）; 
} 
函数callback（）{
 var sourceBuffer = mediaSource.addSourceBuffer（CODEC）; 
 GET（FILE，function（uInt8Array）{
 var file = new Blob（[uInt8Array]，{type：'video / mp4'}）; 
 var chunkSize = Math.ceil（file .size / NUM_CHUNKS）; 
 var i = 0; 
（函数readChunk_（i）{
 var reader = new FileReader（）; 
 reader.onload = function（e） {
 sourceBuffer.appendBuffer（new Uint8Array（e.target.result））; 
 if（i == NUM​​_CHUNKS  -  1）{
 mediaSource.endOfStream（）; 
} else {
 if（video.paused）{
 video.play（）; 
} 
 readChunk _（++ i）; 
} 
}; 
 var startByte = chu nkSize * i; 
 var chunk = file.slice（startByte，startByte + chunkSize）; 
 reader.readAsArrayBuffer（chunk）; 
}）（i）; 
}）; 
} 
函数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（意外的状态码+ xhr.status +代表+ url）; 
返回false; 
} 
回调（new Uint8Array（xhr.response））; 
}; 
 
函数start（type）{
 if（type =='webm'）{
 FILE ='test.webm'; 
 CODEC ='video / webm;编解码器= Vorbis格式，VP8; 
} 
 if（type =='mp4'）{
 FILE ='test.mp4'; 
 CODEC ='video / mp4;编解码器= avc1.64000d，mp4a.40.2; 
} 
 mediaSource = new MediaSource（）; 
 video.src = window.URL.createObjectURL（mediaSource）; 
 mediaSource.addEventListener（'sourceopen'，callback，false）; 
 mediaSource.addEventListener（'webkitsourceopen'，callback，false）; 
 mediaSource.addEventListener（'webkitsourceended'，function（e）{
}，false）; 
} 
  

解决方案

问题在于你的文件。媒体源扩展需要在文件的开始部分使用moov（电影标题框）的分段MP4，在您的情况下放在最后。

还需要在mdat（媒体数据框）前面有一个moof（电影片段框）。 MP4Box能够生成兼容DASH的片段化MP4，但我建议您使用他们最新的每晚发布。

  MP4Box -dash 1000 -rap -frag-rap test.mp4 
  

这将生成一个正确结构的分段mp4文件，其中moov放置在文件的开头。每个片段将是1秒，从关键帧开始。

Based on the example here

I downloaded the webm file and encoded as an mp4 file which will play locally but I'm unable to use it as a media source.

MP4Box reports the codec to be avc1.64000d,mp4a.40.2 but adding it to the source buffer did not help.

Here is a demo of the problem (I don't expect it to work in firefox as Media Source Extensions are not supported yet)

and here is the code I'm testing with:

 var FILE,CODEC,mediaSource;
            var NUM_CHUNKS = 5;
            var video = document.querySelector('video');
            window.MediaSource = window.MediaSource || window.WebKitMediaSource;
            if (!!!window.MediaSource) {
                alert('MediaSource API is not available');
            }
            function callback() {
                var sourceBuffer = mediaSource.addSourceBuffer(CODEC);
                GET(FILE, function(uInt8Array) {
                    var file = new Blob([uInt8Array], {type: 'video/mp4'});
                    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
                    var i = 0;
                    (function readChunk_(i) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
                            if (i == NUM_CHUNKS - 1) {
                                mediaSource.endOfStream();
                            } else {
                                if (video.paused) {
                                    video.play();
                                }
                                readChunk_(++i);
                            }
                        };
                        var startByte = chunkSize * i;
                        var chunk = file.slice(startByte, startByte + chunkSize);
                        reader.readAsArrayBuffer(chunk);
                    })(i);
                });
            }
            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));
                };
            }
            function start(type) {
                if (type == 'webm') {
                    FILE = 'test.webm';
                    CODEC = 'video/webm; codecs="vorbis,vp8"';
                }
                if (type == 'mp4') {
                    FILE = 'test.mp4';
                    CODEC = 'video/mp4; codecs="avc1.64000d,mp4a.40.2"';
                }
                mediaSource = new MediaSource();
                video.src = window.URL.createObjectURL(mediaSource);
                mediaSource.addEventListener('sourceopen', callback, false);
                mediaSource.addEventListener('webkitsourceopen', callback, false);
                mediaSource.addEventListener('webkitsourceended', function(e) {
                }, false);
            }

解决方案

The problem is your file. Media source extensions requires fragmented MP4 with the moov(movie header box) at the beginning of the file, in your case it is placed last.

Also there need to be a moof (Movie fragment box) preceding the mdat (media data box). MP4Box is capable of generating DASH compliant fragmented mp4, but I would recommend that you use their latest nightly releases.

MP4Box -dash 1000 -rap -frag-rap test.mp4

This will generate the a correctly structured fragmented mp4 file with the moov placed in the beginning of the file. Each fragment will be 1 second, starting with a key frame.

这篇关于无法使Chrome浏览器使用mp4格式的MediaSource的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！