समय के मेटाडेटा को हैंडल करना

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

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

मेटाडेटा कैप्चर करने और उसे IMA DAI 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 के साथ काम करने वाले हर स्ट्रीम टाइप में, टाइम के हिसाब से मेटाडेटा का इस्तेमाल किया जाता है. इसके बारे में यहां बताया गया है.

HLS MPEG2TS स्ट्रीम

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

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

Safari, 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

HLS.js, FRAG_PARSING_METADATA इवेंट के ज़रिए आईडी3 टैग को बैच में उपलब्ध कराता है. ये टैग, सैंपल के कलेक्शन के तौर पर उपलब्ध होते हैं. HLS.js, बाइट ऐरे से ID3 डेटा को स्ट्रिंग में नहीं बदलता. साथ ही, इवेंट को उनके पीटीएस के हिसाब से ऑफ़सेट नहीं करता. सेंपल डेटा को बाइट ऐरे से स्ट्रिंग में डिकोड करना या काम के न होने वाले 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);
    });
  }
});
...

एचएलएस सीएमएएफ़ स्ट्रीम

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

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

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

Safari, eMSG मेटाडेटा के ज़रिए आईडी3 को छद्म आईडी3 इवेंट के तौर पर मानता है. यह उन्हें बैच में, अपने-आप, और छिपे हुए ट्रैक के तौर पर उपलब्ध कराता है. इससे cuechange इवेंट सही समय पर ट्रिगर होते हैं, ताकि मेटाडेटा के हर हिस्से को प्रोसेस किया जा सके. आईएमए डीएआई 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 मेटाडेटा के ज़रिए आईडी3 को छद्म आईडी3 इवेंट के तौर पर मानता है. साथ ही, उन्हें 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 DAI SDK, streamManager तरीके का इस्तेमाल करके, processMetadata() इस काम को आपके लिए कर सकता है.

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

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);
  }
});
...

पॉड सर्विंग

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

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

एचएलएस स्ट्रीम का फ़ॉर्मैट (लाइव और वीओडी स्ट्रीम, 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() की मदद से, आईडी3 मेटाडेटा को एसडीके पर पास करें.

सभी चीज़ें लोड होने और तैयार होने के बाद, वीडियो कंट्रोल अपने-आप दिखने लगें, इसके लिए 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 player का इस्तेमाल किया जा रहा है, तो मेटाडेटा इवेंट सुनने के लिए '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});
}

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

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

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);
       }
}