1

だから私は.mp4ファイルをダウンロードしています。MediaSource API を使用して、ダウンロード ファイルをビデオ要素にストリーミングしたいと考えています。どうすればいいですか？

const NUM_CHUNKS = 5;

var video = document.querySelector('video');
video.src = video.webkitMediaSourceURL;

video.addEventListener('webkitsourceopen', function(e) {
  var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

  // Slice the video into NUM_CHUNKS and append each to the media element.
  for (var i = 0; i < NUM_CHUNKS; ++i) {
    var startByte = chunkSize * i;

    // file is a video file.
    var chunk = file.slice(startByte, startByte + chunkSize);

    var reader = new FileReader();
    reader.onload = (function(idx) {
      return function(e) {
    video.webkitSourceAppend(new Uint8Array(e.target.result));
    logger.log('appending chunk:' + idx);
    if (idx == NUM_CHUNKS - 1) {
      video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
    }
      };
    })(i);

    reader.readAsArrayBuffer(chunk);
  }
}, false);

NUM_CHUNKS を動的に変更し、ビデオをスライスするにはどうすればよいですか?

4

2 に答える 2

2

Eric Bidelman から使用しているコードは、API がどのように機能するかを示すために、ブラウザーが既に完全にダウンロードしたビデオを切り刻んでいます。実際にはslice、サーバー上にビデオがあり、クライアントはおそらくAJAX リクエストを使用して、各チャンクを順番にダウンロードします。

MediaSource は、受け入れるビデオ ファイルの形式についてかなりうるさいように見えるため、最初に、お持ちのデモ コードで .mp4 を試すことをお勧めします。動作する mp4 を作成する方法については、Steven Robertson の回答を参照してください。

次に、ビデオを事前に手動でスライスするか、サーバー上で動的にスライスするかはあなた次第です (サーバーによって異なります)。JavaScriptクライアントは、順番に供給される限り、各チャンクの数や大きさを気にする必要はありません（仕様では、順不同の追加も許可されていると思います）。

于 2013-10-24T17:08:28.773 に答える
0

webkitMediaSourceURL;は Chrome では古くなっており、createObjectURL();使用する必要があります。

ここのパッチ:新しい OO MediaSource API への HTMLMediaElementは、コードで何を更新する必要があるかについてのいくつかの指針を与えてくれました。

于 2014-09-15T12:02:19.047 に答える