Re: [whatwg/fetch] Body.arrayBuffer([begin, end]) (#554)

@beaufortfrancois Tried to set `<video>` element `.src` to `Blob URL` with `.slice()` of `Uint8Array()` with  `ArrayBuffer` as source from `.arrayBuffer()` to smallest value which dispatched `canplay` event of `<video>` element, using https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4 as media resource. 

The smallest value passed to `.slice()` which rendered the non-playing beginning of the media was `33700`. The video time is set to 2 seconds, though pressing play control does not play a time slice of the media

```
fetch("https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4")
      .then(response => response.arrayBuffer())
      .then(ab => {
        const VIEW = new Uint8Array(ab);
        video.src = URL.createObjectURL(new Blob([VIEW.slice(0, 33700)]));
})
```

but rather flashes the `<video>` element.

A `.slice()` of  `36500` was the least value which actually moved the current time control.

A `.slice()` of  `144000` was least to playback the full initial 2 seconds of media.

A `.slice()` of `1908` dispatches `loadedmetadata` event.

Was not able to produce media playback with a `.slice()` of `1024`, which does not appear to load enough media data for `loadedmetadata` event to be dispatched or media playback.

If the requirement is to play media from cache while the request is being processed you can use `ReadableStream` and `MediaSource` with `SourceBuffer` `.mode` set to `"segments"` to append a chunk of data as `Uint8Array` to `SourceBuffer` during the read of the response, before the full request has completed

```
    const [video, mediaSource, mimeCodec, processStream] = [
      document.querySelector("video")
    , new MediaSource
    , "video/mp4; codecs=avc1.42E01E, mp4a.40.2"
    , ({value, done}) => {
        if (done) {
          mediaSource.endOfStream();
          return
        }
        sourceBuffer.appendBuffer(value);
      }
    ];
    video.oncanplay = () => {
      video.oncanplay = null;
      video.play()
    }
    // if required respond from cache at ServiceWorker here
    fetch("https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4")
      .then(response => response.body.getReader())
      .then(reader => {

        video.src = URL.createObjectURL(mediaSource);
        
        mediaSource.onsourceopen = () => {
          sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
          sourceBuffer.mode = "segments";
          sourceBuffer.addEventListener("updateend", event => {
            reader.read().then(processStream)
          });

          reader.read().then(processStream);
          
        }

        return Promise.all([new Promise(resolve => mediaSource.onsourceended = () => resolve(mediaSource.readyState)), reader.closed])
        
      })
      .then(([msReadyState]) => {
        console.log(msReadyState)
      })
      .catch(err => console.log(err))
```
[plnkr](https://plnkr.co/edit/qULJYv1laeHioOCAizu3?p=preview)


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/fetch/issues/554#issuecomment-313013739