Question

我很幸运使用Media Source API来实现自己的实现。

我刚刚决定看一个工作示例是否可以在本地正常工作，所以我复制＆amp;粘贴示例中的源代码： http://html5-demos.appspot.com/static/media-source.html

来源：视图源：http://html5-demos.appspot.com/static/media-source.html

我没有'test.webm'视频，因此我可以使用自己的.webm视频文件。我使用的测试文件是.webm视频文件14.6m

结果是它不能完全相同。检查控制台我可以看到有一些错误，所以我添加了一个队列来收集视频块，而来自媒体源的sourceBuffer正在更新。

这有助于修复错误＆amp;我可以在播放器上看到视频已满载，但问题是视频从未开始播放。它只是一个黑屏，显示视频的长度时间。

如果我手动将其移动到1秒的起点，它将一直播放到最后。我假设这意味着实现正常。检查视频的video.paused bool，当它有黑屏时，也会返回错误状态。目前还不确定这只是html视频的问题。

以下是我对示例脚本的更新：

<script>
var FILE = 'test.webm';
// var FILE = 'perigny.mp4';
var NUM_CHUNKS = 10;
var video = document.querySelector('video');
finished = false;

window.MediaSource = window.MediaSource || window.WebKitMediaSource;
if (!!!window.MediaSource) {
  alert('MediaSource API is not available');
}

var mediaSource = new MediaSource();

video.src = window.URL.createObjectURL(mediaSource);

function callback(e) {
  console.log("video.paused: ", video.paused);

  var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
  // sourceBuffer = mediaSource.addSourceBuffer('video/mp4;codecs="avc1.4d001e"');

  queue = [];

  sourceBuffer.addEventListener('updatestart', 
    function(e) { console.error('updatestart: ' + mediaSource.readyState);});
  sourceBuffer.addEventListener('update', 
    function(e) { 
      console.log('update: ' + mediaSource.readyState);
    });
  sourceBuffer.addEventListener('updateend', function() { // Note: Have tried 'updateend'
    console.log('updateend: ' + mediaSource.readyState);
      if (queue.length > 0 && !sourceBuffer.updating) {
        console.error("queue.shift");
      // if (queue.length) {
        sourceBuffer.appendBuffer(queue.shift());
      }
      if (finished && !sourceBuffer.updating) {
        console.log("finished");
        mediaSource.endOfStream();
        console.log("MediaSource", mediaSource);
        console.log("video.paused: ", video.paused);

        video.pause();
        video.play();
      }
  }, false);

  logger.log('mediaSource readyState: ' + this.readyState);

  GET(FILE, function(uInt8Array) {
    var file = new Blob([uInt8Array], {type: 'video/webm'});
    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

    logger.log('num chunks:' + NUM_CHUNKS);
    logger.log('chunkSize:' + chunkSize + ', totalSize:' + file.size);

    // Slice the video into NUM_CHUNKS and append each to the media element.
    var i = 0;

    (function readChunk_(i) {
      var reader = new FileReader();

      // Reads aren't guaranteed to finish in the same order they're started in,
      // so we need to read + append the next chunk after the previous reader
      // is done (onload is fired).
      reader.onload = function(e) {
        console.log("i", i);
        if (sourceBuffer.updating || queue.length > 0) {
          console.log("addSourceBuffer is updating");
          queue.push(new Uint8Array(e.target.result));
        }
        else {
          console.log("sourceBuffer.appendBuffer();");
          sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
        }

        logger.log('appending chunk:' + i);
        if (i == NUM_CHUNKS - 1) {
          console.log("End of stream");
          finished = true;
          // if (!sourceBuffer.updating)
          //   mediaSource.endOfStream();
        } else {
          if (video.paused) {
            video.play(); // Start playing after 1st chunk is appended.
          }
          readChunk_(++i);
        }
      };

      var startByte = chunkSize * i;
      var chunk = file.slice(startByte, startByte + chunkSize);

      reader.readAsArrayBuffer(chunk);
    })(i);  // Start the recursive call by self calling.
  });
}

mediaSource.addEventListener('sourceopen', callback, false);
mediaSource.addEventListener('webkitsourceopen', callback, false);

mediaSource.addEventListener('sourceended', function(e) {
  logger.log('mediaSource readyState: ' + this.readyState);
}, false);

function GET(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.send();

  xhr.onload = function(e) {
    if (xhr.status != 200) {
      alert("Unexpected status code " + xhr.status + " for " + url);
      return false;
    }
    callback(new Uint8Array(xhr.response));
  };
}
</script>

编辑：为了帮助可能遇到此问题的其他人，让我添加解决方案/结果。

事实证明，这是我尝试使用的原始.webm视频文件的关键框架问题。似乎MSE API即使在它需要的确切文件格式时也会非常挑选。我最终从以下网址下载了.webm视频： http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5

我计划现在继续使用这些其他文件格式。

Answer 1

不要从HTML页面获取代码，从Github下载整个项目：https://github.com/dazedsheep/DASH-JS。

确保将其放在localhost / dash下可以调用的位置。

您必须确保将媒体文件放在“bunny_2s_700kbit”目录中，您必须从此处下载： http://www-itec.uni-klu.ac.at/ftp/datasets/mmsys12/BigBuckBunny/bunny_2s_480p_only/bunny_2s_700kbit/

然后确保你在bigbuckbunny_mp.mpd中有正确的路径：

<BaseURL>http://localhost/dash/</BaseURL>

和

<Initialization sourceURL="bunny_2s_700kbit/bunny_480_700kbit_dash.mp4"/>

以及dashtest.html中的正确路径：

var dashPlayer = new DASHPlayer(video,"bigbuckbunny_mp.mpd");

视频＆＃39; Stuck＆＃39;使用Media Source Extension API时

1 个答案: