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