تنبلی بارگذاری ویدیو

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 است. حتی در این صورت، در نسخه دسکتاپ کروم، ممکن است بخشی از ویدیو با استفاده از هدر Content-Range از قبل بارگذاری شود. سایر مرورگرهای مبتنی بر Chromium و فایرفاکس رفتار مشابهی دارند.
• همانند کروم روی دسک‌تاپ، نسخه‌های 11.0 دسکتاپ سافاری محدوده‌ای از ویدیو را از قبل بارگذاری می‌کنند. از نسخه 11.2، فقط ابرداده ویدیو از قبل بارگذاری شده است. در Safari در iOS، ویدیوها هرگز از قبل بارگذاری نمی شوند .
• وقتی حالت صرفه جویی داده فعال است، preload روی none پیش‌فرض است.

از آنجایی که رفتارهای پیش‌فرض مرورگر در رابطه با preload مشخص نیست، صریح بودن احتمالاً بهترین گزینه است. در این موارد که کاربر پخش را آغاز می کند، استفاده از preload="none" ساده ترین راه برای به تعویق انداختن بارگذاری ویدیو در همه سیستم عامل ها است. ویژگی preload تنها راه برای به تعویق انداختن بارگیری محتوای ویدیویی نیست. پخش سریع با پیش بارگذاری ویدیو ممکن است ایده ها و بینش هایی را برای کار با پخش ویدیو در جاوا اسکریپت به شما بدهد.

متأسفانه، زمانی که بخواهید از ویدیو به جای GIF های متحرک استفاده کنید، مفید نیست، که در ادامه به آن پرداخته می شود.

برای ویدیو که به عنوان جایگزین GIF متحرک عمل می کند

در حالی که GIF های متحرک از استفاده گسترده ای برخوردار هستند، از جهات مختلف، به ویژه در اندازه فایل، کمتر از معادل های ویدئویی هستند. GIF های متحرک می توانند تا محدوده چندین مگابایت داده گسترش یابند. ویدئوهایی با کیفیت بصری مشابه بسیار کوچکتر هستند.

استفاده از عنصر <video> به عنوان جایگزینی برای GIF متحرک به اندازه عنصر <img> ساده نیست. گیف های متحرک سه ویژگی دارند:

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> ذخیره کنید. از آنجا، از کد جاوا اسکریپت مشابه نمونه های بارگذاری تنبل تصویر مبتنی بر 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 بارگیری کند.
• اگر به یک کتابخانه Lazy loading مخصوص React نیاز دارید، می توانید react-lazyload را در نظر بگیرید. در حالی که از Intersection Observer استفاده نمی کند، روشی آشنا برای بارگذاری تنبل تصاویر برای کسانی که به توسعه برنامه ها با React عادت دارند ارائه می دهد.

هر یک از این کتابخانه‌های بارگذاری تنبل به خوبی مستند شده است، با الگوهای نشانه‌گذاری فراوانی برای تلاش‌های مختلف بارگیری تنبل شما.