以HTML加载大型视频文件 [英] Load large video file in HTML

问题描述

这是我的问题:我想播放存储在S3存储桶中的大视频文件(3.6Gb)，但似乎文件太大，加载30秒后页面崩溃.

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 => {

        });
}

我看到Blob URL可能是一个解决方案，但它与我的URL不能很好地配合.

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

推荐答案

由于我不是专家，所以请一言以蔽之.但是，我目前正在做一些非常相似的事情.

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

我怀疑您的问题是您试图将整个资源(视频文件)一次加载到浏览器中.文件大小超过GB的对象URL很大.

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.

您需要做的是使用提取请求正文中的可读流来逐块处理视频文件.因此，只要您不局限于在safari浏览器中工作，就应该在浏览器中本机使用Readable和Writeable Stream类.

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.

注意:当您使用 .then(response => response.arrayBuffer())时，您是在告诉浏览器等待整个资源返回，然后将响应转换为数组缓冲.

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.

这篇关于以HTML加载大型视频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！