Question

我一直试图通过使用MediaSource API附加片段来播放视频。

我知道这里还有其他问题，但是到目前为止，我仍然无法解决这个问题。

我声明MediaSource如下：

let mediaSource;
var mimeCodec = 'video/mp4; codecs="avc1.4D401F"';
if (MediaSource.isTypeSupported(mimeCodec)) {
    // Create Media Source
    mediaSource = new MediaSource(); // mediaSource.readyState === 'closed'
} else {
    console.error("Unsupported media format");
}

我的代码非常简单：

const handleSourceOpen = async () => {

    mediaSource.duration = 10;
    var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    var url = queue.shift();
    while(true) {
        if (!url) {
            break;
        }
        await fetchSegmentAndAppend(url, sourceBuffer);
        url = queue.shift();
    }
}


mediaSource.addEventListener('sourceopen', handleSourceOpen.bind(mediaSource));
if (refVideo.current) {
    refVideo.current.src = URL.createObjectURL(mediaSource);
}

获取段和附加内容如下：

const fetchSegmentAndAppend = async (segmentUrl, sourceBuffer: SourceBuffer): Promise<void> => {
    return new Promise(async (resolve, reject) => {
        const buffer = await fetchArrayBuffer(segmentUrl);
        console.log(buffer);
        sourceBuffer.addEventListener('updateend', function (ev) {
            resolve()
        });
        sourceBuffer.addEventListener('error', function (ev) {
            reject()
        });
        sourceBuffer.appendBuffer(buffer);
    })
}

和fetchArrayBuffer方法：

function fetchArrayBuffer(url): Promise<Uint8Array> {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
            resolve(new Uint8Array(xhr.response));
        };
        xhr.send();
    })
}

没有引发错误。 console.log(buffer)语句正确记录了来自视频的字节数组，这意味着视频已正确提取。队列变量是一个数组，其中包含3个我手动上传到Firebase Storage的小视频网址。

我的目标是使用MediaSource API依次播放这些视频。

我还使用了不同的mime类型和mediaSource.duration属性，但似乎没有任何作用。

从MediaSource API播放视频显示空白屏幕

0 个答案: