场景

2024年03月13日

柏拉文

越努力，越幸运

一、流媒体播放

---

<video id="video" controls width="640"></video>

<script>
    const video = document.getElementById("video");
    const mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);

    //   const videoURL = "http://127.0.0.1:5500/javascript/mediaSource/0313/test.mp4";
    const videoURL =
    "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4";
    const mimeCodeC = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

    function isTypeSupported(mime) {
        return "MediaSource" in window && MediaSource.isTypeSupported(mime);
    }

    async function sourceOpenHandler() {
        const sourceBuffer = mediaSource.addSourceBuffer(mimeCodeC);

        const response = await fetch(videoURL);
        const data = await response.arrayBuffer();

        sourceBuffer.addEventListener("updateend", () => {
            if (!sourceBuffer.updating && mediaSource.readyState === "open") {
                mediaSource.endOfStream();
                video.play();
            }
        });

        sourceBuffer.appendBuffer(data);
    }

    function run() {
        if (isTypeSupported(mimeCodeC)) {
            mediaSource.addEventListener("sourceopen", sourceOpenHandler);
        } else {
            console.error("Unsupported MIME type or codec: ", mimeCodec);
        }
    }

    run();
</script>

二、直播流媒体

---

三、视频编辑和处理

---

四、自适应码率流媒体播放

---

自适应码率流媒体播放: 根据用户的网络状况动态调整视频质量，实现更流畅的观看体验