आलसी लोडिंग (एम्बेडेड यूट्यूब वीडियो के लोड को परिभाषित करने) का पहला प्रयास - मैं इसे और अधिक सुन्दर तरीके से कैसे कर सकता हूं?

Question

कल मैंने अपनी वेबसाइट को यूट्यूब वीडियो लोड करने का तरीका तय करने का फैसला किया जब उपयोगकर्ता उन्हें अनुरोध करता था। कभी-कभी किसी पृष्ठ पर 30 वीडियो हो सकते हैं, और इसमें लोड होने में लंबा समय लगेगा।

यह वह जगह है पहली बार मैं कुछ भी करने की एक विधि "आलसी लोड हो रहा है" का प्रयास किया है, और मैं यह अच्छी तरह से समझ पूछ लायक हो जाएगा:

मैं इस पर सुधार करने के लिए क्या कर सकते हैं?

मैं इसे थोड़ा और अधिक सुंदर कैसे बना सकता हूं?

क्या यह पूरी तरह से स्थगित लोडिंग के बिंदु को याद करता है?

JSFiddle।

स्टाइल को अनदेखा करें क्योंकि यह यहां अप्रासंगिक है।

---

तरीका यह काम करता है पहला वीडियो की आईडी युक्त पृष्ठ पर एक लंगर रखकर है:

<a href="#" data-video="FzRH3iTQPrk" class="youtube-video"> 

तो पीछे jQuery हर a.youtube-video के माध्यम से लूप और के रूप में वीडियो की झलक के साथ एक पारदर्शी अवधि बनाता है इसकी पृष्ठभूमि:

$('a.youtube-video').each(function() { 
    var videoId = $(this).attr('data-video'); 
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; 

    var videoBackground = $('<span class="youtube-thumbnail"></span>'); 

    videoBackground.css({ 
     background:"#fff url('"+videoThumbnail+"') no-repeat" 
    }) 
    ... 

यह तो जावास्क्रिप्ट के साथ ब्राउज़रों को प्रभावित करने को रोकने के लिए एंकर टैग की स्टाइल (यह यहां किया जाता है को संशोधित करता है विकलांग):

$(this).css({ 
     height:315, 
     width:460, 
     position:"relative", 
     display:"block", 
     textAlign:"center", 
     color:"#fff", 
     fontSize:26 
    }); 

यह तो लंगर के लिए अवधि जोड़कर पाश अप खत्म:

$(this).text('Click to load video'); 
    $(this).append(videoBackground); 
}); 

एम्बेडेड यूट्यूब वीडियो वस्तु की लोडिंग लंगर क्लिक पर होती है:

$('a.youtube-video').click(function(e) { 
    e.preventDefault(); 
    var videoId = $(this).attr('data-video'); 
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; 
    var videoEmbed = $('<object> ... </object>');  
     ... 

यह एंकर के माता-पिता को एम्बेड कोड जोड़कर और एंकर को हटाकर समाप्त होता है:

$(this).parent().append(videoEmbed); 
    $(this).hide(); 
}); 

Answer 1

आपको href सेट करना चाहिए ताकि लोग जान सकें कि वे क्या लोड होने जा रहे हैं। पृष्ठ उत्पन्न होने पर या जेएस में तत्व पर किया जा सकता है। यदि आप चाहते हैं कि आपका पृष्ठ उन लोगों के लिए काम करे, जिनके पास जावास्क्रिप्ट अक्षम है, तो यह तत्व पर होना चाहिए।

var url = "http://www.youtube.com/watch?v=" + videoId; 
$(this).attr('href', url); 

अगर वे या तो एक शीर्षक की स्थापना करके क्लिक करें आप भी लोगों को क्या होगा बताना चाहिए:

$(this).attr('title', "Click to play video"); 

या SMH जो यह और भी स्पष्ट पर क्लिक कि बनाता है पर लोगों की तरह एक उपरिशायी बनाने के द्वारा छवि एक वीडियो चलाएगी। अथवा दोनों।

जब भी लोग ctrl या कमांड कुंजी दबाते हैं तो आपको नई विंडो में चीजों को खोलना नहीं तोड़ना चाहिए।मैं fiddle अद्यतन लेकिन मूल रूप से अपने क्लिक करें घटना में आप की जरूरत:

var isCtrlPressed = e.ctrlKey || e.metaKey; 
if (isCtrlPressed == true){ 
    return; 
} 

मैं जानता हूँ कि आप ने कहा शैली पर ध्यान न दें, लेकिन मैं इसे पसंद करते हैं एक प्लेसहोल्डर एक पृष्ठभूमि रंग है कि स्पष्ट रूप से पृष्ठ की पृष्ठभूमि से अलग है। यदि कोई पृष्ठ धीमा लोड हो रहा है, तो मैं यह बता सकता हूं कि पृष्ठ के रिक्त बिट होने के बजाय, वहां कुछ लोड होने जा रहा है।

क्या यह पूरी तरह से स्थगित लोडिंग के बिंदु को याद करता है?

पूरी तरह से नहीं, लेकिन इस मामले में यह थोड़ा व्यर्थ है। डिफरर्ड लोडिंग आमतौर पर तब उपयोग की जाती है जब लोड की जा रही चीज बहुत ही जटिल होती है (उदाहरण के लिए एक विशाल टेबल) और इसलिए पेज आकार में बहुत अधिक जोड़ दिया जाएगा, जो उपयोगकर्ता के लिंक के बाद पृष्ठ का प्रारंभिक प्रस्तुत करने में काफी समय लगेगा ।

हालांकि यूट्यूब वीडियो लोड होने में धीमे हो सकते हैं, लेकिन वास्तव में उन्हें शेष पृष्ठ को लोडिंग और प्रतिपादन से अवरुद्ध नहीं करना चाहिए, इसलिए वीडियो लोड करने से अवहेलना केवल आपको थोड़ा सा काम करने के लिए एक छोटा सा लाभ देता है।

मुझे लगता है कि आपको यह मापना चाहिए कि कोई पृष्ठ कैसे देख सकता है, नीचे स्क्रॉल करें और फिर अंतिम वीडियो चलाने के लिए क्लिक करें। यदि यह स्थगित लोडिंग के साथ तेज़ है, क्योंकि अन्य वीडियो फ़्लैश प्लेयर लोड नहीं होते हैं तो यह अभी भी इसके लायक हो सकता है।

Answer 2

नीचे दिए गए कोड here का एक jsfiddle है। (खिलाड़ी सही ढंग से प्रदर्शित नहीं होता है, मुझे लगता है कि जेएसफ़िल्ड "एम्बेड विधि" के साथ अच्छी तरह से काम नहीं करता है। मुझे पता है कि यह आईफ्रेम विधि का उपयोग कर jsfiddle पर काम करता है लेकिन आपने बताया कि आप iframes से बचना चाहते हैं)।

एक बड़ा सुधार, जैसा कि पहले से ही उल्लेख किया गया है, खिलाड़ी एम्बेड करने के लिए swfobject का उपयोग करना है। इस विधि का उपयोग करते समय, आपको प्लेयर तत्व के लिए प्लेसहोल्डर बनाना होगा। जब लिंक क्लिक किया जाता है तो प्लेसहोल्डर को हटा दिया जाएगा और एम्बेड के साथ प्रतिस्थापित किया जाएगा। मैं लिंक और प्लेयर के लिए अभिभावक div बनाने की अत्यधिक अनुशंसा करता हूं। एम्बेडेड उत्पन्न होने पर तत्वों का आकार बदलने से रोकने के लिए, आपको कंटेनर तत्व की चौड़ाई/ऊंचाई को भी स्पष्ट रूप से सेट करना चाहिए।

मुझे लगता है कि यह स्थगित लोडिंग का अच्छा उपयोग है। हालांकि फ़्लैश प्लेयर लोड पर अवरुद्ध नहीं होते हैं, फिर भी वे बहुत सारे संसाधनों का उपयोग करते हैं और मैं एक ऐसे पृष्ठ की सराहना करता हूं जो प्रारंभ में थंबनेल सेट के रूप में प्रस्तुत करता है।

मार्कअप

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> 
</script> 

<div class="container"> 
    <div id="placeholder_FzRH3iTQPrk"></div> 
    <a href="#" data-video="FzRH3iTQPrk" class="youtube-video"></a> 
</div> 
<div class="container"> 
    <div id="placeholder_go43XeW6Wg4"></div> 
    <a href="#" data-video="go43XeW6Wg4" class="youtube-video"></a> 
</div> 

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

$(document).ready(function() { 
    $('a.youtube-video').each(function() { 
     var videoId = $(this).attr('data-video'); 
     var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; 
     var videoBackground = $('<span class="youtube-thumbnail"></span>'); 
     videoBackground.css({ 
      background:"#fff url('"+videoThumbnail+"') no-repeat" 
     }); 

     // also set the parent container size to prevent flicker 
     $(this).add($(this).parent()).css({ 
      height:315, 
      width:460, 
      position:"relative", 
      display:"block", 
      textAlign:"center", 
      color:"#fff", 
      fontSize:26 
     }); 
     $(this).text('Click to load video'); 
     $(this).append(videoBackground); 
    }); 

    $('a.youtube-video').click(function(e) { 
     e.preventDefault(); 
     var videoId = $(this).attr('data-video'); 
     var params = { allowScriptAccess: "always", allowFullScreen: "true" }; 
     var atts = { id: 'player_'+videoId }; 
     $(this).hide(); 
     swfobject.embedSWF(
      "http://www.youtube.com/v/"+videoId+"?enablejsapi=1&playerapiid=ytplayer&version=3", 
      'placeholder_'+videoId, "460", "315", "8", null, null, params, atts); 

    }); 
});