Load large video file in HTML

问题

Here is my problem : I want to play a large video file (3.6Gb) stored in a S3 bucket, but it seems the file is too big and the page crash after 30sec of loading.

This is my code to play the video :

var video = document.getElementById("video");
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });

function sourceOpen() {
    URL.revokeObjectURL(video.src);
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.f40028"');

    fetch('URL_TO_VIDEO_IN_S3')
        .then(response => response.arrayBuffer())
        .then(data => {
            // Append the data into the new sourceBuffer.
            sourceBuffer.appendBuffer(data);    
        })
        .catch(error => {

        });
}

I saw that blob URL could be a solution but it didn't work well with my URL.

回答1:

Take my answer with a grain of salt as I am no expert. However, I am working on something very similar at the moment.

I suspect your issue is that you're attempting to load the entire resource (video file) into the browser at once. An object URL for a file size that exceeds a gigabyte is extremely large.

What you need to do is use the readable stream from the body of your fetch request to process the video file chunk-by-chunk. So as long as you aren't confined to working in the safari browser, you should be to use both the Readable and Writeable Stream classes natively in the browser.

These two classes allow you to form what's called a pipe. In this case, you are "piping" data from the readable stream in your fetch request to a writable stream that you create which is then used as the underlying source of data for your media source extension and it's respective source buffers.

A stream pipe is very special in that it exhibits what's called backpressure. You should definitely look this term up, and read about what it means. In this case, it means the browser will not request more data once it has enough to meet its needs for video playback, the exact amount it can hold at once is specified by you the programmer through something called a "highwater mark" (you should also read about this).

This allows you to control when and how much data the browser is requesting from your (on going) fetch request.

NOTE: When you use .then(response => response.arrayBuffer()) you are telling the browser to wait for the entire resource to come back and then turn the response into an array buffer.

回答2:

OPTION 1

Use CloudFront to create RTMP distribution to these resources.

It will distribute your video in streaming way.

Create an RTMP distribution to speed up distribution of your streaming media files using Adobe Flash Media Server's RTMP protocol.

---

Please note that HTML5 does not support RTMP format by default (without flash).

Check here for options

---

JWPlayer supports RTMP playback using flash. SO Question

---

OPTION 2

Use Elastic Transcoder to create HLS video (.m3u8 format). Again same JWPlayer can handle it in ease.

Also it's mostly supported in native HTML5. Check compatibility with H.264

来源：https://stackoverflow.com/questions/57057903/load-large-video-file-in-html