我怎么两个视频文件数据追加到利用媒体来源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.

我的code是如下：

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

现在根据需要code不工作。

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的不是那么令人沮丧挑剔的它接受了影片的结构。我还没有找到一个样品.webm除了在的埃里克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.

编辑：做更多的测试后，我的方式设定时间可能不正确。如果你似乎得到持续的时间呈指数增长的每个追加后，尝试timestampoffset设置为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屋！