HTML5-এর আগে, একটি ভিডিও শুধুমাত্র প্লাগইনের (যেমন flash) মাধ্যমে ব্রাউজারে চালানো যেত।
HTML5-এর <video> এলিমেন্ট একটি ওয়েব পেজে ভিডিও এমবেড করার একটি স্ট্যান্ডার্ড পদ্ধতি নির্ধারণ করে।
HTML-এ একটি ভিডিও দেখাতে, <video> এলিমেন্ট ব্যবহার করুন:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>controls অ্যাট্রিবিউট প্লে, পজ এবং ভলিউমের মতো ভিডিও কন্ট্রোল যোগ করে।
সবসময় width এবং height অ্যাট্রিবিউট যোগ করা ভালো অভ্যাস। height এবং width সেট করা না থাকলে, ভিডিও লোড হওয়ার সময় পেজ ফ্লিকার করতে পারে।
<source> এলিমেন্টের মাধ্যমে আপনি একাধিক বিকল্প ভিডিও ফাইল উল্লেখ করতে পারেন, যেখান থেকে ব্রাউজার বেছে নিতে পারে। ব্রাউজার প্রথম যে ফরম্যাটটি চিনতে পারবে সেটিই ব্যবহার করবে।
<video> এবং </video> ট্যাগের মধ্যবর্তী টেক্সট শুধুমাত্র সেইসব ব্রাউজারে দেখানো হবে যেগুলো <video> এলিমেন্ট সমর্থন করে না।
একটি ভিডিও স্বয়ংক্রিয়ভাবে শুরু করতে autoplay অ্যাট্রিবিউট ব্যবহার করুন:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>iPad এবং iPhone-এর মতো মোবাইল ডিভাইসে autoplay অ্যাট্রিবিউট কাজ করে না।
HTML5 <video> এলিমেন্টের জন্য DOM মেথড, প্রপার্টি এবং ইভেন্ট নির্ধারণ করে।
এর মাধ্যমে আপনি ভিডিও লোড, প্লে এবং পজ করতে পারবেন, পাশাপাশি duration ও volume সেট করতে পারবেন।
এমন কিছু DOM ইভেন্টও আছে, যেগুলো একটি ভিডিও প্লে হওয়া শুরু করলে, পজ হলে ইত্যাদি ক্ষেত্রে আপনাকে জানাতে পারে।
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div><script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>