অডিও এবং ভিডিও

যেমন আপনি ইমেজ মডিউলে শিখেছেন, HTML একটি ওয়েব পেজে মিডিয়া এম্বেড করতে সক্ষম করে। এই বিভাগে, আমরা অডিও এবং ভিডিও ফাইলগুলি দেখি, সেগুলিকে কীভাবে এম্বেড করতে হয়, ব্যবহারকারীর নিয়ন্ত্রণ, আপনার ভিডিওগুলির জন্য একটি স্ট্যাটিক ইমেজ প্লেসহোল্ডার প্রদান এবং অডিও এবং ভিডিও ফাইলগুলিকে অ্যাক্সেসযোগ্য করে তোলা সহ সর্বোত্তম অনুশীলনগুলি সহ।

<audio> এবং <video>

<video> এবং <audio> উপাদানগুলি সরাসরি src বৈশিষ্ট্যের সাথে মিডিয়া প্লেয়ারগুলিকে এম্বেড করতে ব্যবহার করা যেতে পারে বা <source> উপাদানগুলির একটি সিরিজের জন্য কন্টেইনার উপাদান হিসাবে ব্যবহার করা যেতে পারে, প্রতিটি একটি src ফাইলের পরামর্শ প্রদান করে। যদিও <video> একটি অডিও ফাইল এম্বেড করতে ব্যবহার করা যেতে পারে, তবে <audio> উপাদানটি সাউন্ড ফাইল এম্বেড করার জন্য পছন্দনীয়।

খোলার <video> এবং <audio> ট্যাগগুলিতে controls , autoplay , loop , mute , preload এবং গ্লোবাল অ্যাট্রিবিউট সহ আরও বেশ কিছু বৈশিষ্ট্য থাকতে পারে। <video> উপাদানটি height , width এবং poster বৈশিষ্ট্যগুলিকেও সমর্থন করে৷

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

এই <video> উদাহরণে ভিডিও উৎসের সাথে লিঙ্ক করা src বৈশিষ্ট্য সহ একটি একক উৎস রয়েছে। poster অ্যাট্রিবিউট ভিডিও লোড হওয়ার সাথে সাথে প্রদর্শনের জন্য একটি চিত্র প্রদান করে। অবশেষে, controls বৈশিষ্ট্য ব্যবহারকারীর ভিডিও নিয়ন্ত্রণ প্রদান করে।

ফলব্যাক কন্টেন্ট ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে অন্তর্ভুক্ত করা হয়েছে। যদি ব্যবহারকারী এজেন্ট <video> সমর্থন না করে (বা <audio> এই বিষয়বস্তুটি দেখানো হয়। ক্লোজিং </video> > ট্যাগটি প্রয়োজন, এমনকি যদি উভয়ের মধ্যে কোনো বিষয়বস্তু না থাকে (তবে সবসময় ফলব্যাক সামগ্রী থাকতে হবে, ডান ?)

যদি খোলার <video> বা <audio> ট্যাগে কোনও src অ্যাট্রিবিউট অন্তর্ভুক্ত না থাকে, তাহলে এক বা একাধিক <source> উপাদান অন্তর্ভুক্ত করুন, প্রতিটি মিডিয়া ফাইলে একটি src বৈশিষ্ট্য সহ। নিচের উদাহরণে তিনটি মিডিয়া ফাইল অপশন, ফলব্যাক কন্টেন্ট এবং ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে ইংরেজি ও ফ্রেঞ্চ সাবটাইটেল অন্তর্ভুক্ত রয়েছে।

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

প্রতিটি <source> সন্তানের মধ্যে একটি src বৈশিষ্ট্য রয়েছে যা সম্পদের দিকে নির্দেশ করে এবং type অ্যাট্রিবিউট ব্রাউজারকে লিঙ্ক করা ফাইলের মিডিয়া টাইপ সম্পর্কে অবহিত করে। এটি ব্রাউজারকে মিডিয়া ফাইল আনতে বাধা দেয় যা এটি ডিকোড করতে সক্ষম হবে না।

type অ্যাট্রিবিউটের মধ্যে, আপনি একটি codecs প্যারামিটার অন্তর্ভুক্ত করতে পারেন, যা ঠিক কীভাবে রিসোর্স এনকোড করা হয় তা নির্দিষ্ট করে। কোডেকগুলি আপনাকে মিডিয়া অপ্টিমাইজেশন অন্তর্ভুক্ত করার একটি উপায় দেয় যা এখনও সমস্ত ব্রাউজারে সমর্থিত নয়। কোডেক মিডিয়া টাইপ থেকে সেমিকোলন দিয়ে আলাদা করা হয়। উদাহরণস্বরূপ, কোডেক স্বজ্ঞাত সিনট্যাক্স ব্যবহার করে লেখা যেতে পারে, যেমন <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> যা নির্দেশ করে যে WebM ফাইলগুলিতে VP8 ভিডিও এবং ভর্বিস রয়েছে শ্রুতি. কোডেকগুলি পাঠোদ্ধার করা আরও কঠিন হতে পারে, যেমন <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> যা নির্দেশ করে যে MP4 এনকোডিং হল অ্যাডভান্সড ভিডিও কোডিং প্রধান প্রোফাইল লেভেল 4.2 . এই সিনট্যাক্স ব্যাখ্যা করা এই পাঠের সুযোগের বাইরে। Jake Archibald-এর একটি পোস্ট আছে যেটি ব্যাখ্যা করে কিভাবে একটি AV1 ভিডিওর জন্য কোডেক প্যারামিটার নির্ধারণ করতে হয় যদি আপনি আরও জানতে চান।

একটি ভিডিও প্রদর্শন করার সময়, ডিফল্টরূপে, ভিডিওর প্রথম ফ্রেমটি স্টিল শট হিসাবে দেখানো হয় যখন এটি উপলব্ধ হয়। এটি এমন কিছু যা নিয়ন্ত্রণ করা যায়। poster অ্যাট্রিবিউট ভিডিওটি ডাউনলোড করার সময় এবং এটি প্লে না হওয়া পর্যন্ত একটি ছবির উৎস দেখাতে সক্ষম করে। যদি ভিডিওটি প্লে হয় এবং পরবর্তীতে বিরতি দেওয়া হয়, পোস্টারটি পুনরায় দেখানো হবে না।

আপনার ভিডিওর আকৃতির অনুপাত নির্ধারণ করতে ভুলবেন না, কারণ যখন ভিডিও লোড হয়, তখন পোস্টার এবং ভিডিওর মধ্যে একটি আকারের পার্থক্য একটি রিফ্লো এবং পুনরায় রং করতে পারে৷

সর্বদা বুলিয়ান controls অ্যাট্রিবিউট অন্তর্ভুক্ত করুন। এটি ব্যবহারকারীদের নিয়ন্ত্রণগুলি দৃশ্যমান করে তোলে, ব্যবহারকারীদের অডিও স্তর নিয়ন্ত্রণ করার ক্ষমতা প্রদান করে, অডিওটিকে সম্পূর্ণরূপে নিঃশব্দ করে এবং ভিডিওটিকে পূর্ণস্ক্রীনে প্রসারিত করে৷ controls বাদ দেওয়া একটি খারাপ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে, বিশেষ করে যদি বুলিয়ান autoplay অ্যাট্রিবিউট অন্তর্ভুক্ত থাকে। মনে রাখবেন যে কিছু ব্রাউজার autoplay অ্যাট্রিবিউট নির্দেশে মনোযোগ দেবে না যদি বুলিয়ান muted অ্যাট্রিবিউটটি বাদ দেওয়া হয় কারণ একটি মিডিয়া ফাইল অটোপ্লে করা সাধারণত একটি খারাপ ব্যবহারকারীর অভিজ্ঞতা, এমনকি নিঃশব্দ এবং দৃশ্যমান নিয়ন্ত্রণের সাথেও।

ট্র্যাক

অডিও এবং ভিডিও উভয়ের খোলার এবং প্রয়োজনীয় ক্লোজিং ট্যাগের মধ্যে, সময়ের পাঠ্য ট্র্যাক নির্দিষ্ট করতে এক বা একাধিক <track> উপাদান অন্তর্ভুক্ত করুন। নিম্নলিখিত উদাহরণে দুটি <track> ফাইল রয়েছে, ইংরেজি এবং ফরাসি উভয় ভাষায় সময়মতো পাঠ্য সাবটাইটেল প্রদান করে।

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

src অ্যাট্রিবিউটে নির্দিষ্ট করা ট্র্যাক ফাইলগুলি WebVTT ফর্ম্যাটে (.vtt) হওয়া উচিত৷ ফাইলগুলি HTML ডকুমেন্টের মতো একই ডোমেনে থাকা উচিত, যদি না crossorigin অ্যাট্রিবিউট অন্তর্ভুক্ত থাকে৷

ট্র্যাক kind অ্যাট্রিবিউটের জন্য পাঁচটি গণনা করা মান রয়েছে: subtitles , captions , descriptions , chapters এবং অন্যান্য metadata ।

ডায়ালগ ট্রান্সক্রিপশন এবং অনুবাদের জন্য srclang বৈশিষ্ট্য সহ subtitles অন্তর্ভুক্ত করুন। প্রতিটি label বৈশিষ্ট্যের মান ব্যবহারকারীর কাছে একটি বিকল্প হিসাবে প্রদর্শিত হয়। নির্বাচিত VTT বিকল্পের বিষয়বস্তু ভিডিওতে প্রদর্শিত হয়। সাবটাইটেলগুলির উপস্থিতি ::cue/ ::cue() টার্গেট করে স্টাইল করা যেতে পারে।

মান kind="caption" শব্দের প্রভাব এবং অন্যান্য প্রাসঙ্গিক অডিও তথ্য অন্তর্ভুক্ত ট্রান্সক্রিপশন এবং অনুবাদের জন্য সংরক্ষিত করা উচিত। এটি শুধু বধির দর্শকদের জন্য নয়। হয়তো একজন ব্যবহারকারী তাদের হেডফোন খুঁজে পাচ্ছেন না তাই তারা ক্যাপশন চালু করেছে। অথবা সম্ভবত তারা একটি প্রিয় পডকাস্ট থেকে শেষ কয়েকটি কথা বলার পয়েন্টগুলি পুরোপুরি ধরতে পারেনি, তাই তারা তাদের বোঝার বিষয়টি নিশ্চিত করতে প্রতিলিপিটি পড়তে চায়। অডিও এবং ভিডিও সামগ্রী অ্যাক্সেস করার বিকল্প উপায় থাকা গুরুত্বপূর্ণ এবং সুবিধাজনক।

kind="description" হল ভিডিওটির ভিজ্যুয়াল বিষয়বস্তুর পাঠ্য বিবরণের জন্য যারা ভিডিওটি দেখতে পাচ্ছেন না, তারা Google Home বা Alexa-এর মতো স্ক্রিন ছাড়া সিস্টেম ব্যবহার করছেন বা অন্ধ।

WebVTT ফর্ম্যাট ব্যবহার করে ক্যাপশন এবং সাবটাইটেল প্রদান করা শ্রবণশক্তিহীন ব্যক্তিদের কাছে ভিডিওটিকে অ্যাক্সেসযোগ্য করে তোলে। মনে রাখবেন, অক্ষমতা হল একজন ব্যক্তি এবং তার বর্তমান পরিবেশের মধ্যে অমিল। প্রতিবন্ধী শ্রবণশক্তি ব্যবহারকারীর উচ্চস্বরে পরিবেশে থাকার কারণে, ত্রুটিপূর্ণ স্পীকার বা ভাঙ্গা হেডফোন থাকার কারণে বা ব্যবহারকারীর কিছু শ্রবণশক্তি হ্রাস বা বধির হওয়ার কারণে হতে পারে। আপনার বিষয়বস্তু অ্যাক্সেসযোগ্য তা নিশ্চিত করা আপনার ধারণার চেয়ে অনেক বেশি লোককে সাহায্য করে; এটা সবাইকে সাহায্য করে।

পটভূমি ভিডিও বিবেচনা

আপনার মার্কেটিং বা ডিজাইন টিম আপনার সাইটে একটি পটভূমি ভিডিও অন্তর্ভুক্ত করতে চাইতে পারে। সাধারণত, এর মানে হল যে তারা একটি নিঃশব্দ, স্বয়ংক্রিয়-প্লেয়িং, কোনো নিয়ন্ত্রণ ছাড়াই লুপিং ভিডিও চায়৷ এইচটিএমএল দেখতে এরকম কিছু হতে পারে:

<video autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

পটভূমি ভিডিও অ্যাক্সেসযোগ্য নয়. ব্যবহারকারীদের প্লেব্যাকের উপর সম্পূর্ণ নিয়ন্ত্রণ এবং সমস্ত ক্যাপশনে অ্যাক্সেস না দিয়ে ব্যাকগ্রাউন্ড ভিডিওর মাধ্যমে বিষয়বস্তু জানানো উচিত নয়। যেহেতু এই ভিডিওটি সম্পূর্ণরূপে আলংকারিক, এটিতে ARIA ভূমিকা none এবং কোনো ফলব্যাক বিষয়বস্তু বাদ দেওয়া হয়নি৷ সর্বদা নিঃশব্দ ভিডিওগুলির কর্মক্ষমতা উন্নত করতে, আপনার মিডিয়া উত্স থেকে অডিও ট্র্যাকটি সরান ৷

যদি আপনার ভিডিও পাঁচ সেকেন্ড বা তার কম সময়ের জন্য চলে, অ্যাক্সেসিবিলিটি নির্দেশিকাগুলির জন্য একটি বিরতি প্রক্রিয়ার প্রয়োজন হয় না, তবে বুলিয়ান loop অ্যাট্রিবিউট সহ যেকোনো কিছু ডিফল্টরূপে চিরতরে লুপ হয়ে যাবে, এই পাঁচ-সেকেন্ড বা অন্য কোনো সময়সীমা অতিক্রম করে৷ ভাল ব্যবহারকারীর অভিজ্ঞতার জন্য, সর্বদা ভিডিও পজ করার একটি পদ্ধতি অন্তর্ভুক্ত করুন৷ controls অন্তর্ভুক্ত করে এটি সবচেয়ে সহজে করা হয়।

কাস্টম মিডিয়া নিয়ন্ত্রণ

ব্রাউজারের অন্তর্নির্মিত নিয়ন্ত্রণের পরিবর্তে কাস্টম ভিডিও বা অডিও নিয়ন্ত্রণ প্রদর্শন করতে, controls বৈশিষ্ট্য অন্তর্ভুক্ত করুন। তারপর কাস্টম মিডিয়া কন্ট্রোল যোগ করতে এবং কন্ট্রোল অ্যাট্রিবিউট সরাতে JavaScript ব্যবহার করুন। উদাহরণস্বরূপ, আপনি একটি <button> যোগ করতে পারেন যা একটি অডিও ফাইলের প্লে অবস্থা টগল করে।

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

এই উদাহরণে dataset অ্যাট্রিবিউট সহ একটি বোতাম রয়েছে যাতে পাঠ্য থাকে যা দর্শকদের প্লে এবং পজ স্টেটের মধ্যে টগল করার সাথে সাথে আপডেট করা হবে। aria-controls অ্যাট্রিবিউটটি বোতাম দ্বারা নিয়ন্ত্রিত উপাদানের id সাথে অন্তর্ভুক্ত করা হয়; এই ক্ষেত্রে, অডিও. অডিও নিয়ন্ত্রণকারী প্রতিটি বোতামের একটি ইভেন্ট হ্যান্ডলার রয়েছে।

কাস্টমাইজড কন্ট্রোল তৈরি করতে, HTMLMediaElement.play() এবং HTMLMediaElement.pause() ব্যবহার করুন। প্লে স্টেট টগল করার সময়, বোতামের টেক্সটও টগল করুন:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

controls বৈশিষ্ট্য অন্তর্ভুক্ত করে, ব্যবহারকারীর কাছে অডিও (বা ভিডিও) নিয়ন্ত্রণ করার একটি উপায় আছে এমনকি যদি জাভাস্ক্রিপ্ট ব্যর্থ হয়। একটি প্রতিস্থাপন বোতাম তাত্ক্ষণিক হয়ে গেলেই শুধুমাত্র নিয়ন্ত্রণ বৈশিষ্ট্যটি সরান।

document.querySelector('[aria-controls]').removeAttribute('controls');

ব্যবহারকারীরা নিয়ন্ত্রণগুলি অ্যাক্সেস করতে না পারলে সর্বদা বাহ্যিক নিয়ন্ত্রণগুলি অন্তর্ভুক্ত করুন, যেমন পটভূমি ভিডিওগুলির সাথে যেগুলির নিয়ন্ত্রণগুলি সাইটের সামগ্রীর পিছনে লুকানো থাকে৷ শ্রবণশক্তি হারানো এবং দৃষ্টি প্রতিবন্ধী লক্ষ লক্ষ লোক সহ বিভিন্ন পরিবেশগত এবং সংবেদনশীল চাহিদা সহ ব্যবহারকারীদের মিটমাট করার জন্য মিডিয়া অ্যাক্সেসিবিলিটি প্রয়োজনীয়তার মূল বিষয়গুলি বোঝা গুরুত্বপূর্ণ৷ আমরা এইমাত্র HTMLMediaElement এ স্পর্শ করেছি যা HTMLVideoElement এবং HTMLAudioElement উভয়ের দ্বারা উত্তরাধিকারসূত্রে প্রাপ্ত বেশ কিছু বৈশিষ্ট্য, পদ্ধতি এবং ইভেন্ট প্রদান করে, HTMLMediaElement এর নিজস্ব কিছু বৈশিষ্ট্য, পদ্ধতি এবং ইভেন্ট যোগ করে। একটি TextTrack API সহ আরও কয়েকটি মিডিয়া API রয়েছে। আপনি একটি ব্যবহারকারীর মাইক্রোফোন থেকে অডিও রেকর্ড করতে বা ব্যবহারকারীর স্ক্রীন রেকর্ড করতে মিডিয়া ক্যাপচার এবং স্ট্রিম এবং মিডিয়াডিভাইস API ব্যবহার করতে পারেন৷ ওয়েব অডিও এপিআই লাইভ এবং প্রাক-রেকর্ড করা অডিও এবং স্ট্রিমিং, সংরক্ষণ বা অডিও <audio> এলিমেন্টে প্রেরণ করতে সক্ষম করে।

আপনার উপলব্ধি পরীক্ষা করুন

অডিও এবং ভিডিও আপনার জ্ঞান পরীক্ষা করুন.