如何使用媒体源 api 将两个视频文件数据附加到源缓冲区? [英] How do i append two video files data to a source buffer using media source api?

问题描述

我有两个名为 v11.webm 和 v12.webm 的视频.

I have two videos name v11.webm and v12.webm.

我想要的是这两个视频应该无缝运行，没有任何间隙.

What i want is that these two videos should run seamlessly without any gap.

我遵循将数据附加到源缓冲区的媒体源 api 方法.

I am following the media source api approach of appending data to source buffer.

我指的是这个链接

我修改了该示例并删除了视频分块的部分，并尝试将数据明智地附加到源缓冲区文件中.

I have modified that example and removed the part of chunking the video and also tried to append data to source buffer file wise.

我的代码如下:

<script>

var video = document.querySelector('video');

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);

mediaSource.addEventListener('webkitsourceopen', function(e) {

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

    for(i=1;i<=2;i++)
    {
        (function(i){

          GET('v1'+i+'.webm', function(uInt8Array) {
              var file = new Blob([uInt8Array], {type: 'video/webm'});

              var reader = new FileReader();
              reader.onload = function(e) {
                sourceBuffer.append(new Uint8Array(e.target.result));            
              };
              reader.readAsArrayBuffer(file);

          });
        })(i);
    }

}, false);

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

function GET(url, callback) {
 // alert(url);
  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>

现在代码没有按预期工作.

Right now the code is not working as desired.

v11.webm 和 v12.webm 文件数据的混合不一致.

There is an inconsistent mixing of v11.webm and v12.webm file data.

它没有无缝运行.

推荐答案

也许有点晚了，但我能够解决这个问题.您的新视频正在覆盖旧视频，因为它们都从时间 0 开始.您必须在附加之前指定新视频在时间 X 开始，因此您的webkitsourceopen"事件函数应该是:

Perhaps a bit late, but I was able to figure this out. Your new video is overwriting the old one, because they both begin at time 0. You have to specify that your new video begins at time X before appending it, so your 'webkitsourceopen' event function should be:

/* forget the sourcebuffer variable, we'll just manipulate mediaSource */
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

/* it seems ok to set initial duration 0 */
var duration = 0;
var totalVideos = 2;

/* use this type of loop to ensure that that a single video
   is downloaded and appended before moving on to the next video,
   mediasource seems picky about these being in order */
var i = 0;
(function readChunk_(i){

    /* the GET function already returns a Uint8Array.
       the demo you linked reads it in filereader in order to manipulate it;
       you just want to immediately append it */
    GET('v1' + (i + 1) + '.webm', function(uint8Array){

        if(i == totalVideos) {
            mediaSource.endOfStream();
        } else {

            /* assuming your videos are put together correctly
               (i.e. duration is correct), set the timestamp offset
               to the length of the total video */
            mediaSource.sourceBuffers[0].timestampOffset = duration;

            mediaSource.sourceBuffers[0].append(uint8Array);

            /* set new total length */
            duration = mediaSource.duration;

            readChunk(++i);
        }
    });
})(i);

现在，如果 MediaSource 对它接受的视频结构不那么挑剔就好了.除了 Eric Bidelman 的演示您链接了.

Now if only MediaSource wasn't so frustratingly picky about the structure of the videos it accepts. I have yet to find a single sample .webm that works besides the same one used in Eric Bidelman's Demo you linked.

在进行更多测试后，我设置持续时间的方式可能不正确.如果每次追加后您似乎都获得指数持续时间增长，请尝试将时间戳偏移设置为 0 并且不要更改它.我不知道为什么这似乎可以解决它，这可能是我生成 webm 文件的方式的问题.

After doing more testing, the way I set duration may not be correct. If you seem to get exponential duration growth after each append, try setting the timestampoffset to 0 and not changing it. I have no idea why that seems to fix it, and it may be a problem with how I'm generating the webm files.

这篇关于如何使用媒体源 api 将两个视频文件数据附加到源缓冲区?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！