Come si aggiungono due dati di file video a un buffer di origine utilizzando l'API di origine multimediale?

Question

Ho due video nome v11.webm e v12.webm.

quello che voglio è che questi due video dovrebbero funzionare senza problemi, senza alcuna lacuna.

sto seguendo l'approccio api sorgente multimediale dei aggiungendo dati al buffer di origine.

Mi riferisco la demo contenute nella presente link

ho modificato che l'esempio e rimosso la parte della suddivisione in blocchi del video e anche cercato di accodare i dati in file di buffer di origine saggio.

Il mio codice è il seguente:

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

In questo momento il codice non funziona, se lo desideri.

C'è una mescolanza incoerente dei dati v11.webm file e v12.webm.

Non funziona perfettamente.

Answer 1

Quello che mi manca nel codice è: mediaSource.endOfStream();

Puoi approfondire il problema di miscelazione incoerente?

Answer 2

Gli stati spec che il divario tra la riproduzione non deve essere più grande del più piccolo frame audio, state conformi alla presente ?? Non penso che dica cosa fare nel caso in cui non ci sia audio, sfortunatamente.

Answer 3

Forse un po 'in ritardo, ma sono stato in grado di capire questo fuori. Il vostro nuovo video sovrascrive quello vecchio, perché entrambi cominciano al tempo 0. È necessario specificare che il vostro nuovo video inizia al momento X prima di aggiungere che, così il vostro evento funzione 'webkitsourceopen' dovrebbe essere:

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

Ora se solo MediaSource non era così frustrantemente pignolo riguardo alla struttura dei video che accetta. Devo ancora trovare un singolo esempio .webm che funzioni oltre lo stesso utilizzato in Eric Bidelman's Demo collegato.

MODIFICA: Dopo aver eseguito più test, il modo in cui imposto la durata potrebbe non essere corretto. Se ti sembra di ottenere una crescita esponenziale della durata dopo ogni aggiunta, prova a impostare il timestampoffset su 0 e non modificarlo. Non ho idea del motivo per cui sembra risolverlo, e potrebbe essere un problema con il modo in cui sto generando i file webm.