我如何使用媒体源api将两个视频文件数据添加到源缓冲区？

Question

我有两个视频名称v11.webm和v12.webm。

我想要的是这两个视频应该无间隙地无缝运行。

我正在遵循将数据附加到源缓冲区的媒体源API方法。

我指的是在这个link

给出的演示中，我修改了榜样，去除分块视频的一部分，也试图明智追加数据源缓存文件。

我的代码如下：

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

眼下所期望的代码是行不通的。

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

它没有运行无缝。

Answer 1

我在你的代码中缺少的是：mediaSource.endOfStream（）;

你能详细说明不一致的混合问题吗？

Answer 2

该规范指出，回放之间的差距不应该大于最小的音频帧，你是否符合这？不幸的是，我不认为在没有音频的情况下该怎么办。

Answer 3

也许有点迟，但我能弄清楚这一点。你的新的视频覆盖旧的，因为它们都开始在时间0你必须指定新的视频时间X追加前开始，所以你“webkitsourceopen”事件功能应该是：

/* 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，它与您链接的Eric Bidelman's Demo中使用的相同。

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