javascript - "Cannot play media. No decoders for requested formats" on popular Big Buck Bunny mp4 video - Stac

admin管理员组

文章数量:1419185

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 mon supported codec type? The video is one of the mon Big Buck Bunny mp4 videos, so I'm also wondering if my code has something missing since that video seems widely supported.

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 mon supported codec type? The video is one of the mon Big Buck Bunny mp4 videos, so I'm also wondering if my code has something missing since that video seems widely supported.

• javascript
• video
• html5-video
• mime-types
• mp4

Share Improve this question Follow asked Dec 17, 2020 at 2:51 now_worldnow_world 1,11688 gold badges2727 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4 +100

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

See this MDN article for ways to reencode it properly.

本文标签：