আপনি ওয়েবের জন্য সঠিকভাবে ভিডিও ফাইল তৈরি করেছেন। আপনি সঠিক ডাইমেনশন ও রেজোলিউশন দিয়েছেন। এমনকি আপনি বিভিন্ন ব্রাউজারের জন্য আলাদা 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 অ্যাট্রিবিউট যোগ করা উচিত, যদিও এটি
ঐচ্ছিক। এটি নিশ্চিত করে যে ব্রাউজার শুধুমাত্র সেই ফাইলটি ডাউনলোড করে যা এটি
চালানোর জন্য উপযুক্ত।
বিভিন্ন HTML বা সার্ভার-সাইড স্ক্রিপ্টিং পরিবেশন করার তুলনায় এই পদ্ধতির বেশ কিছু সুবিধা আছে, বিশেষ করে মোবাইলে:
- আপনি পছন্দের ক্রম অনুযায়ী ফর্ম্যাটের তালিকা তৈরি করতে পারবেন।
- ক্লায়েন্ট-সাইড সুইচিং লেটেন্সি কমায়; কন্টেন্ট পাওয়ার জন্য শুধু একটি অনুরোধ করা হয়।
- ব্রাউজারকে ফর্ম্যাট বেছে নিতে দেওয়াটা অনেক সহজ, দ্রুত এবং ইউজার-এজেন্ট শনাক্তকরণ সহ সার্ভার-সাইড সাপোর্ট ডেটাবেস ব্যবহার করার চেয়ে সম্ভাব্যভাবে আরও নির্ভরযোগ্য।
- প্রতিটি ফাইল সোর্সের ধরন উল্লেখ করলে নেটওয়ার্ক পারফর্ম্যান্স উন্নত হয়; ব্রাউজার ভিডিওর কোনও অংশ ডাউনলোড না করেই ভিডিও সোর্স বেছে নিতে পারে, যাতে ফর্ম্যাট "স্নিফ" করা যায়।
এইসব সমস্যা বিশেষ করে মোবাইলের ক্ষেত্রে গুরুত্বপূর্ণ, যেখানে ব্যান্ডউইথ ও
লেটেন্সি প্রিমিয়াম এবং ব্যবহারকারীর ধৈর্য সীমিত হওয়ার সম্ভাবনা থাকে। কাজ করে না এমন ধরনের একাধিক সোর্স থাকলে,
type অ্যাট্রিবিউট বাদ দিলে
পারফর্ম্যান্স প্রভাবিত হতে পারে।
আপনি কয়েকটি উপায়ে বিস্তারিত তথ্য জানতে পারবেন। ওয়েবে ভিডিও ও অডিও কীভাবে কাজ করে সেই সম্পর্কে আরও জানতে গিকদের জন্য ডিজিটাল মিডিয়া প্রাইমার দেখুন। এছাড়াও, আপনি 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 উল্লেখ করুন।
আপনি এই ফিচার ব্যবহার করে একই ভিডিওর একাধিক ভিউ দেখাতে পারবেন—যেমন DVD-তে কিউ পয়েন্ট—একাধিক ফাইল এনকোড ও পরিবেশন না করেই।
এই ফিচার কাজ করার জন্য, আপনার সার্ভারকে অবশ্যই রেঞ্জ অনুরোধ সমর্থন করতে হবে এবং সেই ক্ষমতা অবশ্যই চালু থাকতে হবে। অধিকাংশ সার্ভার ডিফল্ট হিসেবে রেঞ্জ অনুরোধ চালু করে। কিছু হোস্টিং পরিষেবা এগুলি বন্ধ করে দেয় বলে, আপনার সাইটে ফ্র্যাগমেন্ট ব্যবহার করার জন্য রেঞ্জ অনুরোধ উপলভ্য আছে কিনা তা কনফার্ম করা উচিত।
তবে, আপনার ব্রাউজারের ডেভেলপার টুল থেকে এটি করতে পারবেন। যেমন, Chrome-এ এটি নেটওয়ার্ক প্যানেলে থাকে। Accept-Ranges হেডারটি খুঁজুন এবং
যাচাই করুন যে এটি bytes বলছে। ছবিতে, আমি এই হেডারের চারপাশে একটি লাল বক্স এঁকেছি। আপনি যদি ভ্যালু হিসেবে bytes দেখতে না পান, তাহলে আপনাকে হোস্টিং প্রদানকারীর সাথে যোগাযোগ করতে হবে।
পোস্টার ছবি যোগ করুন
video এলিমেন্টে পোস্টার অ্যাট্রিবিউট যোগ করুন যাতে এলিমেন্ট লোড হওয়ার সাথে সাথেই দর্শক কন্টেন্ট সম্পর্কে ধারণা পান। এর জন্য ভিডিও ডাউনলোড বা প্লেব্যাক শুরু করার প্রয়োজন নেই।
<video poster="poster.jpg" ...>
…
</video>
ভিডিও src কাজ না করলে বা প্রদত্ত ভিডিও ফর্ম্যাটের কোনওটিই কাজ না করলে,
পোস্টারটি ফলব্যাক হিসেবেও ব্যবহার করা যেতে পারে। পোস্টার ইমেজের একমাত্র অসুবিধা হল অতিরিক্ত ফাইল অনুরোধ, যা কিছু ব্যান্ডউইথ খরচ করে এবং রেন্ডারিং প্রয়োজন।
আরও তথ্যের জন্য দক্ষতার সাথে ছবি এনকোড করুন দেখুন।
ভিডিও যেন কন্টেনারের বাইরে না চলে যায় তা নিশ্চিত করুন
ভিডিও এলিমেন্ট ভিউপোর্টের তুলনায় অনেক বড় হলে, তা কন্টেনারের বাইরে চলে যেতে পারে, যার ফলে ব্যবহারকারী কন্টেন্ট দেখতে বা কন্ট্রোল ব্যবহার করতে পারবেন না।
আপনি CSS ব্যবহার করে ভিডিওর ডাইমেনশন নিয়ন্ত্রণ করতে পারবেন। CSS আপনার সব প্রয়োজন পূরণ করতে না পারলে, FitVids-এর মতো জাভাস্ক্রিপ্ট লাইব্রেরি ও প্লাগ-ইন সাহায্য করতে পারে, এমনকি YouTube ও অন্যান্য সোর্স থেকে নেওয়া ভিডিওর ক্ষেত্রেও। দুর্ভাগ্যবশত, এইসব রিসোর্স আপনার নেটওয়ার্ক পেলোড সাইজ বাড়িয়ে দিতে পারে, যার ফলে আপনার উপার্জন ও ব্যবহারকারীর ওয়ালেটের উপর নেতিবাচক প্রভাব পড়তে পারে।
আমি এখানে যে ধরনের ব্যবহারের কথা বলছি, সেই ধরনের সহজ ব্যবহারের ক্ষেত্রে, ভিউপোর্ট ডাইমেনশনের উপর নির্ভর করে এলিমেন্টের সাইজ নির্দিষ্ট করতে CSS মিডিয়া কোয়েরি ব্যবহার করুন; max-width:
100% আপনার বন্ধু।
iframe-এ মিডিয়া কন্টেন্টের (যেমন YouTube ভিডিও) জন্য রেসপন্সিভ অ্যাপ্রোচ ব্যবহার করে দেখুন (যেমন John Surdakowski-এর প্রস্তাবিত অ্যাপ্রোচ)।
CSS
.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%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
কাজ করছে না এমন ভার্সনের সাথে কাজ করছে এমন স্যাম্পেল তুলনা করুন। আপনি দেখতেই পাচ্ছেন, রেসপন্সিভ নয় এমন ভার্সন ব্যবহারকারীর অভিজ্ঞতাকে দারুণ করে তোলে না।
ডিভাইসের ওরিয়েন্টেশন
ডেস্কটপ মনিটর বা ল্যাপটপের ক্ষেত্রে ডিভাইসের ওরিয়েন্টেশন কোনও সমস্যা নয়, তবে মোবাইল ডিভাইস ও ট্যাবলেটের জন্য ওয়েব পেজ ডিজাইন করার সময় এটি অত্যন্ত গুরুত্বপূর্ণ।
iPhone-এ Safari পোর্ট্রেট ও ল্যান্ডস্কেপ ওরিয়েন্টেশনের মধ্যে বদল করার কাজটি ভালভাবে করে:
iPad-এ ডিভাইসের ওরিয়েন্টেশন এবং Android-এ Chrome-এর ক্ষেত্রে সমস্যা হতে পারে। যেমন, কোনও কাস্টমাইজেশন ছাড়া ল্যান্ডস্কেপ ওরিয়েন্টেশনে iPad-এ ভিডিও চালালে তা এইরকম দেখায়:
CSS-এর মাধ্যমে ভিডিও width: 100% বা max-width: 100% সেট করলে
ডিভাইস ওরিয়েন্টেশন লেআউট সংক্রান্ত অনেক সমস্যার সমাধান হতে পারে।
অটোপ্লে
autoplay অ্যাট্রিবিউট নিয়ন্ত্রণ করে যে ব্রাউজার কোনও ভিডিও অবিলম্বে ডাউনলোড করে চালাবে কিনা। এটি ঠিক কীভাবে কাজ করে তা প্ল্যাটফর্ম ও ব্রাউজারের উপর নির্ভর করে।
Chrome: একাধিক বিষয়ের উপর নির্ভর করে, যার মধ্যে এগুলি অন্তর্ভুক্ত থাকলেও তার মধ্যেই সীমিত নয়, যেমন ডেস্কটপে দেখা হচ্ছে কিনা এবং মোবাইল ব্যবহারকারী আপনার সাইট বা অ্যাপ তার হোম স্ক্রিনে যোগ করেছেন কিনা। বিস্তারিত জানতে, অটোপ্লে সংক্রান্ত পেশাদার পদ্ধতি দেখুন।
Firefox: সব ভিডিও ও সাউন্ড ব্লক করে, তবে ব্যবহারকারীদের সব সাইট বা নির্দিষ্ট সাইটের জন্য এইসব বিধিনিষেধ শিথিল করার ক্ষমতা দেয়। আরও বিবরণের জন্য, Firefox-এ মিডিয়া অটোপ্লে করার অনুমতি দিন বা ব্লক করুন দেখুন
Safari: ঐতিহাসিকভাবে ইউজার জেসচার প্রয়োজন, তবে সাম্প্রতিক ভার্সনে সেই প্রয়োজনীয়তা শিথিল করা হয়েছে। বিস্তারিত জানতে, iOS-এর জন্য নতুন <video> নীতি দেখুন।
এমনকি যেসব প্ল্যাটফর্মে অটোপ্লে করা সম্ভব, সেখানেও আপনাকে বিবেচনা করতে হবে যে এটি চালু করা ভাল হবে কিনা:
- ডেটা ব্যবহারের খরচ বেশি হতে পারে।
- ব্যবহারকারী চাওয়ার আগেই মিডিয়া চালানো হলে তা ব্যান্ডউইথ ও সিপিইউ-এর উপর চাপ সৃষ্টি করতে পারে এবং এর ফলে পৃষ্ঠা রেন্ডার হতে দেরি হতে পারে।
- ব্যবহারকারী এমন কোনও পরিস্থিতিতে থাকতে পারেন যেখানে ভিডিও বা অডিও চালানো বিরক্তিকর হতে পারে।
প্রিলোড
preload অ্যাট্রিবিউট ব্রাউজারকে ইঙ্গিত দেয় যে কতটা তথ্য বা কন্টেন্ট প্রিলোড করতে হবে।
| ভ্যালু | বিবরণ |
|---|---|
none |
ব্যবহারকারী ভিডিওটি না দেখার সিদ্ধান্ত নিতে পারেন, তাই কিছু প্রিলোড করবেন না। |
metadata |
মেটাডেটা (সময়সীমা, ডাইমেনশন, টেক্সট ট্র্যাক) প্রিলোড করা থাকতে হবে, তবে ভিডিওর পরিমাণ যেন খুব কম হয়। |
auto |
একবারে সম্পূর্ণ ভিডিও ডাউনলোড করাকে বাঞ্ছনীয় বলে মনে করা হয়। একটি খালি স্ট্রিং একই ফলাফল তৈরি করে। |
preload অ্যাট্রিবিউটের বিভিন্ন প্ল্যাটফর্মে বিভিন্ন প্রভাব আছে।
যেমন, Chrome ডেস্কটপে ২৫ সেকেন্ডের ভিডিও বাফার করে কিন্তু iOS বা Android-এ করে না। এর অর্থ হল, মোবাইলে প্লেব্যাক শুরু হতে দেরি হতে পারে,
যা ডেস্কটপে হয় না। আরও বিবরণের জন্য অডিও এবং ভিডিও প্রিলোড সহ দ্রুত প্লেব্যাক অথবা
Steve Souders-এর ব্লগ দেখুন।
আপনার ওয়েব পেজে কীভাবে মিডিয়া যোগ করতে হয় তা এখন আপনি জানেন, তাই এবার মিডিয়া অ্যাক্সেসিবিলিটি সম্পর্কে জানার সময় এসেছে, যেখানে আপনি শ্রবণশক্তিহীন ব্যক্তিদের জন্য অথবা অডিও চালানো সম্ভব না হলে আপনার ভিডিওতে ক্যাপশন যোগ করবেন।