एचटीएमएल ऑडियो और वीडियो एलिमेंट की मदद से, मीडिया को लोड, डिकोड, और चलाया जा सकता है. इसके लिए, आपको सिर्फ़ 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ने बदलाव किया गया है) के हिसाब से वीडियो चलाने का क्रम तय होता है. इस बात से कोई फ़र्क़ नहीं पड़ता कि सेगमेंट किस क्रम में जोड़े गए हैं. - क्रम: मीडिया टाइमलाइन में बफ़र किए गए सेगमेंट का क्रम,
SourceBufferमें सेगमेंट जोड़ने के क्रम से तय होता है.
अगर मीडिया सेगमेंट को SourceBuffer में जोड़ने के बाद, उनके टाइमस्टैंप को बाइट स्ट्रीम डेटा से पार्स किया जाता है, तो SourceBuffer की mode प्रॉपर्टी को सेगमेंट पर सेट कर दिया जाएगा. ऐसा न करने पर, mode को sequence पर सेट कर दिया जाएगा. ध्यान दें कि टाइमस्टैंप देना ज़रूरी है: ज़्यादातर स्ट्रीम टाइप के लिए, टाइमस्टैंप देना ज़रूरी है. हालांकि, अन्य स्ट्रीम टाइप के लिए टाइमस्टैंप नहीं दिए जा सकते: इनबैंड टाइमस्टैंप, उन स्ट्रीम टाइप के लिए ही होते हैं जिनमें ये शामिल होते हैं.
mode एट्रिब्यूट की वैल्यू देना ज़रूरी नहीं है. जिन स्ट्रीम में टाइमस्टैंप (ऑडियो/mpeg और ऑडियो/aac) नहीं हैं उनके लिए mode को सिर्फ़ सेगमेंट से क्रम में बदला जा सकता है: mode को क्रम से सेगमेंट में बदलने की कोशिश करने पर गड़बड़ी दिखेगी. जिन स्ट्रीम में टाइमस्टैंप होते हैं उनके लिए, सेगमेंट और सीक्वेंस के बीच स्विच किया जा सकता है. हालांकि, ऐसा करने पर शायद ऐसा व्यवहार दिखे जो पसंद न आए, समझने में मुश्किल हो या जिसका अनुमान लगाना मुश्किल हो.
हर तरह की स्ट्रीम के लिए, वैल्यू को सेगमेंट से बदलकर क्रम किया जा सकता है. इसका मतलब है कि सेगमेंट उसी क्रम में चलाए जाएंगे जिस क्रम में उन्हें जोड़ा गया था. साथ ही, उनके हिसाब से नए टाइमस्टैंप जनरेट किए जाएंगे:
sourceBuffer.mode = 'sequence';
mode वैल्यू को क्रम पर सेट करने से, मीडिया को लगातार चलाया जाता है. भले ही, मीडिया सेगमेंट के टाइमस्टैंप बंद हों. उदाहरण के लिए, वीडियो की मक्सिंग करने में समस्या होने पर या (किसी भी वजह से) जो सेगमेंट जोड़े नहीं गए हैं. अगर स्ट्रीम का सही मेटाडेटा उपलब्ध है, तो ऐप्लिकेशन के लिए timestampOffset से पॉलीफ़िल किया जा सकता है, ताकि वीडियो को लगातार चलाया जा सके. हालांकि, सीक्वेंस मोड इस प्रोसेस को आसान बनाता है और गड़बड़ी होने की आशंका कम करता है.
MSE ऐप्लिकेशन और डेमो
हालांकि, ये SourceBuffer.mode में बदलाव के बिना भी MSE को काम करते हुए दिखाते हैं:
- Media Source API
- Shaka Player: वीडियो प्लेयर का डेमो, जो Shaka JavaScript लाइब्रेरी के साथ DASH लागू करने के लिए MSE का इस्तेमाल करता है
ब्राउज़र समर्थन
- Chrome 50 और उसके बाद के वर्शन पर डिफ़ॉल्ट रूप से
- Firefox के लिए, ज़्यादा जानकारी के लिए MDN देखें