这是代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>Hello</h1>
    <video id="video" controls autoplay></video>
</body>

</html>

<script>
    window.onload = function() {
        var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
        const videoTag = document.getElementById("video");

        if (
            "MediaSource" in window &&
            MediaSource.isTypeSupported(mime)
        ) {
            var mediaSource = new MediaSource();
            //console.log(mediaSource.readyState);
            videoTag.src = URL.createObjectURL(mediaSource);
            mediaSource.addEventListener("sourceopen", sourceOpen);
        } else {
            console.error("Unsupported MIME type or codec: ", mime);
        }

        function sourceOpen(e) {
            var msource = this;
            console.log(msource.readyState);
            // URL.revokeObjectURL(vidElement.src);
            var sourceBuffer = msource.addSourceBuffer(mime);
            var videoUrl = "https://vjs.zencdn.net/v/oceans.mp4";
            fetch(videoUrl)
                .then(function(response) {
                    return response.arrayBuffer();
                })
                .then(function(arrayBuffer) {
                    console.log("object", arrayBuffer.byteLength);
                    sourceBuffer.addEventListener("updateend", function(_) {
                        console.log(msource.readyState);
                        if (!sourceBuffer.updating &&
                            mediaSource.readyState === "open"
                        ) {
                            msource.endOfStream();
                        }
                        videoTag.play();
                    });
                    sourceBuffer.appendBuffer(arrayBuffer);
                })
                .catch(e => console.log(e));
        }
    };
</script>

标签： javascripthtmlvideohtml5-video

javascript - 将 mp4 视频数组缓冲区添加到媒体源后，html 视频播放器冻结

问题描述

这是代码

解决方案

推荐阅读