使用媒体源扩展遇到 DOMException：加载失败，因为找不到支持的源答案

【问题标题】：Use Media Source Extensions meet DOMException: Failed to load because no supported source was found使用媒体源扩展遇到 DOMException：加载失败，因为找不到支持的源
【发布时间】：2018-02-24 09:39:00
【问题描述】：

我使用 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/

【问题讨论】：

您是否能够从片段或完整视频中找到完整的编解码器值“avc1.42E01E, mp4a.40.2”？这是在前端创建网络播放器时所必需的，我无法使用 ffmpeg /ffprobe 获取 42E01E 值。任何帮助都会很有用，因为我也在制作您所要求的东西
medium.com/@JackPu/how-js-get-video-codec-548a33cf7454
那是一个普通文件！我可以使用 RTSP url 即时完成！还是谢谢！

标签： html video media-source mse

【解决方案1】：

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

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

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

【讨论】：

任何工具获取编解码器值，如avc1.42E01E，mp4a.40.2
问题在于容器格式，而不是编解码器类型。您正在创建 video/mp4 类型的 SourceBuffer，但会附加传输流段。您要么需要将传输流片段重新打包成 MP4 片段，要么创建一个 MIME 类型为 video/mp2t 的 SourceBuffer（假设您可以找到一个可以让您执行此操作的用户代理）。