使用MediaSource API来蒸发增长的文件。 [英] Steaming a growing file using the MediaSource API.

问题描述

所以我有一个下载.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将视频转换为NUM_CHUNKS并将其附加到媒体元素中。
 for（var i = 0; i< NUM_CHUNKS; ++ i）{
 var startByte = chunkSize * i; 
 
 // 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并切片？ Eric Bidelman使用的代码截取浏览器已经完整下载的视频来演示api如何工作。实际上，您需要在服务器上放置 slice 视频，并且客户端可以按顺序下载每个块，可能需要使用 AJAX请求。

我首先建议你在演示代码中尝试使用.mp4，因为MediaSource对它所接受的视频文件的格式很挑剔。请参阅 Steven Robertson的回答，了解如何创建可运作的mp4。

然后，是否要事先手动分割视频，还是在服务器上动态分割视频（根据您的服务器而定），由您决定。 javascript客户端不应该关心每个块有多少或多大，只要它们是按顺序进行的（我认为该规范甚至允许一些乱序追加）。

So I have a downloading .mp4 file. I would like to stream the download file into a video element using the MediaSource API. How would I do this?

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

How would I dynamically change the NUM_CHUNKS,and slice the video?

解决方案

The code you're using from Eric Bidelman chops up a video that the browser already fully downloaded to demonstrate how the api works. In reality, you'd slice the video on the server, and the client would download each chunk in order, probably with an AJAX request.

I'd first suggest you try your .mp4 in the demo code you have, because MediaSource seems pretty picky about the format of the video files it accepts. See Steven Robertson's answer about how to create an mp4 that'll work.

Then it's up to you whether you want to slice the video manually beforehand, or do it dynamically on the server (which will vary depending on your server). The javascript client shouldn't care how many or how large each chunk each is, as long as they're fed in order (and I think the spec even allows some amount of out-of-order appending).

这篇关于使用MediaSource API来蒸发增长的文件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！