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

هرچند ویدئوها باعث کاهش سرعت سایت می‌شوند اما امروزه استفاده از آنها برای ارائه محتوای بهتر و کاربر پسندتر یک امر ضروری است، با بارگذاری تنبل ویدئو ها در صفحات وب می‌توان افزایش چشمگیری در سرعت سایت به خصوص بارگذاری اولیه صفحات مشاهده کرد. در video lazy loading بارگذاری ویدئوها تا کلیک کاربر بر روی دکمه play به تاخیر می‌افتند.

شما می‌توانید همانند بارگذاری تنبل تصاویر ، ویدئوهای خود نیز را به صورت تنبل بارگذاری کنید. ویدیوها معمولاً با تگ <video> بارگذاری می‌شوند. با این حال، نحوه بارگذاری تنبل <video> بستگی به مورد استفاده آن دارد. با نکست همراه باشید تا چند سناریو را بررسی کنیم که هر کدام به راه حل متفاوتی نیاز دارند.

بارگذاری تنبل ویدئو با جلوگیری از پخش خودکار

اگر می‌خواهید ویدئوهای صفحه به صورت خودکار پخش نشوند می‌توانید از خاصیت preload در عنصر <video> مانند کد زیر استفاده کنید. با این کار ویدئوها تا زمانی که کاربر بر روی دکمه play کلیک نکند بارگذاری نمی‌شوند، در واقع ویدئوها به صورت تنبل بارگذاری می‌شوند.

<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" از پیش‌بارگذاری داده‌های ویدئو توسط مرورگر جلوگیری می‌کند و ویدئو تنها با کلیک کاربر شروع به بارگیری می‌کند این خاصیت می‌تواند در افزایش سرعت بارگذاری اولیه سایت و بهبود معیارهای web vitals بسیار مفید باشد.

خاصیت poster="one-does-not-simply-placeholder.jpg" نیز یک تصویر پوستر به مرورگر معرفی می‌کند تا به‌جای تصویر ویدئو قبل از بارگذاری آن به کاربر نمایش دهد، این کار دو ویژگی مثبت دارد یکی اینکه مکان نگهدار از ایجاد فضای سفید و یا تغییرات ناگهانی چیدمان جلوگیری می‌کند و دوم اینکه اگر شما پوستر را معرفی نکنید مرورگر به صورت خودکار فریم اول ویدئو را انتخاب می‌کند و با این خاصیت شما می‌توانید تصویر و پوستر کاربر پسندتری به جای آن قرار دهید.

مرورگرها و بارگذاری خودکار ویدئوها

دلیل استفاده از خاصیت‌های بالا این است که که مرورگرهای مختلف دارای تنظیمات پیش‌فرض مختلفی در برخورد با بارگذاری ویدئوها دارند برای مثال:

• در مرورگر Chrome خاصیت preload به صورت پیش‌فرضauto است، اما از Chrome 64 به بعد مرورگر از تنظیمات متاداده‌ (metadata) برای تنظیم پیش بارگذاری استفاده می‌کند. فایرفاکس و Edge نیز رفتار مشابهی دارند.
• مرورگر Safari از نسخه 11.2، فقط ابرداده‌های ویدیو را از قبل بارگذاری شده است. در Safari iOS، ویدیوها هرگز از قبل بارگذاری نمی شوند.
• وقتی حالت Data Saver بر روی گوشی و یا دستگاه کاربر فعال باشد، ویدئوها به صورت خودکار بارگذاری نمی‌شوند.

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

جایگزینی Gif ها (تصاویر متحرک) با ویدئو

اگر تصاویر GIF موجود در سایت‌های معروفی مانند Imgur یا Gfycat را با developer options مرورگر خود بررسی کنید خواهید دید که در واقع فرمت آنها mp4 (ویدئو) است. به نظر شما چرا چنین سایت‌هایی از فرمت ویدئو به‌جای GIF استفاده می‌کنند؟ مهم‌ترین دلیل برای جایگزینی تصاویر متحرک GIF با ویدئوها حجم بالای آنهاست.

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

• آنها با بارگذاری صفحه به صورت خودکار پخش می‌شوند.
• به صورت مداوم حلقه می‌زنند.
• فاقد تراک صوتی هستند.

برای استفاده از ویدئو بجای تصاویر متحرک گیف باید هرسه ویژگی بالا را بتوانید پیاده کنید، کد زیر یک نمونه از این تبدیل است:

<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 هرسه ویژگی مورد نیاز برای اینکار است، با کدی مانند کد بالا تقریبا می‌توانید هر فایل gif رو به صورت ویدئو در صفحه نمایش دهید.

اکنون یک جایگزین قابل استفاده برای GIF دارید که در همه پلتفرم ها کار می کند. اما چگونه می توان آن را به صورت lazy loading بارگذاری کرد؟ روش زیر می‌تواند پاسخی برای این سوال باشد:

<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> تا زمانی که ویدیو لود شود مشخص کنید. مانند بارگذاری تنبل تصاویر از تگ <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);
    });
  }
});

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

کتابخانه های Lazy loading برای ویدئو

کتابخانه های زیر می توانند به شما در بارگذاری تنبل ویدیو کمک کنند:

• کتابخانه‌های vanilla-lazyload و lozad.js گزینه های بسیار سبکی هستند که فقط از Intersection Observer استفاده می کنند. به این ترتیب، سرعت بسیار بالایی دارند، اما برای استفاده از آنها در مرورگرهای قدیمی باید از polyfilled استفاده کنید.
• yall.js کتابخانه ای است که از Intersection Observer استفاده می کند و به کنترل کننده رویداد باز می گردد. این ابزار با IE11 و مرورگرهای اصلی سازگار است.
• اگر به یک کتابخانه Lazy-loading خاص React نیاز دارید، می توانید react-lazyload را استفاده کنید. در حالی که از Intersection Observer استفاده نمی کند، روشی آشنا برای بارگذاری تنبل تصاویر برای کسانی که به توسعه برنامه ها با React عادت دارند ارائه می دهد.

هر یک از ابزارهای بالا دارای مستندات کافی برای برنامه نویسی و کار کردن با آنها را دارند.