कैसे एक प्रतिक्रिया आवेदन में वीडियो प्रीफ़ेच करने के लिए?

आपकी स्थिति में, आप एक AJAX अनुरोध कर सकते हैं और उस अनुरोध की प्रतिक्रिया से ब्लॉब 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 की अनुमति नहीं देता है तो यह काम नहीं करेगा। आपकी साइट के लिए।

अपने वीडियो को कोड से बदलें। मुझे आशा है कि यह उपयोगी है

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

क्या स्क्रीन लोड करने से पहले सभी वीडियो को प्रीफेच करना वाकई जरूरी है? भले ही वे छोटे वीडियो हों, लेकिन जरूरी नहीं कि उपयोग की जाने वाली जानकारी को प्रीलोड करना ही एकमात्र विकल्प नहीं है। कल्पना कीजिए कि यदि उपयोगकर्ता केवल पांच वीडियो में से एक को देखता है, तो इसका मतलब है कि पहले से लोड किए गए सभी डेटा का 80% कभी उपयोग नहीं किया गया था। जब आप वीडियो लोड कर रहे हों तो एक विकल्प एक घटक दिखा रहा होगा, जैसे नेटफ्लिक्स विकल्पों की खोज करते समय करता है।