Javascript mediaSource element

Javascript mediaSource element

本文关键字：element mediaSource Javascript      更新时间：2023-09-26

我正在尝试使用javascript mediasource来隐藏视频URL。但是我得到一个错误，

Uncaught InvalidStateError: Failed to execute 'endOfStream' on 'MediaSource': MediaSource的readyState不是'open'。如果视频类型和代码要动态传递，这也会很有帮助。

下面是我的代码， 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
<script>
  var video = document.querySelector('video');
  var assetURL = 'adsss.mp4';
  // Need to be specific for Blink regarding codecs
  // ./mp4info frag_bunny.mp4 | grep Codec
  var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
  if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
    var mediaSource = new MediaSource;
    //console.log(mediaSource.readyState); // closed
    video.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen);
  } else {
    console.error('Unsupported MIME type or codec: ', mimeCodec);
  }
  function sourceOpen (_) {
    console.log(this.readyState); // open
    var mediaSource = this;
    console.log(mediaSource);
    var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    console.log(sourceBuffer);
    fetchAB(assetURL, function (buf) {
      sourceBuffer.addEventListener('updateend', function (_) {
        mediaSource.endOfStream();
        video.play();
        console.log(mediaSource.readyState); // ended
      });
      sourceBuffer.appendBuffer(buf);
    });
  };
  function fetchAB (url, cb) {
    console.log(url);
    var xhr = new XMLHttpRequest;
    xhr.open('get', url);
    console.log(xhr);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
      cb(xhr.response);
      console.log(xhr.response);
    };
    xhr.send();
  };
</script>

上面的代码不能工作的原因是，只有在开始时移动了moov(电影头框)的碎片化mp4视频才会使用Media源播放。

参考以下链接，1)无法在chrome中使用mp4格式获得MediaSource2)什么是碎片化mp4(fMP4)?它和普通mp4有什么不同?

您可以使用MP4box工具使用以下命令分割视频，

MP4Box -dash 1000 -rap - fragment -rap test.mp4

相关文章：