"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > HTML5 वीडियो टैग के स्रोत को गतिशील रूप से कैसे बदलें?

HTML5 वीडियो टैग के स्रोत को गतिशील रूप से कैसे बदलें?

2024-11-13 को प्रकाशित
ब्राउज़ करें:237

How to Dynamically Change the Source of an HTML5 Video Tag?

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();

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

नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3