[解決済み] "メディアを再生できません。No decoders for requested formats" on popular Big Buck Bunny mp4 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));

上記のコードで、いくつかの動画は問題なく再生されます。その他の動画は警告が表示されます。

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

面白いのは、私の if の文は、上のコードで

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

のように動作します。 mimeCodec を投げないので、ソースはサポートされています。 Unsupported MIME type or codec というエラーが発生します。にも懐疑的です。 Cannot play media. No decoders for requested formats というのも、私のGoogleフォトアカウントでは全く同じ動画が再生されるので、私のブラウザはそれをサポートしていることがわかるからです。

どうすれば解決できますか？のデコーダーを追加する方法はありますか？ codec ネイティブにサポートされていないタイプのビデオを、より一般的にサポートされている codec タイプですか？この動画は、一般的な ビッグバックバニー mp4 の動画が広くサポートされているようなので、私のコードに何か欠けているものがあるのかもしれません。

解決方法は？

MediaSourceエクステンションがサポートするのは 断片化されたMP4 w3schoolがホストしているファイルはフラグメント化されていません。

参照 このMDN記事 を適切に再エンコードする方法について説明します。