动态地将数据附加到 html5 视频

Question

是否可以动态地将数据附加到 HTML5 视频播放器中？示例：
我的视频 A 的时长为 30 秒，视频 B 的时长也为 30 秒。
我想播放视频 A 并在完成前 10 秒附加视频 B，但播放器视频长度现在必须显示 1 分钟的长度。

编辑：

我查看了上面的示例并修改为将整个演示视频附加 5 次，但不起作用。视频结果始终为 5.24 秒（原始视频为 6 秒）我想将原始视频附加 5 次以获得 30 秒的视频结果。有可能的？

这是我的代码

var FILE = 'files/test.webm';
var NUM_CHUNKS = 15;
var G_VIDEO;
var video = document.querySelector('video');

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

var mediaSource = new MediaSource();

document.querySelector('[data-num-chunks]').textContent = NUM_CHUNKS;

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

function callback(e) {
  var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

  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) {
        //sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
        // here i append the entire video locate in the global var G_VIDEO
        sourceBuffer.appendBuffer(new Uint8Array(G_VIDEO));

        logger.log('appending chunk:' + i);
        if (i == NUM_CHUNKS - 1) {
          mediaSource.endOfStream();
        } else {
          if (video.paused) {
            video.play(); // Start playing after 1st chunk is appended.
          }
          readChunk_(++i);
        }
      };

      var startByte = chunkSize * i;
      //here i guess is where the video is truncate
      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('webkitsourceended', 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;
    }
    G_VIDEO = xhr.response;
    callback(new Uint8Array(xhr.response));
  };
}

Answer 1

是的，您绝对可以使用媒体源扩展机制将视频源动态添加到 HTML5 视频元素中。

这实质上用对 Javascript 函数的引用替换了视频元素的“src”文件。在该函数中，您动态填充视频元素的源缓冲区。

通过这种方式，您可以在播放视频之前有效地对视频执行任何您想要的操作。该机制的关键驱动因素之一是启用自适应比特率流 - Javascript 函数根据连接的带宽选择要请求的最佳比特率流，并且在连接拥塞或带宽增加时可以切换到不同的流可用。

这里有一个很好的机制演示：

• http://html5-demos.appspot.com/static/media-source.html

在任何支持 MSE 的浏览器中查看它（最新版本的 Chrome、Firefox 和 IE 应该）