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

عادةً ما يتم تحميل مقاطع الفيديو باستخدام علامة الفيديو (على الرغم من ظهور طريقة بديلة باستخدام img ، إلا أن إمكاناتها محدودة). تعتمد طريقة تنفيذ التحميل البطيء للفيديو على حالة الاستخدام. دعونا نناقش عدة سيناريوهات ، كل منها يتطلب حلاً مختلفًا.

لمقاطع الفيديو بدون التشغيل التلقائي

لمقاطع الفيديو التي يبدأها المستخدم (أي مقاطع الفيديو التي لا يتم تشغيلها تلقائيًا) ، تحتاج إلى تحديد السمة المناسبة في علامة الفيديو :

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

في المثال أعلاه يستخدم السمة التحميل المسبق بقيمة لا شيء ، مما يمنع المتصفحات من تنزيل أي بيانات فيديو. تعيّن سمة الملصق صورة معاينة للفيديو ، والتي ستحل محل الفيديو على الصفحة حتى يتم تحميله. ترجع الحاجة إلى المعاينة إلى حقيقة أن تحميل الفيديو يختلف باختلاف المتصفحات:

• في Chrome ، كانت القيمة الافتراضية لسمة التحميل المسبق تلقائية ، ولكن منذ الإصدار 64 ، القيمة الافتراضية هي البيانات الوصفية . ومع ذلك ، في إصدار سطح المكتب من Chrome ، يمكن تحميل جزء من الفيديو مسبقًا باستخدام رأس Content-Range. تتصرف Firefox و Edge و Internet Explorer 11 بشكل مشابه.
• Chrome, Safari 11.0 . 11.2, , Safari iOS .
• , preload none.

نظرًا لأن السلوك الافتراضي يختلف من متصفح لآخر فيما يتعلق بالتحميل التلقائي ، فمن الأفضل تعيين هذا السلوك بشكل صريح. في الحالات التي يبدأ فيها المستخدم التشغيل من تلقاء نفسه ، فإن استخدام التحميل المسبق = "لا شيء" هو أسهل طريقة لتأخير تحميل الفيديو على جميع الأنظمة الأساسية. لا تعد سمة التحميل المسبق هي الطريقة الوحيدة لتأخير تحميل محتوى الفيديو. يمكن أن يمنحك التشغيل السريع باستخدام التحميل المسبق للفيديو بعض الأفكار والرؤى حول العمل مع تشغيل الفيديو في JavaScript.



لسوء الحظ ، هذا غير مجدي إذا كنت تريد استخدام مقاطع الفيديو بدلاً من صور GIF ، سنتحدث عن ذلك أدناه.

لمقطع فيديو يعمل كبديل متحرك لـ GIF

على الرغم من استخدام صور GIF المتحركة على نطاق واسع ، إلا أنها لا ترقى إلى معادلات الفيديو من نواح كثيرة ، خاصة في حجم الملف. يمكن أن تستهلك ملفات GIF المتحركة عدة ميغا بايت من البيانات. عادةً ما تكون مقاطع الفيديو ذات الجودة المرئية المماثلة أصغر بكثير. ليس من السهل



استخدام عنصر الفيديو كبديل لصورة GIF المتحركة. صور GIF المتحركة لها ثلاث خصائص:

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

يبدو تحقيق ذلك باستخدام علامة الفيديو شيئًا كالتالي:

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

و التشغيل التلقائي ، صامتة، و حلقة سمات لا تحتاج إلى تفسير. playinline مطلوب للتشغيل التلقائي على iOS . لديك الآن بديل صالح للرسوم المتحركة للفيديو. ولكن كيف تضيف التحميل البطيء إلى مقاطع الفيديو؟ لا يواجه Chrome مشكلة في تحميل الفيديو البطيء ، ولكن لا يمكنك الاعتماد على جميع المتصفحات لتوفير هذا السلوك المحسن. اعتمادًا على جمهورك ومتطلبات التطبيق ، قد تحتاج إلى أخذ الأمور بين يديك. أولاً ، دعنا نغير اتصال الفيديو:

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

قد تلاحظ إضافة سمة الملصق التي تسمح لك بتحديد صورة معاينة موجودة على الصفحة بدلاً من علامة الفيديو حتى يتم تحميل الفيديو كسول. يتم وضع عنوان URL للفيديو في سمة data-src لكل عنصر مصدر .



نستخدم JavaScript لتنظيم التحميل "البطيء" باستخدام IntersectionObserver.

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

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



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

مكتبات التحميل الكسول

يمكن أن تساعدك المكتبات التالية في التحميل البطيء لمقاطع الفيديو:

• lozad.js هو إصدار خفيف الوزن للغاية يستخدم فقط Intersection Observer. على هذا النحو ، فهو فعال للغاية ، ولكن يجب أن يتم تعبئته قبل أن تتمكن من استخدامه في المتصفحات القديمة.
• yall.js هي مكتبة تستخدم Intersection Observer وتقوم بالوصول إلى معالجات الأحداث. وهو متوافق مع IE11 والمتصفحات الرئيسية.
• إذا كنت بحاجة إلى مكتبة lazyload لـ React ، فيمكنك التفكير في رد الفعل البطيء . لا تستخدم هذه المكتبة Intersection Observer ، ولكنها توفر طريقة لتحميل الصور البطيئة التي سيكون مطورو React على دراية بها.

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