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

জেরেমি ওয়াগনার
রাচেল অ্যান্ড্রু

ছবির উপাদানগুলির মতো, আপনি অলস-লোড ভিডিওও করতে পারেন৷ ভিডিওগুলি সাধারণত <video> উপাদান দিয়ে লোড করা হয় (যদিও <img> ব্যবহার করে একটি বিকল্প পদ্ধতি সীমিত বাস্তবায়নের সাথে আবির্ভূত হয়েছে)। কিভাবে অলস-লোড <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> উপাদানটিকে একটি স্থানধারক দেয় যা ভিডিও লোড হওয়ার সময় স্থান দখল করবে। এর কারণ হল ভিডিও লোড করার জন্য ডিফল্ট আচরণ ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হতে পারে:

  • ক্রোমে, preload জন্য ডিফল্ট auto হত, কিন্তু Chrome 64 হিসাবে, এটি এখন metadata ডিফল্ট। তা সত্ত্বেও, Chrome-এর ডেস্কটপ সংস্করণে, ভিডিওর একটি অংশ Content-Range শিরোনাম ব্যবহার করে প্রিলোড করা হতে পারে৷ অন্যান্য ক্রোমিয়াম-ভিত্তিক ব্রাউজার এবং ফায়ারফক্স একই রকম আচরণ করে।
  • ডেস্কটপে ক্রোমের মতো, সাফারির 11.0 ডেস্কটপ সংস্করণগুলি ভিডিওর একটি পরিসর প্রিলোড করবে। সংস্করণ 11.2 থেকে, শুধুমাত্র ভিডিও মেটাডেটা প্রিলোড করা হয়। iOS-এ Safari-এ, ভিডিওগুলি কখনই প্রিলোড হয় না ।
  • যখন ডেটা সেভার মোড সক্রিয় থাকে, তখন none preload ডিফল্ট হয় না।

যেহেতু preload সম্পর্কিত ব্রাউজার ডিফল্ট আচরণগুলি পাথরে সেট করা হয় না, স্পষ্ট হওয়া সম্ভবত আপনার সেরা বাজি। এই ক্ষেত্রে যেখানে ব্যবহারকারী প্লেব্যাক শুরু করেন, preload="none" ব্যবহার করা হল সমস্ত প্ল্যাটফর্মে ভিডিও লোড করা স্থগিত করার সবচেয়ে সহজ উপায়৷ preload বৈশিষ্ট্য ভিডিও সামগ্রীর লোডিং স্থগিত করার একমাত্র উপায় নয়৷ ভিডিও প্রিলোড সহ দ্রুত প্লেব্যাক আপনাকে জাভাস্ক্রিপ্টে ভিডিও প্লেব্যাকের সাথে কাজ করার জন্য কিছু ধারণা এবং অন্তর্দৃষ্টি দিতে পারে।

দুর্ভাগ্যবশত, আপনি যখন অ্যানিমেটেড 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 বিবেচনা করতে পারেন। যদিও এটি ইন্টারসেকশন পর্যবেক্ষক ব্যবহার করে না, এটি প্রতিক্রিয়া সহ অ্যাপ্লিকেশন বিকাশে অভ্যস্ত তাদের জন্য অলস লোডিং চিত্রগুলির একটি পরিচিত পদ্ধতি প্রদান করে ।

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