HTML এ HTML DOM ভিডিও অবজেক্ট <ভিডিও> উপাদান
প্রতিনিধিত্ব করেএকটি <ভিডিও> তৈরি করা হচ্ছে উপাদান
var videoObject = document.createElement(“VIDEO”)
এখানে, “videoObject” নিম্নলিখিত বৈশিষ্ট্য থাকতে পারে -
| সম্পত্তি | বর্ণনা |
|---|---|
| অডিওট্র্যাক | উপলব্ধ অডিওট্র্যাকগুলি উপস্থাপন করে একটি অডিওট্র্যাকলিস্ট অবজেক্ট ফিরিয়ে দেয় |
| অটোপ্লে৷ | একটি ভিডিও প্রস্তুত হওয়ার সাথে সাথে এটি চালানো শুরু করা উচিত কিনা তা সেট/রিটার্ন করে |
| বাফার করা হয়েছে৷ | এটি ভিডিওর বাফার করা অংশগুলিকে উপস্থাপন করে একটি টাইমরেঞ্জ অবজেক্ট ফিরিয়ে দেয় |
| নিয়ন্ত্রক৷ | এটি একটি ভিডিওর বর্তমান মিডিয়াকন্ট্রোলার প্রতিনিধিত্বকারী মিডিয়াকন্ট্রোলার অবজেক্টটিকে ফিরিয়ে দেয় |
| নিয়ন্ত্রণ৷ | একটি ভিডিওতে কন্ট্রোল দেখানো উচিত কিনা তার সেট/রিটার্ন (প্লে/পজ ইত্যাদি) |
| crossOrigin | ইটিসেট/একটি ভিডিওর CORS সেটিংস ফেরত দেয় |
| currentSrc | এটি বর্তমান ভিডিওর URL প্রদান করে৷ |
| বর্তমান সময়৷ | একটি ভিডিওতে বর্তমান প্লেব্যাক অবস্থান এটিসেট/রিটার্ন করে (সেকেন্ডে) |
| ডিফল্ট নিঃশব্দ | ডিফল্টরূপে ভিডিওটি নিঃশব্দ করা উচিত কিনা তার সেট/রিটার্ন |
| ডিফল্ট প্লেব্যাক রেট | ভিডিওর ডিফল্ট প্লেব্যাক গতি কিনা তা সেট/রিটার্ন |
| সময়কাল৷ | একটি ভিডিওর দৈর্ঘ্য ফেরত দেয় (সেকেন্ডে) |
| শেষ হয়েছে৷ | ভিডিওটির প্লেব্যাক শেষ হয়েছে কিনা তা ফেরত দেয়৷ |
| ত্রুটি৷ | Itre একটি MediaError অবজেক্ট যা ভিডিওর ত্রুটি অবস্থার প্রতিনিধিত্ব করে |
| উচ্চতা৷ | এটিসেট/একটি ভিডিওর উচ্চতা বৈশিষ্ট্যের মান ফেরত দেয় |
| লুপ৷ | ভিডিওটি যতবার শেষ হবে ততবার আবার প্লে করা শুরু করবে কিনা তা সেট/রিটার্ন করে |
| মিডিয়া গ্রুপ | ভিডিওটি যেটির একটি অংশ |
| নিঃশব্দ৷ | একটি ভিডিওর শব্দ বন্ধ করা উচিত কিনা তা সেট/রিটার্ন করে |
| নেটওয়ার্কস্টেট | এটি একটি ভিডিওর বর্তমান নেটওয়ার্ক অবস্থা ফেরত দেয়৷ |
| পজ করা হয়েছে৷ | একটি ভিডিও পজ করা হয়েছে কিনা তা ফেরত দেয়৷ |
| প্লেব্যাক রেট | ভিডিও প্লেব্যাকের গতি ইটাসেট/রিটার্ন করে৷ |
| বাজানো হয়েছে৷ | এটি ভিডিওর প্লে করা অংশগুলির প্রতিনিধিত্ব করে একটি টাইমরেঞ্জ অবজেক্ট ফিরিয়ে দেয় |
| পোস্টার৷ | একটি ভিডিওর পোস্টার অ্যাট্রিবিউটের মান এটিসেট/রিটার্ন করে |
| প্রিলোড৷ | এটিসেট/একটি ভিডিওর প্রিলোড বৈশিষ্ট্যের মান ফেরত দেয় |
| রেডি স্টেট | এটি একটি ভিডিওর বর্তমান প্রস্তুত অবস্থা ফিরিয়ে দেয়৷ |
| অনুসন্ধানযোগ্য৷ | এটি ভিডিওর সন্ধানযোগ্য অংশগুলিকে উপস্থাপন করে একটি টাইমরেঞ্জ অবজেক্ট ফিরিয়ে দেয় |
| চাওয়া হচ্ছে৷ | ব্যবহারকারী বর্তমানে ভিডিওতে খুঁজছেন কিনা তা ফেরত দেয় |
| src | এটিসেট/একটি ভিডিওর src বৈশিষ্ট্যের মান ফেরত দেয় |
| শুরু তারিখ৷ | এটি বর্তমান সময়ের অফসেট প্রতিনিধিত্ব করে একটি তারিখ অবজেক্ট প্রদান করে৷ |
| টেক্সটট্র্যাক | উপলব্ধ টেক্সটট্র্যাকগুলি উপস্থাপন করে একটি টেক্সটট্র্যাকলিস্ট অবজেক্ট ফিরিয়ে দেয় |
| ভিডিওট্র্যাক | উপলব্ধ ভিডিও ট্র্যাকগুলি উপস্থাপন করে একটি ভিডিও ট্র্যাকলিস্ট অবজেক্ট ফিরিয়ে দেয় |
| ভলিউম | এটি সেট/একটি ভিডিওর অডিও ভলিউম ফেরত দেয়৷ |
| প্রস্থ৷ | এটিসেট/একটি ভিডিওর প্রস্থ বৈশিষ্ট্যের মান ফেরত দেয় |
আসুন আমরা একটি বৈশিষ্ট্যের উদাহরণ দেখি, যেমন HTML DOM ভিডিও নেটওয়ার্ক স্টেট সম্পত্তি -
উদাহরণ
<!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> আউটপুট
'নেটওয়ার্ক স্টেট পান' ক্লিক করা হচ্ছে কোন উৎস সংজ্ঞায়িত &inus;
সহ বোতাম
'নেটওয়ার্ক স্টেট পান' ক্লিক করা হচ্ছে উৎস সংজ্ঞায়িত কিন্তু ব্রাউজার ডাউনলোড ডেটা −
সহ বোতাম
এছাড়াও, “videoObject” নিম্নলিখিত পদ্ধতি থাকতে পারে -
| পদ্ধতি | বর্ণনা |
|---|---|
| addTextTrack() | এটি ভিডিওতে একটি নতুন পাঠ্য ট্র্যাক যোগ করে৷ |
| canPlayType() | ব্রাউজার নির্দিষ্ট ভিডিও টাইপ চালাতে পারে কিনা তা পরীক্ষা করে |
| লোড() | Itre ভিডিও উপাদানটিকে রেন্ডার করে৷ |
| play() | আইটিটি ভিডিওর প্লেব্যাক শুরু করতে ব্যবহৃত হয়৷ |
| বিরাম () | Itis একটি প্লে ভিডিও পজ করতে ব্যবহৃত হয়৷ |
আসুন ভিডিও ক্যানপ্লেটাইপ() এর একটি উদাহরণ দেখি সম্পত্তি -
উদাহরণ
<!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> আউটপুট
'ব্রাউজার কি ভিডিও/mp4 সমর্থন করে?' ক্লিক করার আগে৷ বোতাম -
'Does Browser Supports video/mp4' ক্লিক করার পর৷ বোতাম -
