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 | उस मीडिया ग्रुप का नाम सेट/लौटाता है जिसका वीडियो हिस्सा है |
| 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' बटन पर क्लिक करने के बाद:
