MediaSource 播放mp4

在使用 MediaSource 的时候发现了一些问题
使用MDN上的示例（https://developer.mozilla.org/en-US/docs/Web/API/MediaSource%EF%BC%89%EF%BC%8C%E6%9B%B4%E6%8D%A2%E4%BA%86mp4%E7%9A%84%E6%92%AD%E6%94%BE%E5%9C%B0%E5%9D%80%EF%BC%8C%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%8A%A5%E9%94%99

 Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.
    at SourceBuffer

该回答引用ChatGPT

根据您的描述，看起来您正在使用 MediaSource API 来播放 MP4 视频，并遇到了 "The MediaSource's readyState is not 'open'" 错误，导致无法调用 endOfStream() 方法。

这个错误通常是因为在调用 endOfStream() 方法之前，MediaSource 的 readyState 属性不是 open 状态所导致的。这个属性指示 MediaSource 是否已经打开并准备好接收数据。要解决这个问题，您需要确保在调用 endOfStream() 方法之前，MediaSource 已经处于 open 状态。可以通过监听 MediaSource 的 sourceopen 事件来确定何时它已经准备好接收数据。

以下是示例代码：

const mediaSource = new MediaSource();
const video = document.querySelector('video');

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4');

  fetch('example.mp4')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      sourceBuffer.appendBuffer(arrayBuffer);
      sourceBuffer.addEventListener('updateend', () => {
        mediaSource.endOfStream();
      });
    });
});

在上面的代码中，sourceopen 事件会在 MediaSource 准备好接收数据时触发。一旦触发，我们就可以添加一个 SourceBuffer 对象，并从服务器获取 MP4 视频数据并将其附加到 SourceBuffer 中。当数据附加完成时，我们调用 endOfStream() 方法来结束播放。