javascript - 如何在 React 应用程序中预取视频？

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 - 我不尝试在视频元素上使用预加载的原因是因为预加载仅在您正在查看的页面中包含视频时才有效。就我而言，我想加载视频，即使当前页面不需要它们。

更新:我做了一个pen尽管在头部使用了链接标记，但您可以在其中看到视频未被预取。

Answer 1

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

从my code pen可以看出

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，它将不起作用。为您的网站。