为了避免一次性加载整个视频文件，可以采用 流式加载（Progressive Loading） 的方式。这可以通过以下几种方法实现：

1. MediaSource API（流式播放）：允许你动态地将视频片段分段加载到播放器中，避免一次性下载整个视频。这是处理大视频的最佳方法，尤其是流式视频播放。
2. 后端代理与分段下载：你可以让服务器分段返回视频（类似 HTTP 流式传输），前端逐段请求并播放，这样用户在观看视频时不会因为大文件而等待过长时间。

代码如下：

<video id="videoPlayer" controls></video>

<script>
// 假设视频ID
const videoID = "1b7008c6-1951deb2b6d";

// 假设有一个API，可以根据视频ID获取视频的真实URL
async function getVideoUrl(videoID) {
    // 模拟请求API获取视频URL（你可以根据实际需求修改）
    const response = await fetch(`https://example.com/api/getVideoUrl?id=${videoID}`);
    const data = await response.json();
    return data.videoUrl;
}

// 根据视频链接使用MediaSource加载视频
async function streamVideo(videoUrl) {
    const video = document.getElementById("videoPlayer");
    const mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);

    // 当MediaSource准备好时
    mediaSource.addEventListener("sourceopen", () => {
        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001F, mp4a.40.2"');

        // 分段加载视频的函数
        function loadSegment(startByte, endByte) {
            fetch(videoUrl, {
                headers: {
                    Range: `bytes=${startByte}-${endByte}`  // 使用Range请求加载视频片段
                }
            })
            .then(response => response.blob())
            .then(blob => {
                sourceBuffer.appendBuffer(blob);
            });
        }

        // 初始段加载
        let segmentStart = 0;
        const segmentSize = 10 * 1024 * 1024;  // 每次加载10MB的片段

        // 加载视频前几个片段
        loadSegment(segmentStart, segmentStart + segmentSize);

        // 当播放器需要更多数据时，加载新的片段
        sourceBuffer.addEventListener('updateend', () => {
            segmentStart += segmentSize;
            loadSegment(segmentStart, segmentStart + segmentSize);
        });
    });
}

// 获取视频URL并开始流式播放
async function playVideo(videoID) {
    const videoUrl = await getVideoUrl(videoID);  // 获取视频URL
    streamVideo(videoUrl);  // 使用MediaSource流式加载视频
}

// 调用播放视频
playVideo(videoID);
</script>