অলস লোডিং ভিডিও

প্রকাশিত: আগস্ট 16, 2019

ছবির উপাদানগুলির মতো, আপনিও অলস-লোড ভিডিও করতে চাইতে পারেন৷ ভিডিওগুলি সাধারণত <video> উপাদান দিয়ে লোড করা হয়, যদিও YouTube এর মতো অন্যান্য পরিষেবাগুলিতে হোস্ট করা ভিডিওগুলির জন্য তারা <iframe> s ব্যবহার করতে পারে (যে ক্ষেত্রে অলস-লোডিং iframes এ নিবন্ধটি দেখুন)।

কিভাবে অলস-লোড করা যায় <video> ব্যবহারের ক্ষেত্রে নির্ভর করে, কারণ কয়েকটি ভিন্ন সমাধান রয়েছে।

অটোপ্লে করা ভিডিওগুলি এড়িয়ে চলা সাধারণত সর্বোত্তম অনুশীলন কারণ এটি ব্যবহারকারীর হাতে নিয়ন্ত্রণ ছেড়ে দেয়। এই ক্ষেত্রে <video> এলিমেন্টে preload অ্যাট্রিবিউট উল্লেখ করা হল পুরো ভিডিও লোড করা এড়াতে সর্বোত্তম উপায়:

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

পূর্ববর্তী উদাহরণটি ব্রাউজারগুলিকে কোনো ভিডিও ডেটা প্রিলোড করা থেকে আটকাতে none মান সহ একটি preload বৈশিষ্ট্য ব্যবহার করে। 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>

ব্যবহারকারী যখন ভিডিও চালাতে যায় তখন এটি কেবল দেরিই কমায় না, সাথে সাথে ভিডিওটির সময়কালও দেখায়।

ভিডিওগুলি এলসিপি প্রার্থী হিসাবে যোগ্যতা অর্জন করতে পারে। একটি poster ইমেজ ভিডিওর চেয়ে দ্রুত লোড হবে তাই যেখানে এটি একজন LCP প্রার্থী, সেখানে আপনার একটি পোস্টার ইমেজ ব্যবহার করা উচিত, তবে "high" এর একটি fetchpriority অ্যাট্রিবিউট মান সহ এটি প্রিলোড করা উচিত :

<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-এর প্রতিস্থাপন হিসাবে <video> উপাদান ব্যবহার করা <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 বৈশিষ্ট্যগুলি স্ব-ব্যাখ্যামূলক। iOS-এ অটোপ্লে করার জন্য playsinline আবশ্যক । এখন আপনার কাছে একটি পরিষেবাযোগ্য ভিডিও-এ-জিআইএফ প্রতিস্থাপন রয়েছে যা প্ল্যাটফর্ম জুড়ে কাজ করে। কিন্তু কিভাবে অলস এটা লোড সম্পর্কে যেতে? শুরু করতে, সেই অনুযায়ী আপনার <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> অলস-লোডিং উদাহরণগুলির মতো, প্রতিটি <source> উপাদানের data-src অ্যাট্রিবিউটে ভিডিও ইউআরএল লুকিয়ে রাখুন। সেখান থেকে, ইন্টারসেকশন অবজারভার-ভিত্তিক চিত্র অলস লোডিং উদাহরণের মতো জাভাস্ক্রিপ্ট কোড ব্যবহার করুন:

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 হল সুপার লাইটওয়েট বিকল্প যা শুধুমাত্র ইন্টারসেকশন অবজারভার ব্যবহার করে। যেমন, এগুলি অত্যন্ত পারফরম্যান্স, তবে আপনি পুরানো ব্রাউজারগুলিতে সেগুলি ব্যবহার করার আগে পলিফিল করতে হবে৷
  • yall.js একটি লাইব্রেরি যা ইন্টারসেকশন অবজারভার ব্যবহার করে এবং ইভেন্ট হ্যান্ডলারদের কাছে ফিরে আসে। এটি একটি data-poster অ্যাট্রিবিউট ব্যবহার করে ভিডিও poster ছবি অলস লোড করতে পারে।
  • আপনার যদি একটি রিঅ্যাক্ট-নির্দিষ্ট অলস লোডিং লাইব্রেরির প্রয়োজন হয়, তাহলে আপনি react-lazyload বিবেচনা করতে পারেন। যদিও এটি ইন্টারসেকশন পর্যবেক্ষক ব্যবহার করে না, এটি প্রতিক্রিয়া সহ অ্যাপ্লিকেশন বিকাশে অভ্যস্ত তাদের জন্য অলস লোডিং চিত্রগুলির একটি পরিচিত পদ্ধতি প্রদান করে

আপনার বিভিন্ন অলস লোডিং প্রচেষ্টার জন্য প্রচুর মার্কআপ প্যাটার্ন সহ এই অলস লোডিং লাইব্রেরিগুলির প্রত্যেকটি ভালভাবে নথিভুক্ত।