लीनियर डीएआई स्ट्रीम में, तय समय के मेटाडेटा को मैनेज करना

इंटरैक्टिव मीडिया विज्ञापन (IMA) डाइनैमिक विज्ञापन इंसर्शन (डीएआई) SDK टूल, दर्शकों की पोज़िशन और क्लाइंट-साइड विज्ञापन इवेंट को ट्रैक करने के लिए, स्ट्रीम के मीडिया सेगमेंट (इन-बैंड मेटाडेटा) या स्ट्रीमिंग मेनिफ़ेस्ट फ़ाइल (इन-मेनिफ़ेस्ट मेटाडेटा) में एम्बेड किए गए मेटाडेटा की जानकारी पर निर्भर करता है. मेटाडेटा को अलग-अलग फ़ॉर्मैट में भेजा जाता है. यह इस बात पर निर्भर करता है कि कौनसी स्ट्रीम चल रही है.

वीडियो प्लेयर को समय के हिसाब से मेटाडेटा, एक साथ कई हिस्सों में मिलता है. प्लेयर के हिसाब से, मेटाडेटा को शेड्यूल किए गए समय पर या एक साथ कई वीडियो के लिए दिखाया जा सकता है. हर मेटाडेटा स्ट्रिंग के लिए, प्रज़ेंटेशन टाइमस्टैंप (पीटीएस) सेट किया जाता है. इससे यह तय होता है कि उसे कब ट्रिगर किया जाए.

आपका ऐप्लिकेशन, मेटाडेटा कैप्चर करने और उसे IMA DAI SDK टूल को फ़ॉरवर्ड करने के लिए ज़िम्मेदार है. SDK टूल, इस जानकारी को पास करने के लिए ये तरीके उपलब्ध कराता है:

onTimedMetadata

यह तरीका, प्रोसेस करने के लिए तैयार मेटाडेटा स्ट्रिंग को SDK को भेजता है. इसमें एक आर्ग्युमेंट होता है:

• metadata: ऐसा ऑब्जेक्ट जिसमें TXXX की एक कुंजी होती है. साथ ही, उससे जुड़ी स्ट्रिंग वैल्यू होती है, जिसका प्रीफ़िक्स google_ होता है.

processMetadata

यह तरीका, तय पीटीएस के बाद एसडीके से प्रोसेस किए जाने के लिए, मेटाडेटा स्ट्रिंग को शेड्यूल करता है. इसमें ये आर्ग्युमेंट इस्तेमाल किए जाते हैं:

• type: एक स्ट्रिंग, जिसमें प्रोसेस किए जा रहे इवेंट का टाइप शामिल होता है. स्वीकार की जाने वाली वैल्यू, एचएलएस के लिए ID3 या डीएश के लिए urn:google:dai:2018 हैं
• data: google_ से शुरू होने वाली स्ट्रिंग वैल्यू या इस फ़ॉर्मैट का पालन करने वाला बाइट कलेक्शनID3:u\0004u\000u\000u\0000TXXXu\0004u\000u\000u\0000google_xxxxxxxx.
• timestamp: सेकंड में वह टाइमस्टैंप जब डेटा को प्रोसेस किया जाना चाहिए.

IMA DAI SDK के साथ काम करने वाली हर स्ट्रीम टाइप, टाइम किए गए मेटाडेटा के एक यूनीक फ़ॉर्म का इस्तेमाल करती है. इस बारे में नीचे दिए गए सेक्शन में बताया गया है.

एचएलएस MPEG2TS स्ट्रीम

MPEG2TS सेगमेंट का इस्तेमाल करने वाली लीनियर डीएआई एचएलएस स्ट्रीम, इन-बैंड आईडी3 टैग की मदद से, वीडियो प्लेयर को समय के हिसाब से मेटाडेटा भेजती हैं. ये आईडी3 टैग, MPEG2TS सेगमेंट में एम्बेड किए जाते हैं. साथ ही, इन्हें उपयोगकर्ता के तय किए गए पसंद के मुताबिक टेक्स्ट कॉन्टेंट के लिए, TXXX फ़ील्ड का नाम दिया जाता है.

Safari में वीडियो चलाना

Safari, छिपे हुए ट्रैक के तौर पर आईडी3 टैग को अपने-आप प्रोसेस करता है, ताकि मेटाडेटा के हर हिस्से को प्रोसेस करने के लिए, क्यूचेंज इवेंट सही समय पर ट्रिगर हो सकें. IMA DAI SDK टूल को सभी मेटाडेटा भेजे जा सकते हैं. भले ही, कॉन्टेंट या टाइप कुछ भी हो. काम का न होने वाला मेटाडेटा अपने-आप फ़िल्टर हो जाता है.

यहां एक उदाहरण दिया गया है:

videoElement.textTracks.addEventListener('addtrack', (e) => {
  const track = e.track;
  if (track.kind === 'metadata') {
    track.mode = 'hidden';
    track.addEventListener('cuechange', () => {
      for (const cue of track.activeCues) {
        const metadata = {};
        metadata[cue.value.key] = cue.value.data;
        streamManager.onTimedMetadata(metadata);
      }
    });
  }
});
...

HLS.js

HLS.js, FRAG_PARSING_METADATA इवेंट के ज़रिए सैंपल के कलेक्शन के तौर पर, बड़ी संख्या में ID3 टैग उपलब्ध कराता है. HLS.js, ID3 डेटा को बाइट ऐरे से स्ट्रिंग में बदलता नहीं है. साथ ही, इवेंट को उनके पीटीएस पर ऑफ़सेट नहीं करता. सैंपल डेटा को बाइट कलेक्शन से स्ट्रिंग में डिकोड करने या काम के नहीं

यहां एक उदाहरण दिया गया है:

hls.on(Hls.Events.FRAG_PARSING_METADATA, (e, data) => {
  if (streamManager && data) {
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
});
...

एचएलएस CMAF स्ट्रीम

कॉमन मीडिया ऐप्लिकेशन फ़्रेमवर्क (सीएमएएफ़) का इस्तेमाल करने वाली लीनियर डीएआई एचएलएस स्ट्रीम, सीएमएएफ़ के ज़रिए आईडी3 स्टैंडर्ड का पालन करते हुए, इन-बैंड eMSGv1 बॉक्स के ज़रिए टाइम मेटाडेटा पास करती हैं. ये ईएमएसजी बॉक्स, हर मीडिया सेगमेंट की शुरुआत में एम्बेड किए जाते हैं. हर आईडी3 ईएमएसजी में, स्ट्रीम में पिछली बार रुकावट आने के बाद से अब तक का पीटीएस होता है.

HLS.js के 1.2.0 रिलीज़ के बाद, सुझाए गए दोनों प्लेयर, CMAF के ज़रिए ID3 को उपयोगकर्ता को वैसे ही पास करते हैं जैसे वे ID3 टैग हों. इस वजह से, यहां दिए गए उदाहरण, एचएलएस MPEG2TS स्ट्रीम के जैसे ही हैं. हालांकि, ऐसा हो सकता है कि सभी प्लेयर के लिए ऐसा न हो. इसलिए, एचएलएस सीएमएफ़ स्ट्रीम के लिए सहायता लागू करने के लिए, eMSG के ज़रिए आईडी3 को पार्स करने के लिए यूनीक कोड की ज़रूरत पड़ सकती है.

Safari में वीडियो चलाना

Safari, eMSG मेटाडेटा के ज़रिए ID3 को स्यूडो ID3 इवेंट के तौर पर इस्तेमाल करता है. साथ ही, इन्हें अपने-आप एक बैच में, छिपे हुए ट्रैक के तौर पर उपलब्ध कराता है. इससे, मेटाडेटा के हर हिस्से को प्रोसेस करने के लिए, cuechange इवेंट सही समय पर ट्रिगर होते हैं. IMA DAI SDK टूल को सारा मेटाडेटा भेजा जा सकता है. भले ही, वह समय के हिसाब से काम का हो या नहीं. डीएआई से जुड़ा न होने वाला कोई भी मेटाडेटा, अपने-आप फ़िल्टर हो जाता है.

यहां एक उदाहरण दिया गया है:

videoElement.textTracks.addEventListener('addtrack', (e) => {
  const track = e.track;
  if (track.kind === 'metadata') {
    track.mode = 'hidden';
    track.addEventListener('cuechange', () => {
      for (const cue of track.activeCues) {
        const metadata = {};
        metadata[cue.value.key] = cue.value.data;
        streamManager.onTimedMetadata(metadata);
      }
    });
  }
});
...

HLS.js

1.2.0 वर्शन के बाद, HLS.js, eMSG मेटाडेटा की मदद से ID3 को स्यूडो ID3 इवेंट के तौर पर इस्तेमाल करता है. साथ ही, FRAG_PARSING_METADATA इवेंट की मदद से, सैंपल के कलेक्शन के तौर पर उन्हें एक साथ उपलब्ध कराता है. HLS.js, ID3 डेटा को बाइट ऐरे से स्ट्रिंग में बदलता नहीं है. साथ ही, इवेंट को उनके पीटीएस पर ऑफ़सेट नहीं करता. सैंपल डेटा को बाइट कलेक्शन से स्ट्रिंग में डिकोड करने की ज़रूरत नहीं है, क्योंकि IMA DAI SDK टूल यह डिकोडिंग अपने-आप करता है.

यहां एक उदाहरण दिया गया है:

hls.on(Hls.Events.FRAG_PARSING_METADATA, (e, data) => {
  if (streamManager && data) {
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
});
...

DASH स्ट्रीम

लीनियर डीएआई डैश स्ट्रीम, इवेंट स्ट्रीम में मेटाडेटा को मेनिफ़ेस्ट इवेंट के तौर पर पास करती हैं. साथ ही, इसमें कस्टम schemeIdUri वैल्यू urn:google:dai:2018 भी होती है. इन स्ट्रीम में मौजूद हर इवेंट में एक टेक्स्ट पेलोड और पीटीएस होता है.

DASH.js

Dash.js, हर इवेंट स्ट्रीम के schemeIdUri की वैल्यू के नाम पर कस्टम इवेंट हैंडलर उपलब्ध कराता है. ये कस्टम हैंडलर एक साथ ट्रिगर होते हैं. इसलिए, इवेंट के लिए सही समय तय करने के लिए, पीटीएस वैल्यू को प्रोसेस करना आपके ऊपर है. IMA डीएआई SDK टूल, processMetadata() के streamManager तरीके की मदद से, यह काम आपके लिए कर सकता है.

यहां एक उदाहरण दिया गया है:

const dash = dashjs.MediaPlayer().create();
dash.on('urn:google:dai:2018', (payload) => {
  const mediaId = payload.event.messageData;
  const pts = payload.event.calculatedPresentationTime;
  streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
});
...

Shaka Player

Shaka Player, timelineregionenter इवेंट के हिस्से के तौर पर इवेंट दिखाता है. Shaka Player के साथ फ़ॉर्मैट के काम न करने की वजह से, मेटाडेटा की वैल्यू को 'जानकारी' प्रॉपर्टी eventNode.attributes['messageData'] के ज़रिए रॉ तौर पर वापस पाना ज़रूरी है.

यहां एक उदाहरण दिया गया है:

player.addEventListener('timelineregionenter', function(event) {
  const detail = event.detail;
  if ( detail.eventNode.attributes &&
       detail.eventNode.attributes['messageData']) {
    const mediaId = detail.eventNode.attributes['messageData'];
    const pts = detail.startTime;
    streamManager.processMetadata("urn:google:dai:2018", mediaId, pts);
  }
});
...

पॉड में दिखाना

पॉड की सेवा देने के लिए, समय के हिसाब से मेटाडेटा भेजने के लिए अलग-अलग कॉन्फ़िगरेशन होते हैं. ये कॉन्फ़िगरेशन, इन शर्तों के आधार पर तय किए जाते हैं:

• लाइव या वीओडी स्ट्रीम का टाइप
• एचएलएस या डैश स्ट्रीम फ़ॉर्मैट
• इस्तेमाल किया जा रहा प्लेयर टाइप
• इस्तेमाल किया जा रहा डीआई बैकएंड टाइप

एचएलएस स्ट्रीम फ़ॉर्मैट (लाइव और वीओडी स्ट्रीम, HLS.js प्लेयर)

अगर HLS.js प्लेयर का इस्तेमाल किया जा रहा है, तो ID3 मेटाडेटा पाने के लिए HLS.js FRAG_PARSING_METADATA इवेंट को सुनें और उसे StreamManager.processMetadata() के साथ SDK टूल को पास करें.

वीडियो लोड होने और तैयार होने के बाद, उसे अपने-आप चलाने के लिए, HLS.js MANIFEST_PARSED इवेंट को सुनें. इससे वीडियो चलाने की प्रोसेस शुरू हो जाएगी.

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(event, data) {
  if (streamManager && data) {
    // For each ID3 tag in the metadata, pass in the type - ID3, the
    // tag data (a byte array), and the presentation timestamp (PTS).
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (DASH स्ट्रीम का फ़ॉर्मैट, लाइव और वीओडी स्ट्रीम का टाइप)

अगर DASH.js प्लेयर का इस्तेमाल किया जा रहा है, तो लाइव या वीओडी स्ट्रीम के लिए ID3 मेटाडेटा को सुनने के लिए, आपको अलग-अलग स्ट्रिंग का इस्तेमाल करना होगा:

• लाइव स्ट्रीम: 'https://developer.apple.com/streaming/emsg-id3'
• वीओडी स्ट्रीम: 'urn:google:dai:2018'

StreamManager.processMetadata() की मदद से, SDK टूल को ID3 मेटाडेटा पास करें.

वीडियो के सभी कॉन्टेंट के लोड होने और तैयार होने के बाद, वीडियो के कंट्रोल अपने-आप दिखाने के लिए, DASH.js MANIFEST_LOADED इवेंट को सुनें.

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

लाइव स्ट्रीम के साथ Shaka Player (DASH स्ट्रीम फ़ॉर्मैट)

अगर लाइव स्ट्रीम चलाने के लिए Shaka प्लेयर का इस्तेमाल किया जा रहा है, तो मेटाडेटा इवेंट सुनने के लिए स्ट्रिंग 'emsg' का इस्तेमाल करें. इसके बाद, StreamManager.onTimedMetadata() को कॉल करने के लिए, इवेंट मैसेज के डेटा का इस्तेमाल करें.

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

वीओडी स्ट्रीम (DASH स्ट्रीम फ़ॉर्मैट) वाला Shaka Player

अगर वीओडी स्ट्रीम चलाने के लिए Shaka प्लेयर का इस्तेमाल किया जा रहा है, तो मेटाडेटा इवेंट सुनने के लिए 'timelineregionenter' स्ट्रिंग का इस्तेमाल करें. इसके बाद, 'urn:google:dai:2018' स्ट्रिंग के साथ StreamManager.processMetadata() के लिए, अपने कॉल में इवेंट मैसेज डेटा का इस्तेमाल करें.

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}