Question

我正在尝试使用MediaSource创建视频播放器，但是在缓冲新数据时无法播放它。我有这段代码，可以下载完整的数据然后播放。

var vidElement = document.querySelector('video');
if (window.MediaSource) {
  var mediaSource = new MediaSource();
  vidElement.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.log("The Media Source Extensions API is not supported.")
}

function sourceOpen(e) {
  URL.revokeObjectURL(vidElement.src);
  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
  var mediaSource = e.target;
  var sourceBuffer = mediaSource.addSourceBuffer(mime);
  var videoUrl = 'droid.webm';
  fetch(videoUrl)
    .then(function(response) {
      return response.arrayBuffer();
    })
    .then(function(arrayBuffer) {
      sourceBuffer.addEventListener('updateend', function(e) {
        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
          mediaSource.endOfStream();
        }
      });
      sourceBuffer.appendBuffer(arrayBuffer);
    });
}

此代码在本地主机上不起作用。我关闭了MediaSource，此行永远不会被调用

mediaSource.endOfStream();

有人可以告诉我为什么关闭状态吗？
有关创建播放器（如YouTube或任何开放源代码）的任何帮助。

顺便说一下，我现在尝试了两天的大量代码和源，并且总是MediaSource给我错误，例如源被删除或未链接。

Answer 1

首先，您需要了解mediasource，不能仅仅使用视频文件来创建youtube之类的播放器，我不知道您所拥有的代码中的错误，但是，如果您想在缓冲时播放视频首先需要用户程序将视频切成片段，第一个是最重要的内容，因为拥有媒体源的所有数据来播放其余数据，请参阅此帖子Streaming webm video over html5 with media source

JavaScript MediaSource示例

1 个答案: