HTML DOM Video অবজেক্ট
HTML DOM Video অবজেক্ট HTML-এ <video> এলিমেন্টকে প্রতিনিধিত্ব করে।
<video> এলিমেন্ট তৈরি করা
var videoObject = document.createElement("VIDEO")
এখানে, "videoObject" নিম্নলিখিত প্রোপার্টিগুলো 가질 수 있습니다 -
| প্রোপার্টি | বিবরণ |
|---|---|
| audioTracks | উপলব্ধ অডিও ট্র্যাকগুলোকে প্রতিনিধিত্বকারী AudioTrackList অবজেক্ট ফেরত দেয় |
| autoplay | সেট/ফেরত দেয় যে ভিডিও রেডি হলে সাথে সাথে প্লে শুরু হবে কিনা |
| buffered | ভিডিওর বাফারড অংশগুলোকে প্রতিনিধিত্বকারী TimeRanges অবজেক্ট ফেরত দেয় |
| controller | ভিডিওর বর্তমান মিডিয়া কন্ট্রোলারকে প্রতিনিধিত্বকারী MediaController অবজেক্ট ফেরত দেয় |
| controls | সেট/ফেরত দেয় যে ভিডিওর কন্ট্রোলস প্রদর্শিত হবে কিনা (প্লে/পজ ইত্যাদি) |
| crossOrigin | ভিডিওর CORS সেটিংস সেট/ফেরত দেয় |
| currentSrc | বর্তমান ভিডিওর URL ফেরত দেয় |
| currentTime | ভিডিওর বর্তমান প্লেব্যাক পজিশন সেকেন্ডে সেট/ফেরত দেয় |
| defaultMuted | সেট/ফেরত দেয় যে ভিডিও ডিফল্টভাবে মিউট থাকবে কিনা |
| defaultPlaybackRate | ভিডিওর ডিফল্ট প্লেব্যাক স্পিড সেট/ফেরত দেয় |
| duration | ভিডিওর দৈর্ঘ্য সেকেন্ডে ফেরত দেয় |
| ended | ভিডিওর প্লেব্যাক শেষ হয়েছে কিনা ফেরত দেয় |
| error | ভিডিওর এরর স্টেটকে প্রতিনিধित्वকারী MediaError অবজেক্ট ফেরত দেয় |
| height | ভিডিওর height অ্যাট্রিবিউটের মান সেট/ফেরত দেয় |
| loop | সেট/ফেরত দেয় যে ভিডিও শেষ হলে আবার প্লে শুরু হবে কিনা |
| mediaGroup | ভিডিও(s) যেই মিডিয়া গ্রুপের অংশ সেটার নাম সেট/ফেরত দেয় |
| muted | সেট/ফেরত দেয় যে ভিডিওর সাউন্ড বন্ধ থাকবে কিনা |
| networkState | ভিডিওর বর্তমান নেটওয়ার্ক স্টেট ফেরত দেয় |
| paused | ভিডিও পজ করা হয়েছে কিনা ফেরত দেয় |
| playbackRate | ভিডিও প্লেব্যাকের গতি সেট/ফেরত দেয় |
| played | ভিডিওর প্লে করা অংশগুলোকে প্রতিনিধিত্বকারী TimeRanges অবজেক্ট ফেরত দেয় |
| poster | ভিডিওর poster অ্যাট্রিবিউটের মান সেট/ফেরত দেয় |
| preload | ভিডিওর preload অ্যাট্রিবিউটের মান সেট/ফেরত দেয় |
| readyState | ভিডিওর বর্তমান রেডি স্টেট ফেরত দেয় |
| seekable | ভিডিওর সিকেবল অংশগুলোকে প্রতিনিধিত্বকারী TimeRanges অবজেক্ট ফেরত দেয় |
| seeking | ব্যবহারকারী বর্তমানে ভিডিওতে সিকিং করছে কিনা ফেরত দেয় |
| src | ভিডিওর src অ্যাট্রিবিউটের মান সেট/ফেরত দেয় |
| startDate | বর্তমান টাইম অফসেটকে প্রতিনিধিত্বকারী Date অবজেক্ট ফেরত দেয় |
| textTracks | উপলব্ধ টেক্সট ট্র্যাকগুলোকে প্রতিনিধিত্বকারী TextTrackList অবজেক্ট ফেরত দেয় |
| videoTracks | উপলব্ধ ভিডিও ট্র্যাকগুলোকে প্রতিনিধিত্বকারী VideoTrackList অবজেক্ট ফেরত দেয় |
| volume | ভিডিওর অডিও ভলিউম সেট/ফেরত দেয় |
| width | ভিডিওর width অ্যাট্রিবিউটের মান সেট/ফেরত দেয় |
HTML DOM Video networkState প্রোপার্টির একটি উদাহরণ নিচে দেওয়া হলো -
উদাহরণ
<!DOCTYPE html> <html> <head> <title>HTML DOM Video networkState</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>HTML-DOM-Video-networkState</legend> <video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br> <input type="button" onclick="setTrackDetails()" value="Set Source"> <input type="button" onclick="getTrackDetails()" value="Get Network State"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var demo = document.getElementById("demo"); var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4'; function getTrackDetails() { divDisplay.textContent = 'Network State: '+demo.networkState; } function setTrackDetails() { demo.src = srcOfMedia; demo.load(); } </script> </body> </html>
আউটপুট
'Get Network State' বাটনে ক্লিক করলে কোনো সোর্স ডিফাইন না থাকলে -
'Get Network State' বাটনে ক্লিক করলে সোর্স ডিফাইন করা থাকলেও ব্রাউজার ডেটা ডাউনলোড করছে -
এছাড়া, "videoObject" নিম্নলিখিত মেথডগুলোও 가질 수 있습니다 -
| মেথড | বিবরণ |
|---|---|
| addTextTrack() | ভিডিওতে নতুন টেক্সট ট্র্যাক যোগ করে |
| canPlayType() | ব্রাউজার নির্দিষ্ট ভিডিও টাইপ প্লে করতে পারে কিনা চেক করে |
| load() | ভিডিও এলিমেন্টকে পুনরায় রেন্ডার করে |
| play() | ভিডিওর প্লেব্যাক শুরু করতে ব্যবহৃত হয় |
| pause() | চলমান ভিডিও পজ করতে ব্যবহৃত হয় |
Video canPlayType() প্রোপার্টির একটি উদাহরণ -
উদাহরণ
<!DOCTYPE html> <html> <head> <title>HTML DOM Video canPlayType()</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>HTML-DOM-Video-canPlayType( )</legend> <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br> <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var demo = document.getElementById("demo"); var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4'; function getTrackDetails() { var ans = demo.canPlayType('video/mp4'); if(ans !== ''){ divDisplay.textContent = 'Browser supports mp4'; demo.src = srcOfMedia; demo.load(); } else divDisplay.textContent = 'Browser does not supports mp4'; } </script> </body> </html>
আউটপুট
'Does Browser Supports video/mp4?' বাটনে ক্লিক করার আগে -
'Does Browser Supports video/mp4' বাটনে ক্লিক করার পর -
