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

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 مشابه أمثلة على التحميل الكسول للصور المستنِدة إلى "مراقب التقاطع":

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

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