Jak dołączyć dwa pliki wideo do bufora źródłowego za pomocą interfejsu API źródła?

Question

Mam dwie nazwy filmów v11.webm i v12.webm.

Czego chcę, żeby te dwa filmy działały bezproblemowo bez żadnych luk.

Podążam za podejściem do źródła danych w api mediów, do którego dołączam dane do bufora źródłowego.

Mam na myśli demo podane link

Mam zmodyfikowany tego przykładem i usunięto część wyrwy wideo, a także próbował dołączyć dane do pliku bufora źródłowego mądry.

Mój kod wygląda następująco:

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

Teraz kod nie działa zgodnie z oczekiwaniami.

Istnieje niespójne mieszanie danych pliku v11.webm i v12.webm.

Nie działa płynnie.

Answer 1

To czego mi brakuje w twoim kodzie to: mediaSource.endOfStream();

Czy możesz opracować niespójny problem z mieszaniem?

Answer 2

Specyfikacja mówi, że przerwa między odtwarzaniem nie powinna być większa niż najmniejsza ramka audio, czy zgadzasz się z tym? Nie sądzę, że mówi, co robić, gdy nie ma dźwięku, niestety.

Answer 3

Być może nieco późno, ale udało mi się to rozgryźć. Twój nowy film jest nadpisanie starego, bo oboje zaczynają w czasie 0. Trzeba określić, że nowy film zaczyna się w czasie X przed dołączenie go, więc „webkitsourceopen” funkcja zdarzenie powinno być:

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

Teraz, jeśli tylko MediaSource nie był tak frustrująco wrażliwy na strukturę filmów, które akceptuje. Nie znalazłem jeszcze jednej próbki. Webm, która działa poza tą samą, którą użyto w połączonej Eric Bidelman's Demo.

EDYCJA: Po wykonaniu większej liczby testów sposób ustawionego czasu może nie być poprawny. Jeśli wydajesz się, że po każdym dołączeniu masz przyrost wykładniczy, spróbuj ustawić przesunięcie czasowe na 0 i nie zmieniaj go. Nie mam pojęcia, dlaczego wydaje się to naprawić i może to być problem z generowaniem plików webm.