मीडिया सोर्स एपीआई - यह पक्का करें कि मीडिया सेगमेंट को जोड़ने के क्रम में, बिना किसी रुकावट के वीडियो चलाया जा सके

एचटीएमएल ऑडियो और वीडियो एलिमेंट से, आपको बस एक src यूआरएल देकर, मीडिया को लोड करने, डिकोड करने, और चलाने की सुविधा मिलती है:

    <video src='foo.webm'></video>

यह इस्तेमाल के आसान मामलों में अच्छी तरह से काम करता है, लेकिन अडैप्टिव स्ट्रीमिंग जैसी तकनीकों के लिए, Media Source Extension API (MSE) से ज़्यादा कंट्रोल दिया जा सकता है. MSE से स्ट्रीम को ऑडियो या वीडियो के सेगमेंट की मदद से JavaScript में बनाया जा सकता है.

MSE को SIMpl.info/mse पर जाकर आज़माया जा सकता है:

MSE API का इस्तेमाल करके चलाए गए वीडियो का स्क्रीनशॉट.

नीचे दिया गया कोड उसी उदाहरण से लिया गया है.

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 में बदलाव नहीं किया गया है:

ब्राउज़र समर्थन

  • डिफ़ॉल्ट रूप से, Chrome 50 और उसके बाद का वर्शन
  • Firefox के लिए, जानकारी के लिए MDN देखें

खास जानकारी

एपीआई की जानकारी