H264 video works using the src attribute. The same video cannot use the MediaSource API (Chromium)

Question

http://www.youtube.com/html5 indicates that Google Chrome is compatible with the MediaSource and H.264 extensions.

I am doing a simple test verifying that my video is supported by Chromium using <video id = 'player' autoplay = 'true'> <source src = '/test.mp4' type = 'video / mp4' / "> </ video >

Video plays smoothly.

The second alternative, which also works great, is to load the byte chain through AJAX and convert the buffer to a URI. Then assigning such a URI to the (video) source.src attribute.

Finally, I try to load the same video through AJAX and inject it into the MediaSource buffer. It does not work with error 4. (Source not supported).

The code used is similar to:

var mediaSource = new (window.MediaSource || window.WebKitMediaSource)();
window.video = document.getElementById('video1');
window.video.addEventListener("error", function onError(err) {
    alert("window.video error detected:");
    console.dir(window.video.error); window.worker.terminate();
}); 
window.video.pause();
window.video.src = URL.createObjectURL(mediaSource);
var onMediaSourceOpen = function (e) {
    mediaSource.removeEventListener('sourceopen', onMediaSourceOpen);
    window.videoSource = mediaSource.addSourceBuffer('video/mp4;codecs="avc1.4d001e,mp4a.40.2"');
    injectVideoIntoBuffer();
}   

mediaSource.addEventListener('sourceopen', onMediaSourceOpen);

var injectVideoIntoBuffer = function onResponse() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "test.mp4");
    xhr.responseType = 'arraybuffer';
    xhr.addEventListener("readystatechange", function () {
         // Next line raises a MediaError, code: 4, (MEDIA_ERR_SRC_NOT_SUPPORTED)
         videoSource.appendBuffer(new Uint8Array(xhr.response));
          ... 
    }, false);
    xhr.send();
}

I tried different mp4 files created with either ffmpeg / avconv or MP4Box. Not luck at this moment. Similar code works fine with VP8 / WebM test files.

Thanks in advance for any help / tip or link!

Enrique

Answer 1

Thank you all for your answers. It seems that new versions of Chrome fix the problem.

, , MSE. . (h264/webM/theora/...), MSE, "" MSE.

MSE , . , , Google Chrome MSE + h264 Windows Android, (?) Linux. VP9 + MSE Windows Linux, Android.

Youtube MSE h264/VP9:

https://www.youtube.com/html5

Answer 2

:

var injectVideoIntoBuffer = function onResponse() {
   var xhr = new XMLHttpRequest();
   xhr.open('GET', "test.mp4");
   xhr.responseType = 'arraybuffer';
   xhr.addEventListener("readystatechange", function () {
       if (xhr.readyState == xhr.DONE) {
           videoSource.appendBuffer(new Uint8Array(xhr.response));
       }
      ... 
   }, false);

, mp4. , AJAX mp4, .. Moov, moof, mdat. , .

, : (! )

ffmpeg -an -codec:v libx264 -profile:v baseline -level 3 -b:v 2000k -i in.mp4 out.mp4

MP4Box :

MP4Box -dash 10000 -rap -frag-rap out.mp4

, .

Answer 3

I think Chrome can now only support WebM with media source extensions.