تعلم وورد (وأكثر) لتقديم لاعبي يوتيوب بسرعة

تذكرت موقع صديق مبرمج قديم كان لديه موسيقى هيب هوب واحدة في خلاصة الموقع ، قبل حوالي 6 سنوات بصق على سرعة تحميل الصفحة: "نعم ، نعم ، نعم ، لا بد لي من إعادة ذلك ، ولكن لا يوجد شيء معقد هناك ..." توقف الآن - كل شيء كما كان من قبل :-) على الرغم من الحلول التقنية البسيطة ، أعترف أنه ليس لدي فقط مثل هذا الصديق. لذلك ، هذه المذكرة التقنية الصغيرة.

لفهم المشكلة التي نتحدث عنها:


400kb base.js النصي؟

أنا حتى لا أنظر إلى الباقي.
بعد التحسين ، حتى بدون الضغط ، سيكون الكسب عشرات المرات وسيكون:

أتش تي أم أل - 0.5 كيلو بايت
CSS - 1.4 كيلوبايت
شبيبة - 0.2 كيلو بايت

أنا نفسي غالبًا ما كان علي نشر محاضرات من قناتنا على YouTube في خلاصة الموقع ، وتم تسخينها كثيرًا على صفحة واحدة. وعند عرض المدونات الشخصية ، هناك مجموعات من الغرباء أو مقاطع الفيديو الخاصة بك. وما أزعجني هو كيف يضع youtube الأداء في التضمين. ما هناك فقط لا يتم تحميله من خلال iframe من أجل نفس الصورة بنقرة واحدة. والشيء المضحك هو أنني ربما لا أريد مشاهدة الفيديو ، فماذا يمكنني تحميل المحتوى؟

تم حل هذه المشكلة منذ فترة طويلة على الشبكات الاجتماعية والعديد من الموارد الأخرى ذات الحركة المرورية العالية. نعم ، وفي متصفحات الجوال. لا يخفى على أحد أن المستخدم يقضي المزيد من الوقت على الموقع إذا تلقى المحتوى في أسرع وقت ممكن.

هذا هو نفس هابر ، لا يحصل على الكثير في شريط الفيديو ، لذلك ليس هذا مطلوبًا. ومع ذلك ، إذا قمت بترويج هذا النهج؟

دعنا نحاول تنفيذ هذا باستخدام البرنامج المساعد المثال لـ WordPress.

بصفتي مالكًا لموقعين على WordPress ، فأنا أعرف جيدًا كيف يمكن لمؤلفي الإضافات الاستفادة من قاعدة البيانات. لذلك ، قررت بالتأكيد أن المكون الإضافي سيستخدم آلية التخزين المؤقت الأصلي ولن يتطلب أي شيء ويكسر التوافق إذا تمت إزالته.

ما يمكن سحبه من يوتيوب

يستخدم Youtube نظامًا تم تضمينه لتضمين محتوى. بمزيد من التفصيل ، ردي على SO حول ما يمكن سحبه دون اللجوء إلى واجهة برمجة التطبيقات الرسمية.

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 & format = json

أو XML
www.youtube.com/oembed؟url=http : //www.youtube.com/watch؟ v = ojCkgU5XGdg & format = xml

أنواع المعاينات ذات الأحجام المختلفة hq، sd، maxres
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. لذلك ، لا يمكننا رفض حفظ البيانات تمامًا.

كيف تم تخزين ذاكرة التخزين المؤقت في WordPress

يدعم WordPress التضمين التلقائي عند البحث عن الروابط في محرر القائمة البيضاء. عندما يتم تشغيل هذا الحدث ، يقوم بإنشاء حقل تعريف للنشر بالبادئة _oembed_ ، وعند الإخراج ، فإنه يستبدل الرمز من ذاكرة التخزين المؤقت بـ html.

إذا قررنا إظهار التخطيط بإطار iframe البديل عن طريق النقر ، فنحن بحاجة إلى تخزين هذه الحالة في مكان ما ، والأفضل من ذلك كله في نفس ذاكرة التخزين المؤقت.

add_filter('embed_oembed_html'); يسمح باستبدال ذاكرة التخزين المؤقت قبل عرض المنشور. إنه إطار iframe معروف.

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

نظرًا لأننا ما زلنا نفهم لماذا لا تشكل Google عنوانًا لإطار iframe الخاص بها ( التذكرة رقم 4024 ) ، للأسف ، فنحن مضطرون إلى تقديم طلب لمرة واحدة إلى الخادم لالتقاط العنوان في ذاكرة التخزين المؤقت.

كيفية تحديث ذاكرة التخزين المؤقت ببياناتك

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

في اللحظة التي يتم فيها تشغيل الفلتر ، أبحث في متغير $ cache عن وجود علامة data-ytsl الخاصة بي. إذا لم يكن كذلك ، فأنا أقدم طلبًا

 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 ); 

إذا تم الكشف عن علامة data-ytsl الخاصة بي ، فأنا أخرج العنوان والمعرف منه وأقوم بإنشاء html.
في iframe data ، أقوم بإدراج رمز ذاكرة التخزين المؤقت النظيف بالفعل بدون علامتي ، من أجل استبدال التخطيط بهذا المحتوى عن طريق النقر.

 <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>" 

Css على جيثب ، لا يوجد سبب لإظهاره.

نتيجة لذلك ، يبدو اللاعب هكذا.


كفرق ، جعلت زر التشغيل لونًا مختلفًا. لكن حقيقة أن العنوان كتبه Arial ، وليس بخط مخصص ، والذي يتم تحميله أيضًا من خلال iframe ، في رأيي ، لا يؤثر على الاعتراف كثيرًا.

الحل النهائي للمعالجة السريعة سريع للغاية ، وبناءً على المكون الإضافي ، فإن أداة تحليل goDaddy's P3 غير مؤلمة تمامًا. لذلك ، كان من الممكن إيجاد توازن بين الراحة والسرعة. لا يتطلب المكون الإضافي أي إجراء من المستخدم. يعرض فقط الصور بدلاً من إطارات iframe عند تمكينها.

في الواجهة الأمامية.

فقط قم بتوصيل البرنامج النصي. كل شيء هو أمر شنيع:

 (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"); } } })(); 

سلبيات - على الأجهزة المحمولة ، تكون المتصفحات ذكية جدًا ، ويمكنها القيام بذلك بمفردها. لذلك ، إذا لم تحدد الأجهزة المحمولة ، فسيتعين عليك القيام بنقرتين للعب.

المجموع:
أتش تي أم أل - 0.5 كيلو بايت
CSS - 1.4 كيلوبايت
شبيبة - 0.2 كيلو بايت
الخط - 0 كيلو بايت
img - 50 كيلوبايت (يعتمد على صورة الخلفية)

لم ألاحظ بقية السلبيات لفترة كبيرة إلى حد ما.

حسنًا ، لقد رسم القط في حمولة لفترة ليست طويلة جدًا ، وليس قصة مثيرة للاهتمام تقنيًا.

الكود هنا github.com/Alexufo/youtube-speedload