मेरे पास एक घटक के साथ एक प्रतिक्रिया ऐप है जो उपयोगकर्ता इनपुट के आधार पर विभिन्न वीडियो लोड करता है। केवल 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 एमबी है, डिस्क पर 0 एमबी)। जब मैं उपयोगकर्ता इनपुट प्रदान करता हूं और घटक को उस वीडियो को प्रदर्शित करने की आवश्यकता होती है, तो इसे फिर से प्राप्त किया जाता है जिसमें कुछ सेकंड लगते हैं।

पीएस - वीडियो तत्व पर प्रीलोड का उपयोग करने की कोशिश नहीं करने का कारण यह है कि प्रीलोड केवल तभी काम करता है जब आप जिस पेज को देख रहे हैं उसमें वीडियो है। मेरे मामले में, मैं वीडियो लोड करना चाहता हूं, भले ही वे वर्तमान पृष्ठ के लिए आवश्यक न हों।

अपडेट: मैंने एक पेन बनाया है जहां आप देख सकते हैं कि वीडियो है' सिर में एक लिंक टैग के उपयोग के बावजूद t प्री-फ़ेच किया गया।

11
bluprince13 7 अगस्त 2018, 22:45
ऐसा लगता है कि न तो link ref="pref" और न ही <video preload पूरे वीडियो को पहले से लोड करने के लिए ब्राउज़र को बाध्य करते हैं। मेरे क्रोम पर यह केवल वीडियो का हिस्सा बफ़र करता है (ताकि आप तुरंत खेलना शुरू कर सकें)।
 – 
Wang Sheng
13 अगस्त 2018, 11:26

3 जवाब

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

6
Max 11 अगस्त 2018, 22:03

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

<video controls>
  <source src={this.props.video}  type="video/mp4" /> 
</video>
1
Araz Babayev 18 अगस्त 2018, 12:00
आपका क्या मतलब है, @Araz बाबायेव?
 – 
O.o
5 फरवरी 2020, 19:45

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

0
Julia Melo 15 अगस्त 2018, 15:42
2
हाँ, प्रदर्शन में सुधार करने के लिए। कम से कम इस विशेष मामले में - उपयोगकर्ता को वीडियो को बफर करने के लिए प्रतीक्षा करने के बजाय मैं डेटा बर्बाद कर दूंगा।
 – 
bluprince13
16 अगस्त 2018, 20:44