javascript - mediasource webm 无法正常播放

Question

<div class="container">
    <div class="row">
        <div class="col-12">
            <video controls width="800"></video>
        </div>
    </div>
</div>

var video = document.querySelector('video');
//var assetURL = 'resources/vid/640x480_Q_crf_10_120s_tears_of_steel_1080p.webm';
var assetURL = 'resources/vid/frag_bunny.mp4';

//var mimeCodec = 'video/webm; codecs="vorbis, vp9"';
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

var mediaSource = new MediaSource();
var sourceBuffer = null;

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);


function sourceOpen() {
    sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

    var xhr = new XMLHttpRequest;
    xhr.open('get', assetURL);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        sourceBuffer.appendBuffer(xhr.response);
    };
    xhr.send();
}

您好，我的媒体源扩展有问题。

一旦我插入一个 mp4 视频，播放就完美了。但是当我嵌入 webm 视频时，会播放前 5-8 秒，然后停止视频。

我不明白为什么代码可以完美地与 mp4 文件配合使用，但不能与 webm (vp9) 文件配合使用。

有谁能够帮我？

亲切的问候

标签： javascripthtmlvideoxmlhttprequestwebm