Question

是否可以动态地将数据附加到HTML5视频播放器中？例如：
我的视频A的持续时间为30秒，视频B的持续时间为30秒我想播放视频A并在播放视频B之前10秒播放，但播放器视频长度现在必须显示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

是的，你绝对可以使用Media Source Extensions机制动态地将视频源添加到HTML5视频元素中。

这实际上是通过引用Javascript函数替换视频元素的'src'文件。在该函数中，您可以动态填充视频元素的源缓冲区。

通过这种方式，您可以在播放视频之前有效地执行任何操作。该机制的关键驱动因素之一是启用自适应比特率流 - Javascript功能根据连接的带宽选择最佳比特率流进行请求，如果连接变得拥挤或带宽更多，则可以切换到不同的流是可用的。

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

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

在支持MSE的任何浏览器中查看它（持续版Chrome，Firefox和IE应该）

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

1 个答案: