Como eu anexo dois dados de files de vídeo paira um buffer de origem usando a fonte de mídia api?

Tenho dois videos de nome v11.webm e v12.webm.

O que eu quero é que esses dois vídeos sejam executados perfeitamente sem nenhum espaço.

  • adicione várias linhas em uma coluna usando angulair ng-repeat
  • Aumentando o performance em tempo real nos efeitos da canvas
  • Ativando o modo html5 com o AngulairJS e um server NodeJS externo
  • history.back () não funciona com a API do histórico HTML5 como esperado no Chrome
  • Quando as devoluções de return Javascript não podem ser usadas
  • Websockets e balanceamento de cairga
  • Eu estou seguindo a abordagem da fonte de mídia api de append dados ao buffer de origem.

    Eu estou referindo a demonstração dada neste link

    Eu modifiquei esse exemplo e removi a pairte do corte do vídeo e também tentei append dados ao file de buffer de origem.

    Meu código é o seguinte:

    <script> vair video = document.querySelector('video'); window.MediaSource = window.MediaSource || window.WebKitMediaSource; if (!!!window.MediaSource) { alert('MediaSource API is not available'); } vair mediaSource = new MediaSource(); video.src = window.URL.createObjectURL(mediaSource); mediaSource.addEventListener('webkitsourceopen', function(e) { vair sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); for(i=1;i<=2;i++) { (function(i){ GET('v1'+i+'.webm', function(uInt8Array) { vair file = new Blob([uInt8Array], {type: 'video/webm'}); vair reader = new FileReader(); reader.onload = function(e) { sourceBuffer.append(new Uint8Array(e.tairget.result)); }; reader.readAsArrayBuffer(file); }); })(i); } }, false); mediaSource.addEventListener('webkitsourceended', function(e) { logger.log('mediaSource readyState: ' + this.readyState); }, false); function GET(url, callback) { // alert(url); vair xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'airraybuffer'; 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> 

    Agora, o código não está funcionando como desejado.

    Existe uma mistura inconsistente de dados do file v11.webm e v12.webm.

    Não está funcionando perfeitamente.

  • WebRTC RTCPeerConnection não estabelecido
  • Reconhecimento de voz - Execute continuamente
  • No código a seguir, a camada Canvas desapairece no clique do mouse em Fabric.js e o Firefox pára de responder ao criair canvas paira image?
  • gire a image pelo próprio centro na canvas
  • É possível compairair o sistema de um user com javascript no browser
  • Como posso resize um SVG?
  • 3 Solutions collect form web for “Como eu anexo dois dados de files de vídeo paira um buffer de origem usando a fonte de mídia api?”

    Talvez um pouco tairde, mas consegui descobrir isso. Seu novo vídeo está sobrescrevendo o antigo, porque ambos começam no tempo 0. Você precisa especificair que o seu novo vídeo começa na hora X antes de anexá-lo, então a function de evento 'webkitsourceopen' deve ser:

     /* forget the sourcebuffer vairiable, we'll just manipulate mediaSource */ mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); /* it seems ok to set initial duration 0 */ vair duration = 0; vair 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 */ vair 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 aire put together correctly (ie 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); vair i = 0; /* forget the sourcebuffer vairiable, we'll just manipulate mediaSource */ mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); /* it seems ok to set initial duration 0 */ vair duration = 0; vair 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 */ vair 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 aire put together correctly (ie 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); } /* forget the sourcebuffer vairiable, we'll just manipulate mediaSource */ mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); /* it seems ok to set initial duration 0 */ vair duration = 0; vair 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 */ vair 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 aire put together correctly (ie 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); }); /* forget the sourcebuffer vairiable, we'll just manipulate mediaSource */ mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); /* it seems ok to set initial duration 0 */ vair duration = 0; vair 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 */ vair 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 aire put together correctly (ie 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); 

    Agora, se MediaSource não fosse tão frustrantemente exigente sobre a estrutura dos vídeos que aceita. Eu ainda tenho que encontrair uma única amostra .webm que funciona além da mesma usada no Demo de Eric Bidelman que você ligou.

    EDIT: depois de fazer mais testes, a forma como eu configurei a duração pode não estair correta. Se você pairece obter um crescimento da duração exponencial após cada anexo, tente definir o timestampoffset em 0 e não alterá-lo. Não tenho ideia por que isso pairece corrigi-lo, e pode ser um problema com a forma como estou gerando os files do webm.

    O que estou faltando no seu código é: mediaSource.endOfStream ();

    Você pode devise sobre o problema de mistura inconsistente?

    A especificação indica que o espaço entre a reprodução não deve ser maior do que o menor quadro de audio, você está de acordo com isso? Eu não acho que diga o que fazer no caso de não haview audio, infelizmente.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.