如何在反应应用程序中预取视频？

Question

我有一个React应用程序,其中的组件根据用户输入加载不同的视频.只有4或5个小视频,因此我想在浏览器处于非活动状态时预取所有这些视频.

在我的组件中,我有:

<video src={this.props.video} type="video/mp4" />

在我的index.html中,我在视频中有一条线:

<link rel="prefetch" as="video/mp4" href="link/to/my/video.mp4">

但是,这不起作用.查看控制台,我可以看到视频已被提取(状态为200)但未存储在缓存中(响应大小为5 Mb,磁盘为0 Mb).当我提供用户输入并且组件需要显示该视频时,它将再次获取,这需要几秒钟.

PS - 我没有尝试在视频元素上使用预加载的原因是因为预加载仅在您正在查看的页面中包含视频时才有效.在我的情况下,我想加载视频,即使它们不是当前页面所必需的.

更新:我做了一支笔,你可以看到尽管在头部使用了链接标签,但视频并未预先获取.

Answer 1

在您的情况下,您可以发出AJAX请求并根据该请求的响应创建blob URL.

你可以从我的代码笔中看到

function playVideo() {
    var video = document.getElementById('video')

    if (video) {
        video.play().then(_ => {
            console.log('played!')
        });
    }
}

function onSuccess(url) {
    console.log(url);
    var video = document.createElement('VIDEO')
    if (!video.src) {
        video.id = 'video';
        document.body.appendChild(video);
        video.src = url
    }
}

function onProgress() {

}

function onError() {

}

prefetch_file('https://raw.githubusercontent.com/FilePlayer/test/gh-pages/sw_360_lq.mp4', onSuccess, onProgress, onError)

function prefetch_file(url,
                       fetched_callback,
                       progress_callback,
                       error_callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";

    xhr.addEventListener("load", function () {
        if (xhr.status === 200) {
            var URL = window.URL || window.webkitURL;
            var blob_url = URL.createObjectURL(xhr.response);
            fetched_callback(blob_url);
        } else {
            error_callback();
        }
    }, false);

    var prev_pc = 0;
    xhr.addEventListener("progress", function (event) {
        if (event.lengthComputable) {
            var pc = Math.round((event.loaded / event.total) * 100);
            if (pc != prev_pc) {
                prev_pc = pc;
                progress_callback(pc);
            }
        }
    });
    xhr.send();
}

这种方法的缺点是,如果视频不允许您的站点使用CORS,它将无法工作.