كما هي الحال مع عناصر الصور، يمكنك أيضًا استخدام طريقة التحميل الكسول للفيديو. يتم عادةً تحميل الفيديوهات باستخدام العنصر <video> (على الرغم من ظهور طريقة بديلة تستخدم <img> مع إمكانية تنفيذ محدودة). وتعتمد كيفية التحميل الكسول لـ <video> على حالة الاستخدام. هيا نناقش بعض السيناريوهات التي يتطلب كل منها
حلاً مختلفًا.
بالنسبة إلى الفيديو الذي لا يتم تشغيله تلقائيًا
بالنسبة إلى الفيديوهات التي يبدأ فيها المستخدم التشغيل (أي الفيديوهات التي لا يتم تشغيلها تلقائيًا)، قد يكون من المستحسن تحديد السمة preload على العنصر <video>:
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
يستخدم المثال أعلاه سمة preload مع القيمة none لمنع المتصفّحات
من التحميل المُسبق لبيانات أي فيديو. وتمنح السمة poster العنصر <video> عنصرًا نائبًا سيشغل المساحة أثناء تحميل الفيديو. ويرجع ذلك إلى أنّ السلوكيات التلقائية لتحميل الفيديوهات قد تختلف من متصفّح إلى آخر:
- في Chrome، كان الإعداد التلقائي لـ
preloadهوauto، ولكن بدءًا من الإصدار 64 من Chrome، تم ضبط الخيار التلقائي علىmetadata. ومع ذلك، في نسخة الموقع الإلكتروني المخصّصة لأجهزة الكمبيوتر من Chrome، قد يتم تحميل جزء من الفيديو مسبقًا باستخدام العنوانContent-Range. تعمل المتصفحات الأخرى المستندة إلى Chromium وFirefox بشكل مشابه. - وكما هو الحال في Chrome على سطح المكتب، سيعمل الإصدار 11.0 من Safari على سطح المكتب على تحميل نطاق من الفيديو مسبقًا. وبدايةً من الإصدار 11.2، لا يتم تحميل سوى بيانات الفيديو الوصفية مسبقًا. في متصفح Safari على نظام التشغيل iOS، لا يتم تحميل الفيديوهات مسبقًا.
- عند تفعيل وضع توفير البيانات، يتم ضبط
preloadتلقائيًا علىnone.
بما أنّ السلوكيات التلقائية للمتصفّح في ما يتعلق بـ preload ليست ثابتة،
من الأفضل أن تكون صريحًا مع جمهورك. في هذه الحالات التي يبدأ فيها المستخدم
عملية التشغيل، يشكّل استخدام preload="none" أسهل طريقة لتأجيل تحميل الفيديو على جميع الأنظمة الأساسية. إنّ السمة preload ليست الطريقة الوحيدة لتأجيل تحميل محتوى الفيديو. قد تقدّم لك ميزة التشغيل السريع باستخدام التحميل المسبق للفيديو بعض الأفكار والإحصاءات حول كيفية تشغيل الفيديو في JavaScript.
لسوء الحظ، لا تكون هذه الميزة مفيدة عندما تريد استخدام فيديو بدلاً من ملفات GIF المتحركة، والتي سنتناولها تاليًا.
للفيديوهات التي يتم استخدامها كبديل لصور GIF متحرّكة
على الرغم من استخدام ملفات GIF المتحركة على نطاق واسع، إلا أنها تكون أقل من نظيراتها في الفيديو في عدد من الطرق، لا سيما في حجم الملف. يمكن أن تمتد صور GIF المتحركة إلى نطاق عدة ميغابايت من البيانات. تكون مقاطع الفيديو ذات الجودة المرئية المشابهة أصغر بكثير.
إنّ استخدام العنصر <video> كبديل لملف GIF متحرّك ليس مباشرةً مثل العنصر <img>. هناك ثلاث خصائص لملفات GIF المتحركة وهي:
- يتم تشغيلها تلقائيًا عند تحميلها.
- ويتم تكرارها بشكل متكرر (على الرغم من أن هذا ليس هو الحال دائمًا).
- لا يتوفر لها مقطع صوتي.
يبدو تحقيق هذا باستخدام العنصر <video> على النحو التالي:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
السمات autoplay وmuted وloop واضحة.
playsinline ضروري لتفعيل التشغيل التلقائي على نظام التشغيل iOS. لديك الآن بديل يصلح لتصوير فيديو بتنسيق GIF يعمل على مختلف الأنظمة الأساسية. ولكن كيف يمكن تنفيذ
التحميل الكسول؟ للبدء، عدِّل ترميز <video> وفقًا لذلك:
<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source data-src="one-does-not-simply.webm" type="video/webm">
<source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>
ستلاحظ إضافة السمة poster،
التي تتيح لك تحديد عنصر نائب لشغل مساحة العنصر <video>
إلى أن يتم تحميل الفيديو باستخدام "التحميل الكسول". كما هي الحال في أمثلة <img> التحميل الكسول،
يمكنك تخزين عنوان URL للفيديو في السمة data-src على كل عنصر
<source>. وفي هذه الصفحة، استخدِم رمز JavaScript مشابهًا لأمثلة التحميل الكسول للصور المستنِدة إلى
Intersection Monitorer (تحميل كسول) للصور:
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
عند التحميل الكسول لعنصر <video>، عليك تكرار كل عناصر <source> الثانوية وتغيير سمات data-src الخاصة بها إلى سمات src. بعد إجراء ذلك، يجب تشغيل تحميل الفيديو من خلال استدعاء طريقة load للعنصر، وبعدها سيبدأ تشغيل الوسائط تلقائيًا وفقًا للسمة autoplay.
باستخدام هذه الطريقة، يمكنك استخدام حل للفيديوهات يحاكي سلوك ملفات GIF المتحركة، ولكنه لا يتحمّل استخدام البيانات المكثّفة نفسه مثل ملفات GIF المتحركة، ويمكنك تحميل هذا المحتوى باستخدام \"التحميل الكسول\".
مكتبات طريقة التحميل الكسول
يمكن أن تساعدك المكتبات التالية على استخدام طريقة التحميل الكسول للفيديو:
- vanilla-lazyload وlozad.js هما خياران خفيفان للغاية يستخدمان Intersection Monitorer فقط. وعلى هذا النحو، فهي ذات أداء عالٍ، ولكن يجب تعويضها قبل أن تتمكن من استخدامها على المتصفحات القديمة.
- yall.js عبارة عن مكتبة تستخدم
Intersection Monitorer وتعود إلى معالجات الأحداث. ويمكنها أيضًا استخدام سمة "التحميل الكسول" لصور
posterللفيديو باستخدام السمةdata-poster. - إذا كنت بحاجة إلى مكتبة تحميل كسول خاصة بالتفاعل، يمكنك استخدام react-lazyload. ومع أنّ هذا النظام لا يستخدم Intersection Monitorer، فإنّه يوفّر طريقة مألوفة لتحميل الصور باستخدام طريقة \"التحميل الكسول\" للمستخدمين الذين اعتادوا على تطوير التطبيقات باستخدام React.
وتم توثيق كلّ من مكتبات "التحميل الكسول" هذه بشكل جيد، وهي تتضمّن العديد من أنماط الترميز لتنفيذ العديد من مهام التحميل الكسول.