11

v11.webm と v12.webm という名前の 2 つのビデオがあります。

私が望むのは、これら 2 つのビデオが隙間なくシームレスに実行されることです。

ソース バッファにデータを追加するメディア ソース API アプローチに従っています。

このリンクで提供されているデモを参照しています

私はその例を修正し、ビデオをチャンクする部分を削除し、ソース バッファ ファイルにデータを追加しようとしました。

私のコードは次のとおりです。

<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 のファイル データが混在しています。

シームレスに実行されていません。

4

3 に答える 3

11

少し遅いかもしれませんが、私はこれを理解することができました。新しい動画は古い動画を上書きしています。どちらも時刻 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 が受け入れるビデオの構造についてイライラするほどうるさくなければ。リンクしたEric Bidelman の Demoで使用されているものと同じもの以外に機能する単一のサンプル .webm をまだ見つけていません。

編集:さらにテストを行った後、期間を設定する方法が正しくない可能性があります。追加するたびに持続時間が指数関数的に増加するように思われる場合は、timestampoffset を 0 に設定し、変更しないようにしてください。なぜそれが修正されるのかわかりません.webmファイルの生成方法に問題がある可能性があります.

于 2013-08-02T21:40:15.620 に答える
1

あなたのコードに欠けているのは: mediaSource.endOfStream();

一貫性のない混合の問題について詳しく説明していただけますか?

于 2013-01-01T07:49:26.920 に答える