JavaScript 媒体源示例答案

【问题标题】：JavaScript MediaSource ExampleJavaScript 媒体源示例
【发布时间】：2018-07-09 18:36:49
【问题描述】：

我正在尝试使用 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 或任何开源播放器等播放器的任何帮助。

顺便说一句，我现在尝试了很多代码和源 2 天，但总是 MediaSource 给我错误，例如源被删除或未链接。

【问题讨论】：

帮助我们并告诉我们您遇到的哪些错误。
sourceBuffer.addEventListener('updateend', function(e) { if (!sourceBuffer.updating && mediaSource.readyState === 'open') { mediaSource.endOfStream(); } }); 这部分，我总是得到 mediaSource.readyState === 'close'

标签： javascript media-source

【解决方案1】：

首先你需要了解 mediasource ，你不能只使用视频文件来创建像 youtube 这样的播放器，我不知道你有代码中的错误，但是，如果你想在缓冲的同时播放视频你首先需要用户程序将视频分割成部分，第一个是最重要的部分，因为媒体源拥有所有数据，可以使用它来播放其余数据，请看这个帖子Streaming webm video over html5 with media source

【讨论】：