इस लेख में, मीडिया का इस्तेमाल स्ट्रीम करने की ज़रूरी शर्तें पूरी करनी होंगी. साथ ही, स्कूल से मिले नतीजे के बारे में स्ट्रीमिंग के इस्तेमाल के उदाहरण, प्रोटोकॉल, और एक्सटेंशन. चलिए, स्ट्रीमिंग के बारे में जानकारी.
मीडिया स्ट्रीमिंग, ऐसा कॉन्टेंट है जिसके ज़रिए मीडिया कॉन्टेंट को डिलीवर और चलाया जा सकता है. टुकड़ा. यह एक फ़ाइल लोड करने के बजाय, ऑप्टिमाइज़ न किए जाने पर धीमा हो सकता है तो प्लेयर, मेनिफ़ेस्ट फ़ाइल को पढ़कर यह बताता है कि टारगेट मीडिया कैसा है डेटा को अलग-अलग हिस्सों में बांटा जा सकता है. मीडिया हिस्से को बाद में डाइनैमिक तरीके से जोड़ा जाता है रनटाइम पर एक साथ वापस आ जाता है—शायद अलग-अलग बिटरेट पर, जिससे आप बाद में.
ध्यान रखें कि आपकी वेबसाइट पर स्ट्रीमिंग उपलब्ध कराने के लिए सर्वर
Range एचटीटीपी अनुरोध के हेडर के साथ काम करना ज़रूरी है. Accept-Ranges के बारे में ज़्यादा जानें
हेडर में <video> और <source> टैग लेख.
स्ट्रीमिंग के इस्तेमाल के उदाहरण
स्ट्रीम के बारे में बताने के लिए, अलग-अलग मीडिया सेगमेंट और ज़रूरी मेनिफ़ेस्ट तैयार करना मुमकिन नहीं है
यह बिलकुल आसान है. हालांकि, स्ट्रीमिंग की मदद से इसे इस्तेमाल करने के कुछ दिलचस्प उदाहरण दिए गए हैं.
सिर्फ़ <video> एलिमेंट को पॉइंट करके हासिल करना संभव नहीं है
को स्टैटिक सोर्स फ़ाइलों के सेट में एक्सपोर्ट करता है. आपको इनके बारे में ज़्यादा जानकारी मिलेगी
बाद के सेक्शन में किसी वेब पेज में मीडिया जोड़ें. सबसे पहले, आपको
मल्टीमीडिया कॉन्टेंट को इस्तेमाल करने के कुछ आसान उदाहरण यहां दिए गए हैं,
<video> एलिमेंट में कई फ़ाइलें लोड करके.
- अडैप्टिव स्ट्रीमिंग वह जगह है जहां मीडिया हिस्सों को कई बिटरेट और सबसे अच्छी क्वालिटी वाला मीडिया कॉन्टेंट, जो क्लाइंट की ज़रूरतों के हिसाब से सही हो मौजूदा बैंडविथ को मीडिया प्लेयर में वापस भेजा जाता है.
- लाइव ब्रॉडकास्ट वह जगह है जहां मीडिया हिस्सों को कोड में बदला जाता है और रीयल टाइम में होता है.
- मीडिया में शामिल करना वह जगह है जहां विज्ञापन जैसे दूसरे मीडिया डाले जाते हैं ऐसी स्ट्रीम जिसमें प्लेयर को मीडिया सोर्स बदलने की ज़रूरत न पड़े.
स्ट्रीमिंग प्रोटोकॉल
वेब पर, सबसे ज़्यादा इस्तेमाल किए जाने वाले दो स्ट्रीमिंग प्रोटोकॉल डाइनैमिक हैं अडैप्टिव स्ट्रीमिंग ओवर एचटीटीपी (DASH) और HTTP लाइव स्ट्रीमिंग (HLS). इन प्रोटोकॉल के साथ काम करने वाले प्लेयर, जनरेट की गई मेनिफ़ेस्ट फ़ाइल फ़ेच करेंगे, तय करें कि कौनसे मीडिया हिस्सों का अनुरोध करना है और फिर उन्हें एक साथ मिलाना चाहिए. मीडिया अनुभव.
कोई स्ट्रीम चलाने के लिए <video> का इस्तेमाल किया जा रहा है
कई ब्राउज़र पर आपकी स्ट्रीम, मूल रूप से नहीं चलेगी. हालांकि, कुछ
एचएलएस वीडियो चलाने के लिए नेटिव, ब्राउज़र आम तौर पर नेटिव डैश के साथ काम नहीं करते
प्लेबैक स्ट्रीम करता है. इसका मतलब है कि अक्सर <source> को बताना काफ़ी नहीं होता है
किसी मेनिफ़ेस्ट फ़ाइल में जोड़ने के लिए, <video> एलिमेंट का इस्तेमाल करें.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
असल में, असल में आपको जिस चीज़ की कमी महसूस हो सकती है वह असल में छिपी हुई ताकत होती है. स्ट्रीम हैं पावरफ़ुल और स्ट्रीम का इस्तेमाल करने वाले ऐप्लिकेशन की ज़रूरतें अलग-अलग होती हैं.
मेनिफ़ेस्ट फ़ाइलें आम तौर पर सिंगल मीडिया के कई वैरिएंट के बारे में बताती हैं. अलग सोचें बिटरेट, कई ऑडियो ट्रैक, और यहां तक कि अलग-अलग फ़ॉर्मैट के बारे में ज़्यादा जानें.
ऐसा हो सकता है कि कुछ ऐप्लिकेशन, बफ़र में वीडियो के बड़े हिस्से को रखना चाहें, अन्य लोग अगले कुछ सेकंड के वीडियो को प्रीफ़ेच कर सकते हैं एपिसोड है और कुछ लोग अडैप्टिव स्ट्रीमिंग के लिए अपने लॉजिक लागू करना चाहते हैं. यही वह जगह है जहां आप ब्राउज़र में किसी तरह की सुविधा चाहते हैं जनरेट करने के लिए भी बनाया जा सकता है.
मीडिया स्रोत एक्सटेंशन
हालांकि, अच्छी बात यह है कि W3C ने मीडिया सोर्स एक्सटेंशन (MSE) नाम के बारे में बताया है
जिसकी मदद से JavaScript हमारी मीडिया स्ट्रीम जनरेट करेगा. कम शब्दों में कहें, तो MSE आपको
डेवलपर को MediaSource ऑब्जेक्ट को <video> एलिमेंट में अटैच करना होगा और
यह आपके वीडियो से जुड़े बफ़र में मौजूद मीडिया डेटा को फिर से चालू करता है
MediaSource इंस्टेंस.
बुनियादी उदाहरण
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
ऊपर दिए गए आसान उदाहरण में कुछ बातें बताई गई हैं:
<video>के हिसाब से, इसे किसी यूआरएल से मीडिया डेटा मिल रहा है.- जनरेट किया गया यूआरएल,
MediaSourceइंस्टेंस का सिर्फ़ पॉइंटर है. MediaSourceइंस्टेंस एक या उससे ज़्यादाSourceBufferइंस्टेंस बनाता है.- इसके बाद हम सिर्फ़ बाइनरी मीडिया डेटा को बफ़र में जोड़ते हैं, उदाहरण के लिए
fetchका इस्तेमाल करके.
हालांकि, ये बुनियादी सिद्धांत बहुत आसान हैं. हालांकि, इसे लिखना मुमकिन है आम तौर पर, डैश और एचएलएस के साथ काम करने वाला वीडियो प्लेयर, ज़्यादातर लोग नए सिरे से चुनते हैं ऐप्लिकेशन इस्तेमाल कर रहे हैं, जो पहले से मौजूद हैं. जैसे, Shaka Player, JW Player या Video.js का नाम डालें.
हालांकि, हमने Kino नाम का एक डेमो मीडिया पीडब्ल्यूए बनाया है. इसमें बताया गया है कि
आपको ऐसी बुनियादी स्ट्रीमिंग मीडिया वेबसाइट डेवलप करनी होगी जो
सिर्फ़ सामान्य <video> एलिमेंट का इस्तेमाल करके, ऑफ़लाइन मीडिया चलाने की सुविधा. ऐसी योजनाएं हैं
हम फ़्रेमवर्क और डिजिटल राइट मैनेजमेंट में मदद करने के साथ-साथ,
सुविधाएँ. इसलिए, समय-समय पर अपडेट देखते रहें या किसी सुविधा का अनुरोध करें.
इसके बारे में ज़्यादा जानने के लिए, ऑफ़लाइन स्ट्रीमिंग के साथ पीडब्ल्यूए लेख में जाएं.
मीडिया हिस्से का फ़ॉर्मैट
लंबे समय तक, DASH और HLS को अलग-अलग कोड में एन्कोड करने के लिए मीडिया हिस्से की ज़रूरत होती थी फ़ॉर्मैट के बारे में ज़्यादा जानें. हालांकि, साल 2016 में फ़्रैगमेंट की गई MP4 (fMP4) फ़ाइलें इस्तेमाल की जा सकती थीं को HLS में जोड़ा गया. यह ऐसा फ़ॉर्मैट है जो DASH में भी काम करता है.
fMP4 कंटेनर और H.264 कोडेक का इस्तेमाल करने वाले वीडियो के हिस्से इस्तेमाल किए जा सकते हैं
दोनों प्रोटोकॉल से और बड़ी संख्या में खिलाड़ियों
के लिए उपलब्ध है. इससे आपको
क्रिएटर्स अपने वीडियो को सिर्फ़ एक बार एन्कोड करना चाहते हैं. इससे समय बचता है
डिस्क में कम जगह है.
बेहतर क्वालिटी और फ़ाइलों का कम साइज़ पाने के लिए,
बेहतर फ़ॉर्मैट का इस्तेमाल करके, मीडिया हिस्से के कई सेट को कोड में बदलें. जैसे, VP9,
हालांकि, आगे बढ़ने से पहले आपको यह समझना होगा कि
वेब के लिए मीडिया फ़ाइलें तैयार करें और इसके बाद आगे बढ़ें.