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

تاریخ انتشار: 16 آگوست 2019

همانند عناصر تصویر ، ممکن است بخواهید ویدیو را با تنبلی بارگذاری کنید. ویدیوها معمولاً با عنصر <video> بارگیری می‌شوند، اگرچه برای ویدیوهایی که در سرویس‌های دیگر مانند YouTube میزبانی می‌شوند، ممکن است از <iframe> استفاده کنند (در این صورت مقاله را در iframes با بارگذاری تنبل بررسی کنید).

نحوه بارگذاری تنبل <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> یک مکان نگهدار می دهد که در حین بارگذاری ویدیو فضا را اشغال می کند.

در اکثر مرورگرها، پیش‌فرض‌های metadata را preload و بخشی از ویدیو با استفاده از سربرگ 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>

این نه تنها تاخیر زمانی که کاربر برای پخش ویدیو می رود را کاهش می دهد، بلکه مدت زمان ویدیو را به محض اینکه آنها را پخش می کند نشان می دهد.

ویدیوها می توانند به عنوان کاندیدای LCP واجد شرایط باشند. یک تصویر 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> ساده نیست. گیف های متحرک سه ویژگی دارند:

  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 عادت دارند ارائه می دهد.

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