使用媒体源扩展符合DOMException:无法加载，因为找不到受支持的源

Question

我使用ffmpeg将mp4转换为m3u8；，并且它保持相同的编解码值。当我使用fetch来获取ts缓冲区并将其附加到MSE实例时。太糟糕了。它不起作用。

以下是一些代码：

function sourceOpen(e) {
    URL.revokeObjectURL(video.src);
    // var mime = 'video/mp4; codecs="avc1.42c015, mp4a.40.5"';avc1.42001e"
    var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    var mediaSource = e.target;
    sourceBuffer = mediaSource.addSourceBuffer(mime);
    var videoUrl = './video/' + playManifest.segments[index]['uri'];
    log('.js-log-m3u8', 'Fetch Segment ~' + videoUrl);
    fetch(videoUrl, {
        // headers: { range: 'bytes=0-5671398' }
    })
        .then(function (response) {
            return response.arrayBuffer();
        })
        .then(function (arrayBuffer) {
            sourceBuffer.appendBuffer(arrayBuffer);
            sourceBuffer.addEventListener('updateend', updateEnd);
        });
}

Entire Code

在线测试页面：http://events.jackpu.com/media-source/

Answer 1

您正在将mime类型设置为video/mp4，但试图将传输流段附加到源缓冲区。因此，追加将失败，并且没有数据被缓冲。

一旦所有的片段都被获取，你就会调用play，而不检查是否有任何数据被缓冲，Promise拒绝。

假设您的用户代理能够创建具有正确mime类型的SourceBuffer，则需要这样做。