You are currently viewing بارگذاری تنبل ویدیو (ویدئو) برای افزایش سرعت بارگذاری صفحات وب

بارگذاری تنبل ویدیو (ویدئو) برای افزایش سرعت بارگذاری صفحات وب


اگرچه ویدیوها سرعت سایت را کاهش می دهند، اما امروزه استفاده از آنها برای ارائه محتوای بهتر و کاربرپسندتر ضروری است. تنبلی بارگذاری ویدیوها در صفحات وب، می توانید افزایش قابل توجهی را مشاهده کنید سرعت سایت به خصوص بارگذاری اولیه صفحات مشاهده شده. در ویدیو در حال بارگذاری آهسته بارگیری ویدیوها تا زمانی که کاربر روی دکمه پخش کلیک کند به تأخیر می افتد.

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

آنچه در این مقاله می خوانیم

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

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

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src=" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

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

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

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

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

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

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

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

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

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

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

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

<video autoplay muted loop playsinline>
  <source src=" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

مشخصه autoplay، mutedو loop هر سه عملکرد برای این کار مورد نیاز هستند، با کدهایی مانند کد بالا می توانید تقریباً هر فایل گیف را به عنوان یک ویدیو روی صفحه نمایش دهید.

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

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src=" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

ویژگی poster به شما امکان می دهد ظرفی را برای اشغال فضای عنصر مشخص کنید

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

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

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

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

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