فيديو كسول التحميل

Jeremy Wagner
Rachel Andrew

كما هو الحال مع عناصر الصور، يمكنك أيضًا التحميل الكسول للفيديو. يتم عادةً تحميل الفيديوهات باستخدام العنصر <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، ولكن بدءًا من الإصدار Chrome 64، أصبح الإعداد التلقائي 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 المتحركة:

  1. ويتم تشغيلها تلقائيًا عند تحميلها.
  2. تكرارها بشكل مستمر (على الرغم من أن هذا ليس هو الحال دائمًا)
  3. لا تتضمن مقاطع صوتية.

يمكن تحقيق ذلك باستخدام العنصر <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 Observer:

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 Observer فقط. وبالتالي، فهي ذات أداء عالٍ، ولكن يجب تعبئتها قبل أن تتمكن من استخدامها في المتصفحات القديمة.
  • yall.js هي مكتبة تستخدم "مراقب التقاطع" ويعود إلى معالِجات الأحداث. ويمكنها أيضًا التحميل الكسول لصور الفيديو poster باستخدام السمة data-poster.
  • إذا كنت بحاجة إلى مكتبة ذات تحميل كسول خاص بـ React، يمكنك استخدام react-lazyload. وعلى الرغم من أنّ الأداة لا تستخدم أداة Intersection Observer، فإنّها توفِّر طريقة مألوفة للتحميل الكسول للصور للمستخدمين الذين اعتادوا تطوير التطبيقات باستخدام React.

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