HTML5 वीडियो टैग का स्रोत बदलना: एक व्यापक समाधान

एक सार्वभौमिक वीडियो प्लेयर बनाने के लिए स्रोत को गतिशील रूप से बदलने के मुद्दे को संबोधित करने की आवश्यकता है वीडियो का. यह उपयोगकर्ताओं को प्लेलिस्ट में वीडियो के बीच स्विच करने की अनुमति देता है। जबकि एकाधिक टैग का उपयोग करने वाले पिछले तरीकों को सीमाओं का सामना करना पड़ा है, यह आलेख एकल विशेषता का उपयोग करके एक विश्वसनीय विधि प्रस्तुत करता है।

canPlayType() का उपयोग करके फ़ाइल प्रकार की पहचान करना:

वीडियो के लिए उपयुक्त फ़ाइल प्रकार निर्धारित करने के लिए, हम canPlayType() फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन किसी दिए गए मीडिया प्रकार के लिए ब्राउज़र के समर्थन के स्तर को इंगित करने वाली एक स्ट्रिंग लौटाता है। उदाहरण के लिए:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

canPlayType() के परिणामों के आधार पर, हम गतिशील रूप से

वेनिला जावास्क्रिप्ट का उपयोग करके कार्यान्वयन:

यहां एक कोड स्निपेट है जो दर्शाता है कि वेनिला जावास्क्रिप्ट का उपयोग करके वीडियो के स्रोत को कैसे बदला जाए:

var video = document.getElementById('video');

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

यह दृष्टिकोण एकाधिक टैग का उपयोग करने की कमियों के बिना गतिशील स्रोत स्विचिंग की अनुमति देता है। यह यह भी सुनिश्चित करता है कि वीडियो ब्राउज़र द्वारा समर्थित सबसे उपयुक्त प्रारूप में चलेगा।