js mediasource

// 使用 MediaSource API 的示例代码

// 创建一个 video 元素
const video = document.createElement('video');
document.body.appendChild(video);

// 创建一个新的 MediaSource 对象
const mediaSource = new MediaSource();
console.log(mediaSource.readyState); // 检查初始状态为 'closed'

// 将 MediaSource 对象设置为 video 元素的 src
video.src = URL.createObjectURL(mediaSource);

// 监听 sourceopen 事件，当 MediaSource 准备好时触发
mediaSource.addEventListener('sourceopen', handleSourceOpen);

function handleSourceOpen() {
    console.log(mediaSource.readyState); // 现在状态应为 'open'

    // 创建一个 SourceBuffer 并添加到 MediaSource 中
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e, mp4a.40.2"');

    // 加载视频片段 (假设有一个 fetchVideoSegment 函数来获取视频数据)
    fetchVideoSegment().then(function(arrayBuffer) {
        sourceBuffer.appendBuffer(arrayBuffer);

        // 当所有数据加载完毕后，结束该 SourceBuffer
        sourceBuffer.addEventListener('updateend', function() {
            mediaSource.endOfStream();
            video.play();
        });
    }).catch(function(error) {
        console.error('Error fetching video segment:', error);
    });
}

// 假设的函数用于获取视频片段
function fetchVideoSegment() {
    return new Promise((resolve, reject) => {
        // 模拟从服务器获取视频片段
        setTimeout(() => {
            // 这里应该是实际的视频数据，为了演示使用一个空的 ArrayBuffer
            resolve(new ArrayBuffer(0));
        }, 1000);
    });
}

解释说明：

1. 创建 video 元素：我们首先创建了一个 HTML5 <video> 元素，并将其添加到文档中。
2. 创建 MediaSource 对象：MediaSource 是一个允许 JavaScript 动态向媒体元素（如 <video> 或 <audio>）提供数据的对象。
3. 设置 video 的 src：我们将 MediaSource 对象通过 URL.createObjectURL 转换为一个 URL，并将其设置为 video 元素的 src 属性。
4. 监听 sourceopen 事件：当 MediaSource 准备好接收数据时，会触发 sourceopen 事件。我们在该事件中创建一个 SourceBuffer，并开始加载视频数据。
5. 创建 SourceBuffer：SourceBuffer 是用来存储和管理媒体数据的缓冲区。我们根据视频的 MIME 类型和编码格式创建了相应的 SourceBuffer。
6. 加载视频片段：我们模拟了一个 fetchVideoSegment 函数来获取视频数据，并将其追加到 SourceBuffer 中。
7. 播放视频：当所有数据加载完毕后，调用 mediaSource.endOfStream() 表示数据流结束，并开始播放视频。

这个示例展示了如何使用 MediaSource API 来动态加载和播放视频片段。