Youtube खिलाड़ियों को जल्दी से प्रस्तुत करने के लिए वर्डप्रेस (और अधिक) जानें

मुझे एक पुराने मित्र-प्रोग्रामर की साइट याद आई, जिसके पास साइट की फीड में एक हिप-हॉप था, लगभग 6 साल पहले उसने पृष्ठ लोडिंग गति पर थूक दिया था: "हाँ, हाँ, हाँ, मुझे इसे फिर से करना है, लेकिन कुछ भी जटिल नहीं है ..." अब तक बंद कर दिया - सब कुछ पहले जैसा है :-) सरल तकनीकी समाधानों के बावजूद, मैं मानता हूं कि न केवल मेरे पास ऐसा दोस्त है। इसलिए, यह थोड़ा तकनीकी नोट।

यह समझने के लिए कि हम किस समस्या के बारे में बात कर रहे हैं:


400kb का आधार। स्क्रिप्ट?

मैं बाकी को भी नहीं देखता।
अनुकूलन के बाद, संपीड़न के बिना भी, लाभ दसियों गुना होगा और होगा:

html - 0.5 केबी
सीएसएस - 1.4 केबी
js - 0.2 केबी

मुझे स्वयं अक्सर साइट के फ़ीड में हमारे YouTube चैनल से व्याख्यान प्रकाशित करने पड़ते थे, वे एक पृष्ठ पर काफी गर्म होते थे। और जब व्यक्तिगत ब्लॉग देखते हैं, तो अजनबियों या आपके वीडियो के संग्रह होते हैं। और जो मुझे परेशान करता है वह यह है कि youtube एम्बेडिंग पर प्रदर्शन कैसे करता है। एक क्लिक के साथ एक ही चित्र के लिए iframe के माध्यम से वहाँ क्या लोड नहीं है। और मजेदार बात यह है कि, मैं शायद वीडियो देखना नहीं चाहता, मैं क्या सामग्री अपलोड करूं?

यह समस्या लंबे समय पहले सामाजिक नेटवर्क और कई अन्य संसाधनों पर उच्च यातायात के साथ हल हो गई है। हाँ, और मोबाइल ब्राउज़र में। यह किसी के लिए कोई रहस्य नहीं है कि उपयोगकर्ता साइट पर अधिक समय बिताता है यदि वह सामग्री जितनी जल्दी हो सके प्राप्त करता है।

यहाँ एक ही केंद्र है, वह वीडियो टेप में ज्यादा नहीं मिलता है, इसलिए मांग में ऐसा नहीं है। हालांकि, अगर आप इस दृष्टिकोण को लोकप्रिय बनाते हैं?

आइए वर्डप्रेस के लिए उदाहरण प्लगइन का उपयोग करके इसे लागू करने का प्रयास करें।

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

Youtube से क्या खींचा जा सकता है

Youtube सामग्री को एम्बेड करने के लिए oembed का उपयोग करता है। अधिक विस्तार से, आधिकारिक एपीआई का सहारा लिए बिना क्या किया जा सकता है, इस पर एसओ को मेरा जवाब।

stackoverflow.com/questions/10066638/get-youtube-information-via-json-for-single-video-not-feed-in-javascript/23253789#23253789

JSON प्रतिक्रिया
www.youtube.com/oembed?url=http : //www.youtube.com/watch? v = ojCkgU5XGdg और प्रारूप = json

या xml
www.youtube.com/oembed?url=http : //www.youtube.com/watch? v = ojCkgU5XGdg और प्रारूप = xml

विभिन्न आकारों के पूर्वावलोकन के प्रकार एचक्यू, एसडी, मैक्स्रेस
img.youtube.com/vi/ojCkgU5XGdg/hqdefault.jpg
img.youtube.com/vi/ojCkgU5XGdg/sddefault.jpg
i.ytimg.com/vi/ojCkgU5XGdg/maxresdefault.jpg
img.youtube.com/vi/ojCkgU5XGdg/0.jpg
img.youtube.com/vi/ojCkgU5XGdg/1.jpg
img.youtube.com/vi/ojCkgU5XGdg/2.jpg
img.youtube.com/vi/ojCkgU5XGdg/3.jpg

वीडियो एनोटेशन
www.youtube.com/annotations_invideo?cap_hist=1&video_id=ojCkgU5XGdg

एक और कड़ी
www.youtube.com/get_video_info?html5=1&video_id=ojCkgU5XGdg

और यह आपके लिए उपयोगी है यदि आप धाराएँ बनाते हैं।
www.youtube.com/embed/live_stream?channel=UCkA21M22vGK9GtAvq3DvSlA

लाइव पूर्वावलोकन
i.ytimg.com/vi/W-fSCPrYSL8/hqdefault_live.jpg

बहुत बुरा YT jsonp का समर्थन नहीं करता है। इसलिए, हम डेटा को बचाने के लिए पूरी तरह से मना नहीं कर सकते।

वर्डप्रेस कैसे oem को कैश करता है

श्वेत सूची संपादक में लिंक खोजने पर वर्डप्रेस ऑटो-एम्बेडिंग का समर्थन करता है। जब यह घटना शुरू हो जाती है, तो यह _oembed_ उपसर्ग के साथ पोस्ट में एक मेटा-फ़ील्ड बनाता है और आउटपुट करते समय, यह HTML से कोड को कैश से बदल देता है।

अगर हमने क्लिक द्वारा प्रतिस्थापन आइफ्रेम के साथ लेआउट को दिखाने का फैसला किया है, तो हमें इस राज्य को कहीं और संग्रहीत करने की आवश्यकता है, सभी एक ही कैश में।

फ़िल्टर add_filter('embed_oembed_html'); पोस्ट प्रदर्शित होने से पहले कैश को बदलने की अनुमति देता है। यह एक प्रसिद्ध आइफ्रेम है।

 <iframe width="" height="" src=""></iframe> 

चूँकि हम अभी भी यह पता लगा रहे हैं कि Google अपने iframe ( टिकट # 4024 ) के लिए कोई शीर्षक क्यों नहीं बनाता है, इसलिए, हम सर्वर से कैश में शीर्षक को कैप्चर करने के लिए एक बार अनुरोध करने के लिए मजबूर हैं।

अपने डेटा के साथ कैश को कैसे अपडेट करें

 add_filter('embed_oembed_html', 'ytsl_oembed_html', 1, 3); ytsl_oembed_html($cache, $url, $attr){}; 

फ़िलहाल फ़िल्टर चालू हो गया है, मैं अपने डेटा-येट्सएल टैग की उपस्थिति के लिए $ कैश चर में देखता हूं। यदि ऐसा नहीं है, तो मैं इसके लिए अनुरोध करता हूं

 http://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=ojCkgU5XGdg&format=json 

और नए टैग की सामग्री बनाएं। परिणामस्वरूप, कैश इस तरह दिखता है:

 <iframe width="" height="" src=" " data-ytsl=" "></iframe> 

कैश को अपडेट करना इस तरह से किया जाता है। सबसे पहले, कुंजी पर विचार करें

 $cachekey = '_oembed_' . md5( $url . serialize( $attr ) ); 

और फिर हम अपडेट करते हैं।

 update_post_meta( get_the_ID(), $cachekey, $cache ); 

यदि मेरे डेटा-यॉट्स टैग का पता चला है, तो मैं शीर्षक और आईडी को उसमें से निकालता हूं और एचटीएमएल उत्पन्न करता हूं।
डेटा-आइफ्रेम में, मैं अपने टैग के बिना पहले से ही साफ कैश कोड सम्मिलित करता हूं, ताकि लेआउट को इस सामग्री के साथ क्लिक करके बदला जा सके।

 <div class='ytsl-click_div' data-iframe='$ytsl' style='$fixed position:relative;background: url($thumb_url) no-repeat scroll center center / cover' > <div class='ytsl-title_grad'> <div class='ytsl-title_text'>{$json['title']}</div> </div> <div class='ytsl-play_b'></div> </div>" 

गितुब पर सीएसएस, इसे दिखाने का कोई कारण नहीं है।

नतीजतन, खिलाड़ी ऐसा दिखता है।


अंतर के रूप में, मैंने प्ले बटन को एक अलग रंग बना दिया। लेकिन यह तथ्य कि शीर्षक एरियल द्वारा लिखा गया था, न कि एक कस्टम फ़ॉन्ट द्वारा, जो कि एक आइफ्रेम के माध्यम से भी लोड होता है, मेरी राय में, मान्यता को बहुत प्रभावित नहीं करता है।

अंतिम-इन-फ़्लाई प्रसंस्करण समाधान बहुत तेज़ है, और प्लगइन को देखते हुए, GoDaddy का P3 प्रोफाइलर पूरी तरह से दर्द रहित है। इसलिए, सुविधा और गति के बीच संतुलन खोजना संभव था। प्लगइन को उपयोगकर्ता से किसी भी कार्रवाई की आवश्यकता नहीं है। सक्षम होने पर यह केवल iframes के बजाय चित्र दिखाता है।

सामने के छोर पर।

बस स्क्रिप्ट को कनेक्ट करें। सब कुछ अपमानजनक रूप से प्राथमिक है:

 (function(){ var f = document.querySelectorAll(".ytsl-click_div"); for (var i = 0; i < f.length; ++i) { f[i].onclick = function () { this.parentElement.innerHTML = this.getAttribute("data-iframe"); } } })(); 

विपक्ष - मोबाइल उपकरणों पर, ब्राउज़र बहुत स्मार्ट हैं, और वे इसे अपने दम पर कर सकते हैं। इसलिए, यदि आप मोबाइल उपकरणों को परिभाषित नहीं करते हैं, तो आपको खेलने के लिए दो क्लिक करने होंगे।

कुल:
html - 0.5 केबी
सीएसएस - 1.4 केबी
js - 0.2 केबी
फ़ॉन्ट - ० केबी
img - 50 kb (पृष्ठभूमि छवि पर निर्भर करता है)

मैंने बाकी के समय की बड़ी अवधि के लिए बाकी मंत्रियों को नोटिस नहीं किया।

खैर, उसने बिल्ली को एक लंबे समय के लिए लोड में चित्रित किया, और तकनीकी रूप से दिलचस्प कहानी नहीं।

कोड यहाँ है github.com/Alexufo/youtube-speedload