एचटीएमएल ऑडियो और वीडियो एलिमेंट की मदद से, मीडिया को लोड, डिकोड, और चलाया जा सकता है. इसके लिए, आपको सिर्फ़ src यूआरएल देना होगा:
<video src='foo.webm'></video>
यह सामान्य इस्तेमाल के उदाहरणों में अच्छी तरह से काम करता है. हालांकि, अडैप्टिव स्ट्रीमिंग जैसी तकनीकों के लिए, मीडिया सोर्स एक्सटेंशन एपीआई (एमएसई) ज़्यादा कंट्रोल देता है. एमएसई की मदद से, ऑडियो या वीडियो के सेगमेंट से JavaScript में स्ट्रीम बनाई जा सकती हैं.
एमएसई को simpl.info/mse पर आज़माया जा सकता है:
नीचे दिया गया कोड उस उदाहरण से लिया गया है.
MediaSource, किसी ऑडियो या वीडियो एलिमेंट के लिए मीडिया के सोर्स को दिखाता है. MediaSource ऑब्जेक्ट का इंस्टैंश बनने और उसका open इवेंट ट्रिगर होने के बाद, उसमें SourceBuffer जोड़े जा सकते हैं. ये मीडिया सेगमेंट के लिए बफ़र के तौर पर काम करते हैं:
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
मीडिया सेगमेंट को ऑडियो या वीडियो एलिमेंट में 'स्ट्रीम' किया जाता है. इसके लिए, हर सेगमेंट को appendBuffer() के साथ SourceBuffer में जोड़ा जाता है. इस उदाहरण में, वीडियो को सर्वर से फ़ेच किया जाता है. इसके बाद, File API का इस्तेमाल करके उसे सेव किया जाता है:
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
गाने चलाने का क्रम सेट करना
Chrome 50 में SourceBuffer mode एट्रिब्यूट के लिए अतिरिक्त सहायता जोड़ी गई है. इससे, यह तय किया जा सकता है कि मीडिया सेगमेंट को उसी क्रम में चलाया जाए जिस क्रम में उन्हें जोड़ा गया था. भले ही, शुरुआत में मीडिया सेगमेंट के टाइमस्टैंप अलग-अलग हों.
मीडिया सेगमेंट के लिए, वीडियो चलाने का क्रम तय करने के लिए mode एट्रिब्यूट का इस्तेमाल करें. इसकी दो वैल्यू में से कोई एक हो सकती है:
- सेगमेंट: हर सेगमेंट के टाइमस्टैंप (
timestampOffsetसे बदला जा सकता है) से, वीडियो चलाने का क्रम तय होता है. भले ही, सेगमेंट को जोड़ने का क्रम कुछ भी हो. - sequence: मीडिया टाइमलाइन में बफ़र किए गए सेगमेंट का क्रम,
SourceBufferमें सेगमेंट जोड़ने के क्रम से तय होता है.
अगर मीडिया सेगमेंट को SourceBuffer में जोड़ने के बाद, उनके टाइमस्टैंप को बाइट स्ट्रीम डेटा से पार्स किया जाता है, तो SourceBuffer की mode प्रॉपर्टी को सेगमेंट पर सेट कर दिया जाएगा. ऐसा न करने पर, mode को sequence पर सेट कर दिया जाएगा. ध्यान दें कि टाइमस्टैंप देना ज़रूरी है: ज़्यादातर स्ट्रीम टाइप के लिए, टाइमस्टैंप देना ज़रूरी है. हालांकि, अन्य स्ट्रीम टाइप के लिए टाइमस्टैंप नहीं दिए जा सकते: इनबैंड टाइमस्टैंप, उन स्ट्रीम टाइप के लिए होते हैं जिनमें ये शामिल होते हैं.
mode एट्रिब्यूट की वैल्यू देना ज़रूरी नहीं है. जिन स्ट्रीम में टाइमस्टैंप (ऑडियो/एमपीईजी और ऑडियो/एसीए) नहीं होते उनके लिए, mode को सिर्फ़ सेगमेंट से क्रम में बदला जा सकता है: mode को क्रम से सेगमेंट में बदलने पर, गड़बड़ी का मैसेज दिखेगा. जिन स्ट्रीम में टाइमस्टैंप होते हैं उनके लिए, सेगमेंट और सीक्वेंस के बीच स्विच किया जा सकता है. हालांकि, ऐसा करने पर शायद ऐसा व्यवहार दिखे जो पसंद न आए, समझने में मुश्किल हो या जिसका अनुमान लगाना मुश्किल हो.
सभी स्ट्रीम टाइप के लिए, वैल्यू को सेगमेंट से सीक्वेंस में बदला जा सकता है. इसका मतलब है कि सेगमेंट उसी क्रम में चलाए जाएंगे जिस क्रम में उन्हें जोड़ा गया था. साथ ही, उनके हिसाब से नए टाइमस्टैंप जनरेट किए जाएंगे:
sourceBuffer.mode = 'sequence';
mode वैल्यू को सीक्वेंस पर सेट करने से, मीडिया सेगमेंट के टाइमस्टैंप के बीच का अंतर नहीं पड़ता. इससे मीडिया लगातार चलता रहता है. उदाहरण के लिए, अगर वीडियो म्यूक्स करने में समस्याएं आ रही हैं या किसी भी वजह से, बीच में सेगमेंट जोड़े गए हैं. अगर स्ट्रीम का सही मेटाडेटा उपलब्ध है, तो ऐप्लिकेशन timestampOffset की मदद से पॉलीफ़िल कर सकता है, ताकि वीडियो लगातार चलता रहे. हालांकि, सीक्वेंस मोड से यह प्रोसेस आसान हो जाती है और गड़बड़ी होने की संभावना कम हो जाती है.
MSE ऐप्लिकेशन और डेमो
इनमें एमएसई को काम करते हुए दिखाया गया है, लेकिन SourceBuffer.mode में बदलाव किए बिना:
- Media Source API
- Shaka Player: वीडियो प्लेयर का डेमो, जो Shaka JavaScript लाइब्रेरी के साथ DASH लागू करने के लिए एमएसई का इस्तेमाल करता है
ब्राउज़र समर्थन
- Chrome 50 और उसके बाद के वर्शन पर डिफ़ॉल्ट रूप से
- Firefox के लिए, ज़्यादा जानकारी के लिए MDN देखें