নেটওয়ার্ক মানের উপর ভিত্তি করে ইমেজ পরিবেশন ভিডিও অভিযোজিত

মিলিকা মিহাজলিজা

এই কোডল্যাবে, আপনি শিখবেন কিভাবে নেটওয়ার্ক মানের উপর ভিত্তি করে আপনার বিষয়বস্তু মানিয়ে নিতে হয়। এই পৃষ্ঠার ব্যাকগ্রাউন্ড ভিডিও শুধুমাত্র তখনই লোড হবে যখন ব্যবহারকারীরা দ্রুত নেটওয়ার্কে থাকবে। ধীরগতির নেটওয়ার্কগুলিতে, পরিবর্তে একটি চিত্র লোড হবে৷

নেটওয়ার্ক তথ্য API আপনাকে ব্যবহারকারীর সংযোগের গুণমান সম্পর্কে তথ্য অ্যাক্সেস করতে সক্ষম করে। কখন একটি ভিডিও পরিবেশন করা হবে এবং কখন একটি চিত্র পরিবেশন করা হবে তা নির্ধারণ করতে আপনি এর effectiveType সম্পত্তি ব্যবহার করবেন৷ effectiveType হতে পারে 'slow-2g' , '2g' , '3g' বা '4g' ।

ব্রাউজার সমর্থন

  • 61
  • 79
  • এক্স
  • এক্স

উৎস

ধাপ 1: সংযোগের ধরন পরীক্ষা করুন

index.html ফাইলটিতে একটি <video> ট্যাগ রয়েছে যা ব্যাকগ্রাউন্ড ভিডিও প্রদর্শন করতে পারে (লাইন 22)। script.js এর কোড ভিডিও ট্যাগের src অ্যাট্রিবিউট সেট করে ভিডিও লোড করে। (ভিডিও লোডিং কোডটি ধাপ 2 এ আরও বিস্তারিতভাবে বর্ণনা করা হয়েছে।)

শর্তসাপেক্ষে ভিডিও লোড করতে, প্রথমে নেটওয়ার্ক তথ্য API উপলব্ধ কিনা তা পরীক্ষা করুন; যদি তা হয়, সংযোগের ধরন পরীক্ষা করুন।

  1. script.js এ, একটি if স্টেটমেন্ট যোগ করুন যা পরীক্ষা করে যে navigator.connection অবজেক্টটি বিদ্যমান কিনা এবং এতে effectiveType বৈশিষ্ট্য আছে কিনা।
  2. নেটওয়ার্কের effectiveType পরীক্ষা করতে একটি if স্টেটমেন্ট যোগ করুন।
if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Only load video on the fastest connections.
  } else {
    // In any other case load the image.
  }
}

বিদ্যমান ভিডিও লোডিং কোডটিকে else একটি বিবৃতিতে মোড়ানো, যাতে সেই ভিডিওটি এখনও এমন ব্রাউজারগুলিতে লোড হবে যা নেটওয়ার্ক তথ্য API সমর্থন করে না৷

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // video loading code
  } else {
    // image loading code
  }
} else {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

ধাপ 2: ভিডিও লোড করুন

effectiveType '4g' হলে, কোডল্যাবের শুরু থেকে ভিডিও লোডিং কোডটি ব্যবহার করুন।

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);
  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  // image loading code
}

ভিডিও লোডিং কোডটি কীভাবে কাজ করে তা এখানে: <video> ট্যাগটি প্রথমে কিছু ডাউনলোড বা প্রদর্শন করে না কারণ এর src বৈশিষ্ট্য সেট করা নেই। লোড করার জন্য ভিডিও URL data-src অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট করা হয়েছে।

<video id="coverVideo" autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>

ডেটা অ্যাট্রিবিউট আপনাকে স্ট্যান্ডার্ড এইচটিএমএল উপাদানগুলিতে অতিরিক্ত তথ্য সঞ্চয় করার অনুমতি দেয়। একটি ডেটা উপাদান যেকোনও নামকরণ করা যেতে পারে, যতক্ষণ না এটি "ডেটা-" দিয়ে শুরু হয়।

প্রকৃতপক্ষে পৃষ্ঠায় ভিডিও প্রদর্শন করতে, আপনাকে data-src থেকে মান পেতে হবে এবং ভিডিও উপাদানের src বৈশিষ্ট্য হিসাবে সেট করতে হবে।

প্রথমে, DOM উপাদানটি পান যাতে সম্পদ রয়েছে:

const video = document.getElementById('coverVideo');

তারপর data-src অ্যাট্রিবিউট থেকে সংস্থান অবস্থান পান:

const videoSource = video.getAttribute('data-src');

এবং অবশেষে ভিডিও উপাদানের src বৈশিষ্ট্য হিসাবে সেট করুন:

video.setAttribute('src', videoSource);

শেষ লাইনটি সিএসএস অবস্থানের যত্ন নেয়:

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

ধাপ 3: ছবি লোড করুন

ধীরগতির নেটওয়ার্কগুলিতে শর্তসাপেক্ষে একটি চিত্র লোড করতে, ভিডিওর মতো একই কৌশল ব্যবহার করুন৷

index.html এ একটি ইমেজ এলিমেন্ট যোগ করুন (ভিডিও এলিমেন্টের ঠিক পরে), এবং src অ্যাট্রিবিউটের পরিবর্তে data-src অ্যাট্রিবিউট ব্যবহার করুন।

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

script.js এ, নেটওয়ার্কের effectiveType উপর নির্ভর করে ছবির src বৈশিষ্ট্য সেট করতে কোড যোগ করুন।

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  const image = document.getElementById('coverImage');
  const imageSource = image.getAttribute('data-src');
  image.setAttribute('src', imageSource);

  image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

চেষ্টা কর

এটি নিজে পরীক্ষা করতে:

  1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন পূর্ণ পর্দা .
  2. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  3. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
  4. থ্রটলিং ড্রপ-ডাউনে ক্লিক করুন, যা ডিফল্টরূপে নো থ্রটলিং সেট করা আছে। দ্রুত 3G নির্বাচন করুন।

দ্রুত 3G থ্রটলিং বিকল্পের সাথে DevTools নেটওয়ার্ক ট্যাব হাইলাইট করা হয়েছে

এখন দ্রুত 3G এখনও সক্ষম করে পৃষ্ঠাটি পুনরায় লোড করুন৷ অ্যাপটি ভিডিওর পরিবর্তে পটভূমিতে একটি ছবি লোড করে:

'নেটওয়ার্ক ইনফরমেশন' টেক্সট ওভারলে সহ ম্যাট্রিক্সের মতো ছবির পটভূমি

অতিরিক্ত ক্রেডিট: পরিবর্তন সাড়া

মনে রাখবেন কিভাবে এই API এর একটি onchange ইভেন্ট লিসেনার আছে? আপনি অনেক কিছুর জন্য এটি ব্যবহার করতে পারেন: গতিশীলভাবে অভিযোজিত বিষয়বস্তু যেমন ভিডিও গুণমান; উচ্চ-ব্যান্ডউইথ নেটওয়ার্কের ধরণে পরিবর্তন শনাক্ত হলে বিলম্বিত ডেটা স্থানান্তর পুনরায় চালু করা; বা নেটওয়ার্কের গুণমান পরিবর্তন হলে ব্যবহারকারীদের অবহিত করা।

এই শ্রোতাকে কীভাবে ব্যবহার করবেন তার একটি সহজ উদাহরণ এখানে। script.js এ যোগ করুন। যখনই নেটওয়ার্ক তথ্য পরিবর্তন হয় তখন এই কোডটি displayNetworkInfo ফাংশনকে কল করবে।

navigator.connection.addEventListener('change', displayNetworkInfo);

index.html পৃষ্ঠায় ইতিমধ্যেই একটি খালি <h2> উপাদান রয়েছে। এখন displayNetworkInfo ফাংশনটি সংজ্ঞায়িত করুন যাতে এটি <h2> উপাদানে নেটওয়ার্ক তথ্য প্রদর্শন করে এবং ফাংশনটি চালু করে।

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

এখানে গ্লিচ অ্যাপের চূড়ান্ত অবস্থা।

'নেটওয়ার্ক ইনফরমেশন 4জি' টেক্সট ওভারলে সহ ম্যাট্রিক্স-এর মতো ভিডিও ব্যাকগ্রাউন্ড

এটি আবার পরীক্ষা করতে:

  1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন পূর্ণ পর্দা .
  2. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  3. নেটওয়ার্ক ট্যাবে ক্লিক করুন।
  4. থ্রটলিং ড্রপ-ডাউনে ক্লিক করুন, যা ডিফল্টরূপে নো থ্রটলিং সেট করা আছে। দ্রুত 3G নির্বাচন করুন।
  5. অ্যাপটি পুনরায় লোড করুন।

অ্যাপটি নেটওয়ার্কের তথ্য 3g- এ আপডেট করবে:

'নেটওয়ার্ক ইনফরমেশন 3জি' টেক্সট ওভারলে সহ ম্যাট্রিক্স-এর মতো ভিডিও ব্যাকগ্রাউন্ড