সাধারন আলোচনাঃ
এইচটিএমএল ৫ এর আগে জটিল
কোড ব্যাবহার করে ভিডিও দেয়া হত।তখন খুব
জটিল কোড লিখতে হত।আগে embed ট্যাগ দিয়ে ভিডিও
দিলে ব্রাউজার এ প্লাগিন ইন্সটল থাকতে হত। কিন্তু এইচটিএমএল ৫ এর <video> এলিমেন্ট টি ব্যাবহার করে খুব সহজে ওয়েব পেজে ভিডিও দেয়া
যায়।<video>এলিমেন্ট শুধু মাত্র নতুন ব্রাউজার এ সাপোর্ট করবে।পুরানো
ব্রাউজার এ সাপোর্ট করবে না । তাই এইচটিএমএল ৫ এর <video> এর সাথে <embed>
বা <object> এলিমেন্ট দিয়েও ভিডিও দেবার প্রয়োজন হবে।
আবার সব ব্রাউজার এ সব
ধরনের ভিডিও ফরম্যাট সাপোর্ট করে না।
MP4 : Safari 3+ , Internet Explorer 9+ , Chrome
OGG : Firefox 3.5+ ,Chrome 3+ ,Opera 10.5+
WebM : Firefox 4+ ,Chrome 6+ ,Opera 10.6+
<video>: ওয়েব পেজে ভিডিও যুক্ত করতে এই এলিমেন্ট ব্যাবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Video Add</title>
</head>
<body>
<video src="video/watelily.mp4" poster="images/waterlily.jpg"
width="400" height="300" preload
controls loop>
<p>A video of a waterlily</p>
</video>
</body>
</html>
src: ভিডিও ফাইল যুক্ত করতে
ব্যাবহার করা হয়েছে।
poster: poster ব্যাবহার করে ভিডিও এর উপরে আপনি আপনার ইচ্ছা মত যে কোন
পোস্টার দিতে পারবেন।
width, height : প্লেয়ার এর দৈর্ঘ্য ও প্রস্থ পিক্সেল এ প্রকাশ করতে
ব্যাবহার করা হয়।
controls : ব্রাউজার তার নিজস্ব প্লেয়ার এ ভিডিও প্রদর্শন করে ।এক্ষেত্রে এক এক ব্রাউজার এক এক
ভাবে দেখাবে। জাভাস্ক্রিপ্ট ব্যাবহার করতে হবে যদি আপনি ইচ্ছামত কোন ভিডিও প্লেয়ার
প্রদর্শন করাতে চান।
ব্রাউজার এর নিজস্ব প্লেয়ার
এ ভিডিও চালু হয় এবং play/pause/etc বাটন তৈরি হয়।
muted : এটা দিলে ভিডিও চলবে
কিন্তু কোন শব্দ শুনতে পারবে না।
autoplay: এই অ্যাট্রিবিউট ব্যাবহার করলে পেজ লোড হবার সাথে সাথে
অটোমেটিকালি ভিডিও চালু হবে।
loop: loop অ্যাট্রিবিউট এর কাজ হল এটা ভিডিও একবার শেষ হলে আবার প্রথম
থেকে শুরু হবে।
preload: autoplay
attribute ব্যাবহার না করা হলে তখন preload ব্যাবহার করা হয়।এর তিনটি
মান আছে। none, auto, metadata
none: ভিডিওটি ডাউনলোড করতে ব্রাউজার কে নিষেধ করবে।
auto: পেজ লোড হবার আগেই ভিডিও ডাউনলোড করবে।
metadata: ভিডিওর মেটা ডাটা যেমন ভিডিওর দৈর্ঘ্য বা ফরম্যাট (length or format)ইত্যাদি লোড হবে।
<source>:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video Sources</title>
</head>
<body>
<video poster="images/ watelily.jpg"
width="400"height="320" preload controls loop>
<source src="video/ watelily.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/ watelily.webm"
type='video/webm;codecs="vp8, vorbis"' />
<p>A video of a watelily </p>
</video>
</body>
</htm
সব ব্রাউজার এ সব ধরনের
ভিডিও ফরম্যাট সাপোর্ট করে না । <source>
এলিমেন্ট ব্যাবহার করে আপনি একই ভিডিওর অনেক
ফরম্যাট একসাথে ব্যাবহার করতে পারবেন।ব্রাউজার এ
যে ফরম্যাট সাপোর্ট করবে সেটাই
চলবে।ব্রাউজার fallback ফরমেট মেথড
ব্যবহার করে নিজের থেকে খুজতে শুরু
করবে কোন ফরম্যাট টা সাপোর্ট করবে এবং সেটা চালু করে দেখাবে। ধরুন iPad এর জন্য MP4
video format লাগবে নতুবা এটা চালু হবে
না। তখন এই <source> এলিমেন্ট ব্যাবহার করতে হবে।কারন আবার অনেক ব্রাউজার থাকতে
পারে যেখানে MP4 সাপোর্ট করবে না ,সাপোর্ট করবে webm।
source গ্লোবাল ও ইভেন্ট
অ্যাট্রিবিউট সাপোর্ট করে।
type এট্রিবিউটটি দিলেও হবে না দিলেও সমস্যা নাই। তবে দিলে পারফমেন্স বাড়বে।
codecs: type attribute এর ভিতরে সঙ্কেতাক্ষরে ভিডিও সরবরাহ
করতে ব্যাবহার করা হয়। যদি ব্রাউজার <video> এলিমেন্টে রাখা ভিডিও ফরম্যাট
সাপোর্ট না করে তাই codecs ব্যাবহার করে ভিডিওর ফরম্যাট লিখে দেয়া হয়।এবং
ব্রাউজারে ভিডিও সাপোর্টের জন্য সহায়তা করে।
subtitles : <track> দিয়ে ভিডিওতে কোন লেখা যোগ করতে ব্যাবহার করা
হয়। webVTTfile করে সাবটাইটেল দেয়া হয়।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন