एचटीएमएल डोम वीडियो ऑब्जेक्ट

<घंटा/>

HTML में HTML DOM वीडियो ऑब्जेक्ट <वीडियो> तत्व का प्रतिनिधित्व करता है।

एक <वीडियो> बनाना तत्व

var videoObject = document.createElement(“VIDEO”)

यहां, “वीडियोऑब्जेक्ट” निम्नलिखित गुण हो सकते हैं -

संपत्ति <वें>विवरण
audioTracks	यह उपलब्ध ऑडियो ट्रैक का प्रतिनिधित्व करने वाला एक AudioTrackList ऑब्जेक्ट देता है
ऑटोप्ले	इससे सेट/रिटर्न होता है कि वीडियो तैयार होते ही चलना शुरू हो जाना चाहिए या नहीं
बफ़र किया गया	यह एक TimeRanges ऑब्जेक्ट देता है जो avideo के बफ़र किए गए हिस्सों का प्रतिनिधित्व करता है
नियंत्रक	यह किसी वीडियो के वर्तमान मीडिया नियंत्रक का प्रतिनिधित्व करने वाले MediaController ऑब्जेक्ट को लौटाता है
नियंत्रण	इससे सेट/रिटर्न होता है कि किसी वीडियो में नियंत्रण प्रदर्शित होना चाहिए या नहीं (चलाएं/रोकें आदि)
crossOrigin	वीडियो की CORS सेटिंग सेट/रिटर्न करता है
currentSrc	यह वर्तमान वीडियो का URL देता है
currentTime	वीडियो में वर्तमान प्लेबैक स्थिति को सेट/रिटर्न करता है (सेकंड में)
डिफ़ॉल्टम्यूटेड	इससे सेट/रिटर्न होता है कि क्या वीडियो को डिफ़ॉल्ट रूप से म्यूट किया जाना चाहिए
डिफ़ॉल्ट प्लेबैक दर	इससे सेट/रिटर्न होता है कि वीडियो की डिफ़ॉल्ट प्लेबैक गति है या नहीं
अवधि	यह वीडियो की लंबाई लौटाता है (सेकंड में)
समाप्त	यह दिखाता है कि वीडियो का प्लेबैक समाप्त हो गया है या नहीं
त्रुटि	यह एक MediaError ऑब्जेक्ट देता है जो वीडियो की त्रुटि स्थिति का प्रतिनिधित्व करता है
ऊंचाई	वीडियो की ऊंचाई विशेषता का मान सेट/रिटर्न करता है
लूप	यह सेट/रिटर्न करता है कि क्या वीडियो हर बार समाप्त होने पर फिर से चलना शुरू करना चाहिए या नहीं
mediaGroup	वीडियो उस मीडिया समूह का नाम सेट/रिटर्न करता है जिसका वीडियो (वीडियो) का हिस्सा है
म्यूट किया गया	इससे सेट/रिटर्न होता है कि वीडियो की आवाज़ बंद कर दी जानी चाहिए या नहीं
networkState	यह वीडियो की वर्तमान नेटवर्क स्थिति लौटाता है
रोका गया	यह दिखाता है कि वीडियो रोका गया है या नहीं
playbackRate	वीडियो प्लेबैक की गति को सेट/रिटर्न करता है
खेला	यह एक टाइमरेंज ऑब्जेक्ट देता है जो वीडियो के चलाए गए भागों का प्रतिनिधित्व करता है
पोस्टर	वीडियो की पोस्टर विशेषता का मान सेट/रिटर्न करता है
प्रीलोड	वीडियो की प्रीलोड विशेषता का मान सेट/रिटर्न करता है
रेडीस्टेट	यह वीडियो की वर्तमान तैयार स्थिति लौटाता है
तलाश करने योग्य	यह एक TimeRanges ऑब्जेक्ट देता है जो avideo के खोजे जाने योग्य भागों का प्रतिनिधित्व करता है
तलाश	यह लौटाता है कि उपयोगकर्ता वर्तमान में वीडियो में खोज रहा है या नहीं
src	वीडियो की src विशेषता का मान सेट/रिटर्न करता है
startDate	यह एक दिनांक वस्तु लौटाता है जो वर्तमान समय ऑफसेट का प्रतिनिधित्व करता है
textTracks	यह एक TextTrackList ऑब्जेक्ट देता है जो उपलब्ध टेक्स्टट्रैक का प्रतिनिधित्व करता है
videoTracks	यह उपलब्ध वीडियो ट्रैक का प्रतिनिधित्व करने वाला एक VideoTrackList ऑब्जेक्ट देता है
वॉल्यूम	वीडियो का ऑडियो वॉल्यूम सेट/रिटर्न करता है
चौड़ाई	वीडियो की चौड़ाई विशेषता का मान सेट/रिटर्न करता है

आइए हम इनमें से किसी एक गुण का उदाहरण देखें, अर्थात 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()	यह जांचता है कि ब्राउज़र निर्दिष्ट वीडियो प्रकार चला सकता है या नहीं
load()	वीडियो तत्व को पुन:प्रस्तुत करता है
play()	इसका उपयोग वीडियो का प्लेबैक शुरू करने के लिए किया जाता है
रोकें()	इसका उपयोग चल रहे वीडियो को रोकने के लिए किया जाता है

आइए हम वीडियो 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>

आउटपुट

'क्या ब्राउज़र वीडियो/mp4 का समर्थन करता है?' . क्लिक करने से पहले बटन -

एचटीएमएल डोम वीडियो ऑब्जेक्ट

'क्या ब्राउज़र वीडियो/mp4 का समर्थन करता है' . पर क्लिक करने के बाद बटन -

एचटीएमएल डोम वीडियो ऑब्जेक्ट