यूट्यूब एम्बेड को प्रीलोड करना

Question

मैं एक एम्बेडेड क्रोमलेस यूट्यूब वीडियो चाहता हूं कि पेज लोड होने पर खेल के बिना अपने वीडियो को प्रीलोड करें। अभी मैं एक अजीब "प्ले तो तुरंत रोकें" स्क्रिप्ट का उपयोग कर रहा हूं जो छोटी समस्याओं का कारण बनता है (आधा सेकेंड ऑडियो लीक और काफी असफल हो जाता है)। इस प्रतीत होता है कि सरल कार्यक्षमता के लिए, क्या प्रीलोड करने के लिए एक बेहतर/अधिक सुरुचिपूर्ण तरीका है? कॉल

player.cueVideoById(videoId:String); 

player.loadVideoById(videoId:String); 

Answer 1

के बजाय

Answer 2

मैं एक ही सवाल था और इस सवाल बारे में जाना। कुछ शोध के बाद, मुझे लगता है कि मुझे एक क्लीनर मिला, यद्यपि समान, जवाब।

जावास्क्रिप्ट एपीआई OnYouTubePlayerReady आवश्यकता होने पर, आप चलाएं दबाने और onStateChange है कि हर बार बफरिंग से खिलाड़ी परिवर्तन खेलने के लिए बुलाया जाएगा करने के लिए एक घटना श्रोता जोड़ें।

उदाहरण के लिए, फ़ंक्शन के अंदर आप राज्य 3 के लिए सुनते हैं, जो बफरिंग है, और जैसे ही इसे कहा जाता है, आप वीडियो को रोक देते हैं।

आप इस तकनीक को this jsFiddle में कार्रवाई में देख सकते हैं।

साइड नोट: मैंने अपने उदाहरण में एक जावास्क्रिप्ट ढांचे का उपयोग करने से बचना, लेकिन आप आसानी से यहां एक जगह डाल सकते हैं।

इसके अलावा, मैं jsFiddle का उपयोग करके HTML के शरीर से स्क्रिप्ट टैग को सारणी करने में असमर्थ था, लेकिन बाहरी script.js फ़ाइल मेरे अपने सर्वर पर ठीक काम करती है।

Answer 3

मैं इस समस्या का समाधान के लिए देख रहा था और इस लेख भर में भाग गया:

Embed YouTube Videos Responsively without Increasing Load Time

सारांश राज्यों: यह विधि 300-400 KB से अपने वेबपेजों के आकार को कम होगा, जबकि अपनी साइट बनाने मोबाइल अनुकूल

<div class="youtube-container"> 
<div class="youtube-player" data-id="VIDEOID"></div> 
</div> 

जावास्क्रिप्ट:

पेज पर चिपकाएं

<script> 
(function() { 
    var v = document.getElementsByClassName("youtube-player"); 
    for (var n = 0; n < v.length; n++) { 
     var p = document.createElement("div"); 
     p.innerHTML = labnolThumb(v[n].dataset.id); 
     p.onclick = labnolIframe; 
     v[n].appendChild(p); 
    } 
})(); 

function labnolThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
} 

function labnolIframe() { 
    var iframe = document.createElement("iframe"); 
    iframe.setAttribute("src", "//www.youtube.com/embed/" + 
     this.parentNode.dataset.id + "? autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); 
    iframe.setAttribute("frameborder", "0"); 
    iframe.setAttribute("id", "youtube-iframe"); 
    this.parentNode.replaceChild(iframe, this); 
} 
</script> 

सीएसएस:

<style> 
.youtube-container { 
    display: block; 
    margin: 20px auto; 
    width: 100%; 
    max-width: 600px; 
} 
.youtube-player { 
    display: block; 
    width: 100%; 
    /* assuming that the video has a 16:9 ratio */ 

    padding-bottom: 56.25%; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    cursor: hand; 
    cursor: pointer; 
    display: block; 
} 
img.youtube-thumb { 
    bottom: 0; 
    display: block; 
    left: 0; 
    margin: auto; 
    max-width: 100%; 
    width: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: auto 
} 
div.play-button { 
    height: 72px; 
    width: 72px; 
    left: 50%; 
    top: 50%; 
    margin-left: -36px; 
    margin-top: -36px; 
    position: absolute; 
    background: url("http://i.imgur.com/TxzC70f.png") no-repeat; 
} 
#youtube-iframe { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
</style> 

refe अतिरिक्त संशोधन सुझावों और सुधारों के लिए मूल लेख टिप्पणियों के लिए आर।