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

Jeremy Wagner

Barry Pollard

تاريخ النشر: 16 آب (أغسطس) 2019

كما هو الحال مع عناصر الصور، قد تحتاج أيضًا إلى تحميل الفيديو بشكل بطيء. يتم عادةً تحميل الفيديوهات باستخدام عنصر <video>، ولكن قد يتم استخدام علامات <iframe> للفيديوهات المستضافة على خدمات أخرى مثل YouTube (في هذه الحالة، يُرجى الاطّلاع على المقالة حول تحميل إطارات iframe بشكل بطيء).

تعتمد طريقة التحميل البطيء <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> عنصرًا نائبًا سيشغل المساحة أثناء تحميل الفيديو.

في معظم المتصفّحات، يكون الخيار التلقائي لـ preload هو metadata ويتم تحميل جزء من الفيديو مسبقًا باستخدام العنوان Content-Range. ويمكن أن يؤدي ذلك إلى تنزيل بيانات أكثر من المطلوب، خاصةً إذا كان المتصفّح لا يتوافق مع رأس Content-Range. وحتى في حال توفّر هذه الميزة، لا يمكن للمتصفّحات معرفة عدد البايتات التي يتم تخزين البيانات الوصفية فيها، وقد لا يتم تخزينها في بداية الملف. لذلك، إنّ أفضل فرصة لتجنّب تحميل الفيديو هي تحديد none واستخدام preload="none".

يمكن تحسين هذا الإجراء بشكل أكبر لتحميل البيانات الوصفية مسبقًا عندما يمرّر المستخدم مؤشر الماوس فوق الفيديو باستخدام سمة onmouseenter (أو باستخدام معالِج الحدث mouseenter المكافئ):

<video controls
  preload="none"
  poster="one-does-not-simply-placeholder.jpg"
  onmouseenter="event.target.setAttribute('preload','metadata')">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

لا يقتصر تأثير ذلك على تقليل وقت الانتظار عندما يحاول المستخدم تشغيل الفيديو، بل يعرض أيضًا مدة الفيديو فور النقر عليه.

أن تكون الفيديوهات مؤهّلة كفيديوهات مؤهّلة للعرض في "المحتوى القابل للقراءة من الأجهزة الجوّالة" سيكون تحميل صورة poster أسرع من تحميل الفيديو، لذا إذا كان هذا المقياس مرشحًا لقياس LCP، يجب استخدام صورة ملصق، ولكن يجب أيضًا تحميلها مسبقًا باستخدام قيمة السمة fetchpriority التي تساوي "high":

<link rel="preload" href="one-does-not-simply-placeholder.jpg" as="image" fetchpriority="high">
<video controls preload="none"
  poster="one-does-not-simply-placeholder.jpg"
  onmouseenter="event.target.setAttribute('preload','metadata')">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

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

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