我如何使用媒體源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文件的問題。