3

I'm trying to use MediaSource to play my video:

const videoTag = document.getElementById('theVideoId');
const mimeCodec = 'video/mp4; codecs="' + audioCodec + ', ' + videoCodec + '"';

if (!('MediaSource' in window) || !MediaSource.isTypeSupported(mimeCodec)) {
    console.error('Unsupported MIME type or codec: ', mimeCodec);
}

const mediaSource = new MediaSource();

videoTag.src = URL.createObjectURL(mediaSource);
videoTag.crossOrigin = 'anonymous';

await new Promise((resolve, reject) => {
    mediaSource.addEventListener('sourceopen', function (_) {
        console.log(this.readyState); // open
        resolve();
    });
});

const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

//....

sourceBuffer.appendBuffer(new Uint8Array(chunk));

With the above code some videos play just fine. Others, give a warning:

Cannot play media. No decoders for requested formats: video/mp4; codecs="mp4a.40.2 avc1.4d400c", video/mp4; codecs="mp4a.40.2 avc1.4d400c"

What is interesting is that my if statement in the code above

if (!('MediaSource' in window) || !MediaSource.isTypeSupported(mimeCodec)) {

acts like the mimeCodec source is supported because it does not throw the Unsupported MIME type or codec error. I'm also skeptial of the Cannot play media. No decoders for requested formats error because the exact same video plays on my Google Photos account so I know my browser does support it.

How can I solve it? Is there a way to add in a "decoder" for codec types not natively supported or can I re-format the video into a more common supported codec type? The video is one of the common Big Buck Bunny mp4 videos, so I'm also wondering if my code has something missing since that video seems widely supported.

now_world
  • 940
  • 7
  • 21
  • 56

1 Answers1

4

MediaSource extension only supports fragmented mp4, the file hosted by w3school is not fragmented.

See this MDN article for ways to reencode it properly.

Kaiido
  • 123,334
  • 13
  • 219
  • 285