如何使用MediaSource？

问题描述

我有一个要在本机html5视频标签中播放的视频的列表，因此我尝试为此使用MediaSource。本质上，我想在后台下载单个视频文件，并不断将它们逐个推送到播放器中，因此整个视频看起来就像是一个连续的视频。我在网上找到了som示例，但我无法使其正常工作。我最后的尝试是使用示例from mozilla directly，但仍然没有运气。知道如何进行这项工作吗？

这是我的简单演示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Video</title>
</head>
<body>
<video controls autoplay width="1280" height="720" id="vid"></video>
<script>
    let mediaSource = new MediaSource();
    mediaSource.addEventListener("sourceopen",srcOpen);
    let video = document.getElementById("vid");
    video.src = URL.createObjectURL(mediaSource);

    function srcOpen(_) {
        let mediaSource = this;
        let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001f,mp4a.40.2"');

        fetch("123.mp4",{mode: "no-cors"}).then(response => {
            response.arrayBuffer().then(buf => {
                sourceBuffer.addEventListener('updateend',function (_) {
                    mediaSource.endOfStream();
                    video.play();
                });
                sourceBuffer.appendBuffer(buf);
            });
        });
    }

</script>

</body>
</html>

编辑： mozilla的示例适用于http://nickdesaulniers.github.io/netfix/demo/bufferAll.html，并且我已经在该兔子视频中进行了尝试，并且可以正常工作。但是我在计算机上拥有的任何其他mp4文件都失败了。我检查了该兔子视频上的编解码器信息，唯一没有其他视频的是颜色配置文件信息（ITU-R BT。[NNN]）。 Usnig简单视频src标签可用于任何视频。是媒体错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html5-video javascript media-source

如何使用MediaSource？

问题描述

解决方法

相关问答