আপনি ওয়েবের জন্য একটি ভিডিও ফাইল যথাযথভাবে প্রস্তুত করেছেন । আপনি এটির সঠিক মাপ ও সঠিক রেজোলিউশন দিয়েছেন। এমনকি আপনি বিভিন্ন ব্রাউজারের জন্য আলাদা WebM এবং MP4 ফাইলও তৈরি করেছেন।
আপনার ভিডিওটি যাতে যে কেউ দেখতে পারে, তার জন্য আপনাকে এটি একটি ওয়েব পেজে যুক্ত করতে হবে। এটি সঠিকভাবে করার জন্য দুটি HTML এলিমেন্ট যোগ করতে হয়: <video> এলিমেন্ট এবং <source> এলিমেন্ট। এই ট্যাগগুলোর প্রাথমিক বিষয়গুলোর পাশাপাশি, একটি ভালো ইউজার এক্সপেরিয়েন্স তৈরি করার জন্য এই আর্টিকেলে সেই ট্যাগগুলোতে কোন অ্যাট্রিবিউটগুলো যোগ করা উচিত, তা ব্যাখ্যা করা হয়েছে।
একটি ফাইল নির্দিষ্ট করুন
যদিও এটি সুপারিশ করা হয় না, আপনি ভিডিও এলিমেন্টটি একাই ব্যবহার করতে পারেন। সর্বদা নিচে দেখানো অনুযায়ী type অ্যাট্রিবিউটটি ব্যবহার করুন। ব্রাউজার প্রদত্ত ভিডিও ফাইলটি চালাতে পারবে কি না তা নির্ধারণ করতে এটি ব্যবহার করে। যদি এটি না পারে, তবে এর ভেতরের লেখাটি প্রদর্শিত হয়।
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
একাধিক ফাইল ফরম্যাট নির্দিষ্ট করুন
মিডিয়া ফাইলের প্রাথমিক ধারণা থেকে মনে করুন যে, সব ব্রাউজার একই ভিডিও ফরম্যাট সমর্থন করে না। <source> এলিমেন্টটি আপনাকে একাধিক ফরম্যাট নির্দিষ্ট করার সুযোগ দেয়, যাতে ব্যবহারকারীর ব্রাউজার সেগুলোর মধ্যে কোনো একটি সমর্থন না করলে একটি বিকল্প ব্যবস্থা হিসেবে কাজ করে।
নীচের উদাহরণটি একটি এমবেডেড ভিডিও তৈরি করে, যা এই নিবন্ধে পরে উদাহরণ হিসেবে ব্যবহৃত হয়েছে।
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
যদিও এটি ঐচ্ছিক, আপনার সর্বদা <source> ট্যাগে একটি type অ্যাট্রিবিউট যোগ করা উচিত। এটি নিশ্চিত করে যে ব্রাউজার কেবল সেই ফাইলটিই ডাউনলোড করবে যা সে চালাতে সক্ষম।
আলাদা এইচটিএমএল বা সার্ভার-সাইড স্ক্রিপ্টিং পরিবেশন করার তুলনায় এই পদ্ধতির বেশ কিছু সুবিধা রয়েছে, বিশেষ করে মোবাইলের ক্ষেত্রে:
- আপনি পছন্দের ক্রম অনুসারে ফরম্যাটগুলো তালিকাভুক্ত করতে পারেন।
- ক্লায়েন্ট-সাইড সুইচিং লেটেন্সি কমিয়ে দেয়; কন্টেন্ট পেতে কেবল একটি অনুরোধ করা হয়।
- ইউজার-এজেন্ট ডিটেকশনসহ সার্ভার-সাইড সাপোর্ট ডেটাবেস ব্যবহারের চেয়ে ব্রাউজারকে ফরম্যাট বেছে নিতে দেওয়া সহজতর, দ্রুততর এবং সম্ভাব্যভাবে অধিক নির্ভরযোগ্য।
- প্রতিটি ফাইল সোর্সের ধরন নির্দিষ্ট করে দিলে নেটওয়ার্কের কর্মক্ষমতা উন্নত হয়; এর ফলে ব্রাউজার ভিডিওর ফরম্যাট যাচাই করার জন্য সেটির অংশবিশেষ ডাউনলোড না করেই একটি ভিডিও সোর্স নির্বাচন করতে পারে।
এই সমস্যাগুলো বিশেষ করে মোবাইল ক্ষেত্রে গুরুত্বপূর্ণ, যেখানে ব্যান্ডউইথ ও ল্যাটেন্সির মূল্য অনেক বেশি এবং ব্যবহারকারীর ধৈর্যও সীমিত থাকার সম্ভাবনা থাকে। একাধিক উৎসের টাইপ অসমর্থিত হলে, type অ্যাট্রিবিউটটি বাদ দিলে পারফরম্যান্সে প্রভাব পড়তে পারে।
এর খুঁটিনাটি জানার কয়েকটি উপায় আছে। ওয়েবে ভিডিও এবং অডিও কীভাবে কাজ করে সে সম্পর্কে আরও জানতে ‘A Digital Media Primer for Geeks’ বইটি দেখুন। এছাড়াও, টাইপ অ্যাট্রিবিউটসহ এবং টাইপ অ্যাট্রিবিউট ছাড়া নেটওয়ার্ক অ্যাক্টিভিটি তুলনা করার জন্য আপনি DevTools-এ রিমোট ডিবাগিং ব্যবহার করতে পারেন।
শুরু এবং শেষের সময় নির্দিষ্ট করুন
ব্যান্ডউইথ বাঁচান এবং আপনার সাইটকে আরও রেসপন্সিভ করে তুলুন: ভিডিও এলিমেন্টে শুরু ও শেষের সময় যোগ করতে মিডিয়া ফ্র্যাগমেন্ট ব্যবহার করুন।
মিডিয়া ফ্র্যাগমেন্ট ব্যবহার করতে, মিডিয়া URL-এর সাথে #t=[start_time][,end_time] যোগ করুন। উদাহরণস্বরূপ, ভিডিওটি ৫ থেকে ১০ সেকেন্ড পর্যন্ত চালাতে, উল্লেখ করুন:
<source src="chrome.webm#t=5,10" type="video/webm">
আপনি <hours>:<minutes>:<seconds> আকারেও সময় নির্দিষ্ট করতে পারেন। উদাহরণস্বরূপ, #t=00:01:05 ভিডিওটি এক মিনিট, পাঁচ সেকেন্ড থেকে শুরু করবে। ভিডিওর শুধু প্রথম মিনিটটি চালাতে, #t=,00:01:00 উল্লেখ করুন।
এই ফিচারটি ব্যবহার করে আপনি একই ভিডিওর একাধিক ভিউ উপভোগ করতে পারেন—যেমনটা ডিভিডিতে কিউ পয়েন্টের ক্ষেত্রে করা হয়—একাধিক ফাইল এনকোড ও পরিবেশন করার ঝামেলা ছাড়াই।
এই ফিচারটি কাজ করার জন্য, আপনার সার্ভারকে অবশ্যই রেঞ্জ রিকোয়েস্ট সাপোর্ট করতে হবে এবং সেই সক্ষমতাটি চালু থাকতে হবে। বেশিরভাগ সার্ভার ডিফল্টভাবে রেঞ্জ রিকোয়েস্ট চালু রাখে। যেহেতু কিছু হোস্টিং সার্ভিস এগুলো বন্ধ করে রাখে, তাই আপনার সাইটে ফ্র্যাগমেন্ট ব্যবহারের জন্য রেঞ্জ রিকোয়েস্ট উপলব্ধ আছে কিনা তা নিশ্চিত করে নেওয়া উচিত।
সৌভাগ্যবশত, আপনি আপনার ব্রাউজারের ডেভেলপার টুলস ব্যবহার করে এটি করতে পারেন। উদাহরণস্বরূপ, ক্রোমে এটি নেটওয়ার্ক প্যানেলে থাকে। Accept-Ranges হেডারটি খুঁজুন এবং যাচাই করুন যে সেখানে bytes লেখা আছে কিনা। ছবিতে, আমি এই হেডারটির চারপাশে একটি লাল বাক্স এঁকে দিয়েছি। যদি আপনি ভ্যালু হিসেবে bytes দেখতে না পান, তাহলে আপনাকে আপনার হোস্টিং প্রোভাইডারের সাথে যোগাযোগ করতে হবে।
একটি পোস্টার ছবি অন্তর্ভুক্ত করুন
video এলিমেন্টে একটি পোস্টার অ্যাট্রিবিউট যোগ করুন, যাতে ভিডিওটি ডাউনলোড বা প্লেব্যাক শুরু না করেই, এলিমেন্টটি লোড হওয়ার সাথে সাথেই দর্শকরা এর বিষয়বস্তু সম্পর্কে ধারণা পেয়ে যান।
<video poster="poster.jpg" ...>
…
</video>
ভিডিওর src ত্রুটিপূর্ণ হলে অথবা সরবরাহকৃত কোনো ভিডিও ফরম্যাটই সমর্থিত না হলে, একটি পোস্টার বিকল্প হিসেবেও কাজ করতে পারে। পোস্টার ইমেজের একমাত্র অসুবিধা হলো একটি অতিরিক্ত ফাইল রিকোয়েস্ট, যা কিছু ব্যান্ডউইথ খরচ করে এবং রেন্ডারিংয়ের প্রয়োজন হয়। আরও তথ্যের জন্য ‘Efficiently encode images’ দেখুন।
ভিডিওগুলো যেন কন্টেইনার উপচে না পড়ে তা নিশ্চিত করুন।
যখন ভিডিও এলিমেন্টগুলো ভিউপোর্টের তুলনায় খুব বড় হয়ে যায়, তখন সেগুলো তাদের কন্টেইনার থেকে উপচে পড়তে পারে, যার ফলে ব্যবহারকারীর পক্ষে বিষয়বস্তু দেখা বা কন্ট্রোলগুলো ব্যবহার করা অসম্ভব হয়ে পড়ে।
আপনি CSS ব্যবহার করে ভিডিওর ডাইমেনশন নিয়ন্ত্রণ করতে পারেন। যদি CSS আপনার সব চাহিদা পূরণ করতে না পারে, তবে FitVids-এর মতো জাভাস্ক্রিপ্ট লাইব্রেরি এবং প্লাগইন সাহায্য করতে পারে, এমনকি ইউটিউব এবং অন্যান্য উৎসের ভিডিওর ক্ষেত্রেও। দুর্ভাগ্যবশত, এই রিসোর্সগুলো আপনার নেটওয়ার্ক পেলোড সাইজ বাড়িয়ে দিতে পারে, যা আপনার আয় এবং ব্যবহারকারীদের ওয়ালেটের ওপর নেতিবাচক প্রভাব ফেলে।
আমি এখানে যে ধরনের সাধারণ ব্যবহারের কথা বলছি, সেগুলোর জন্য ভিউপোর্টের মাপ অনুযায়ী এলিমেন্টের আকার নির্দিষ্ট করতে CSS মিডিয়া কোয়েরি ব্যবহার করুন; max-width: 100% আপনার জন্য সহায়ক হবে।
আইফ্রেমের মধ্যে থাকা মিডিয়া কন্টেন্টের (যেমন ইউটিউব ভিডিও) জন্য, একটি রেসপন্সিভ পদ্ধতি ব্যবহার করে দেখুন (যেমনটি জন সুরডাকোস্কি প্রস্তাব করেছেন )।
সিএসএস
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
এইচটিএমএল
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
রেসপন্সিভ স্যাম্পলটির সাথে আনরেসপন্সিভ ভার্সনটির তুলনা করুন। আপনি দেখতেই পাচ্ছেন, আনরেসপন্সিভ ভার্সনটি ব্যবহারকারীর জন্য খুব একটা ভালো অভিজ্ঞতা দেয় না।
ডিভাইসের অভিমুখীকরণ
ডেস্কটপ মনিটর বা ল্যাপটপের ক্ষেত্রে ডিভাইসের ওরিয়েন্টেশন কোনো সমস্যা নয়, কিন্তু মোবাইল ডিভাইস এবং ট্যাবলেটের জন্য ওয়েব পেজ ডিজাইন করার সময় এটি অত্যন্ত গুরুত্বপূর্ণ।
আইফোনের সাফারি পোর্ট্রেট এবং ল্যান্ডস্কেপ ওরিয়েন্টেশনের মধ্যে ভালোভাবে পরিবর্তন করে:
আইপ্যাড এবং অ্যান্ড্রয়েডের ক্রোমে ডিভাইসের ওরিয়েন্টেশন সমস্যা তৈরি করতে পারে। উদাহরণস্বরূপ, কোনো কাস্টমাইজেশন ছাড়া ল্যান্ডস্কেপ ওরিয়েন্টেশনে আইপ্যাডে প্লে হওয়া একটি ভিডিও দেখতে এইরকম হয়:
CSS ব্যবহার করে ভিডিওর width: 100% বা max-width: 100% সেট করলে ডিভাইসের ওরিয়েন্টেশন অনুযায়ী লেআউটের অনেক সমস্যার সমাধান করা যায়।
অটোপ্লে
autoplay অ্যাট্রিবিউটটি নিয়ন্ত্রণ করে যে ব্রাউজার কোনো ভিডিও তাৎক্ষণিকভাবে ডাউনলোড করে প্লে করবে কি না। এটি ঠিক কীভাবে কাজ করে তা প্ল্যাটফর্ম এবং ব্রাউজারের ওপর নির্ভর করে।
ক্রোম: এটি একাধিক বিষয়ের উপর নির্ভর করে, যার মধ্যে রয়েছে ব্যবহারকারী ডেস্কটপে আছেন কিনা এবং মোবাইল ব্যবহারকারী আপনার সাইট বা অ্যাপটি তাদের হোমস্ক্রিনে যুক্ত করেছেন কিনা। বিস্তারিত জানতে, অটোপ্লে-এর সেরা অনুশীলনগুলো দেখুন।
ফায়ারফক্স: সমস্ত ভিডিও এবং শব্দ ব্লক করে, কিন্তু ব্যবহারকারীদের সমস্ত সাইট বা নির্দিষ্ট সাইটের জন্য এই বিধিনিষেধ শিথিল করার ক্ষমতা দেয়। বিস্তারিত জানতে, ফায়ারফক্সে মিডিয়া অটোপ্লে অনুমতি দিন বা ব্লক করুন দেখুন।
সাফারি: ঐতিহাসিকভাবে এর জন্য ব্যবহারকারীর অঙ্গভঙ্গির প্রয়োজন হতো, কিন্তু সাম্প্রতিক সংস্করণগুলিতে এই প্রয়োজনীয়তা শিথিল করা হচ্ছে। বিস্তারিত জানতে, iOS-এর জন্য নতুন <ভিডিও> নীতিমালা দেখুন।
যেসব প্ল্যাটফর্মে অটোপ্লে সম্ভব, সেখানেও এটি চালু করা বুদ্ধিমানের কাজ হবে কিনা তা আপনাকে বিবেচনা করতে হবে:
- ডেটা ব্যবহার ব্যয়বহুল হতে পারে।
- ব্যবহারকারীর চাওয়ার আগেই মিডিয়া চালালে তা ব্যান্ডউইথ ও সিপিইউ-এর ওপর অতিরিক্ত চাপ সৃষ্টি করতে পারে, যার ফলে পেজ রেন্ডার হতে দেরি হয়।
- ব্যবহারকারীরা এমন পরিস্থিতিতে থাকতে পারেন যেখানে ভিডিও বা অডিও চালানো বিরক্তিকর হতে পারে।
প্রিলোড
preload অ্যাট্রিবিউটটি ব্রাউজারকে ইঙ্গিত দেয় যে কী পরিমাণ তথ্য বা কন্টেন্ট আগে থেকে লোড করতে হবে।
| মূল্য | বর্ণনা |
|---|---|
none | ব্যবহারকারী ভিডিওটি নাও দেখতে পারেন, তাই আগে থেকে কিছু লোড করবেন না। |
metadata | মেটাডেটা (সময়কাল, মাত্রা, টেক্সট ট্র্যাক) আগে থেকে লোড করা উচিত, তবে ভিডিও থাকবে ন্যূনতম। |
auto | পুরো ভিডিওটি একবারে ডাউনলোড করা বাঞ্ছনীয় বলে মনে করা হয়। একটি খালি স্ট্রিং একই ফলাফল দেয়। |
preload অ্যাট্রিবিউটের প্রভাব বিভিন্ন প্ল্যাটফর্মে ভিন্ন ভিন্ন হয়। উদাহরণস্বরূপ, ক্রোম ডেস্কটপে ২৫ সেকেন্ডের ভিডিও বাফার করে, কিন্তু iOS বা অ্যান্ড্রয়েডে করে না। এর মানে হলো, মোবাইলে প্লেব্যাক শুরু হতে দেরি হতে পারে, যা ডেস্কটপে হয় না। আরও বিস্তারিত জানতে ‘Fast playback with audio and video preload’ অথবা স্টিভ সাউডার্সের ব্লগ দেখুন।
এখন যেহেতু আপনি আপনার ওয়েব পেজে মিডিয়া যোগ করার পদ্ধতি জেনে গেছেন, তাই এবার মিডিয়া অ্যাক্সেসিবিলিটি সম্পর্কে জানার পালা, যেখানে আপনি শ্রবণ প্রতিবন্ধীদের জন্য আপনার ভিডিওতে ক্যাপশন যোগ করবেন, অথবা যখন অডিও চালানো সম্ভব নয়, তখন তা করবেন।