এইচটিএমএল ভিডিও
HTML <video> উপাদানটি একটি ওয়েব পেজে একটি ভিডিও প্রদর্শন করতে ব্যবহৃত হয়।
ভিডিও উদাহরণ
আপনাকে ধন্যবাদ বিগ বক বানি
<ভিডিও> উপাদান
HTML এ একটি ভিডিও প্রদর্শন করতে, <video> উপাদানটি ব্যবহার করুন:
<source src="video1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
আপনার ব্রাউজার ভিডিও ট্যাগ সমর্থন করে না.
</video>
এটা কিভাবে কাজ করে
মূল বৈশিষ্ট্য:
controls
ভিডিও নিয়ন্ত্রণ যোগ করে, যেমন প্লে, বেস এবং ভলিউম
width & height
ভিডিওর প্রস্থ এবং উচ্চতা সেট করে। যদি সেট না করা হয়, ভিডিওটি লোড হওয়ার সময় পৃষ্ঠাটি জ্বলতে পারে
<source>
বিকল্প ভিডিও ফাইল নির্দিষ্ট করার অনুমতি দেয়। ব্রাউজারটি প্রথম পরিচিত বিন্যাস ব্যবহার করবে
গুরুত্বপূর্ণ নোট:
<video> এবং </video> ট্যাগের মধ্যে পাঠ্য শুধুমাত্র ব্রাউজারগুলিতে প্রদর্শিত হবে যেগুলি <video> উপাদান সমর্থন করে না।
HTML <video> Autoplay
স্বয়ংক্রিয়ভাবে ভিডিও চালানোর জন্য অটোপ্লে বৈশিষ্ট্য ব্যবহার করুন:
উদাহরণ
<source src="video1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
আপনার ব্রাউজার ভিডিও ট্যাগ সমর্থন করে না.
</video>
দ্রষ্টব্য:
Chromium ব্রাউজার বেশিরভাগ ক্ষেত্রে অটোপ্লে অনুমোদন করে না। যাইহোক, অবশ্যই অটোপ্লে সবসময় অনুমোদিত।
আপনার ভিডিও স্বয়ংক্রিয়ভাবে চলতে শুরু করতে অটোপ্লে করার পরে নিঃশব্দ (কিন্তু নিঃশব্দ) যোগ করুন:
<source src="video1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
আপনার ব্রাউজার ভিডিও ট্যাগ সমর্থন করে না.
</video>
ব্রাউজার সমর্থন
টেবিলের সংখ্যাগুলি প্রথম ব্রাউজার সংস্করণকে উপস্থাপন করে যা সম্পূর্ণরূপে <ভিডিও> উপাদানটিকে সমর্থন করে।
| অঙ্গ | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
এইচটিএমএল ভিডিও ফরম্যাট
তিনটি সমর্থিত ভিডিও ফরম্যাট রয়েছে: MP4, WebM এবং Ogg। বিভিন্ন ফরম্যাটের জন্য ব্রাউজার সমর্থন:
| ব্রাউজার | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML ভিডিও - মিডিয়া প্রকার
| ফাইল বিন্যাস | মিডিয়া টাইপ |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
টাইপ বৈশিষ্ট্য:
<source> এলিমেন্টে টাইপ অ্যাট্রিবিউট গুরুত্বপূর্ণ। এটি ব্রাউজারকে ভিডিও ফর্ম্যাট বলে যাতে ব্রাউজার দ্রুত সিদ্ধান্ত নিতে পারে যে এটি এটি চালাতে পারে কিনা।
এইচটিএমএল ভিডিও - পদ্ধতি, বৈশিষ্ট্য এবং ঘটনা
HTML DOM <video> উপাদানের জন্য পদ্ধতি, বৈশিষ্ট্য এবং ইভেন্ট সংজ্ঞায়িত করে।
এটি আপনাকে ভিডিওগুলি লোড করতে, প্লে করতে, বিরতি দিতে এবং সময়কাল এবং ভলিউম সেট করতে দেয়৷
এমন কিছু DOM ইভেন্টও রয়েছে যা আপনাকে বিজ্ঞপ্তি দিতে পারে যখন একটি ভিডিও চলতে শুরু করে, বন্ধ হয় ইত্যাদি।
উদাহরণ: জাভাস্ক্রিপ্ট ব্যবহার করা
Video courtesy of Big Buck Bunny.
var video = document.getElementById("jsVideo");
// প্লে বোতাম
document.getElementById("playBtn").onclick = function() {
video.play();
};
// স্টপ বোতাম
document.getElementById("pauseBtn").onclick = function() {
video.pause();
};
DOM রেফারেন্স:
সম্পূর্ণ DOM রেফারেন্সের জন্য, আমাদের HTML অডিও/ভিডিও DOM রেফারেন্স দেখুন।
এইচটিএমএল ভিডিও ট্যাগ
| ট্যাগ | ব্যাখ্যা |
|---|---|
| <video> | একটি ভিডিও বা চলচ্চিত্র সংজ্ঞায়িত করে |
| <source> | মিডিয়া উপাদান যেমন <ভিডিও> এবং <অডিও> জন্য একাধিক মিডিয়া সংস্থান সংজ্ঞায়িত করে |
| <track> | মিডিয়া প্লেয়ারে টেক্সট ট্র্যাক সংজ্ঞায়িত করে |
মূল পয়েন্ট:
- সর্বদা একাধিক ফরম্যাটে ভিডিও পরিবেশন করুন (MP4, WebM, Ogg)
- সর্বদা প্রস্থ এবং উচ্চতা বৈশিষ্ট্য অন্তর্ভুক্ত করুন
- ব্রাউজার সামঞ্জস্যের জন্য নিয়ন্ত্রণ বৈশিষ্ট্য যোগ করুন
- অটোপ্লে ব্যবহার করার সময় সর্বদা নিঃশব্দ যোগ করুন
- <source> এলিমেন্টে টাইপ অ্যাট্রিবিউট উল্লেখ করুন