টাইমড মেটাডেটা ম্যানেজ করা

ইন্টার‍্যাক্টিভ মিডিয়া বিজ্ঞাপন (IMA) ডায়নামিক বিজ্ঞাপন ইনসার্শন (DAI) SDK, স্ট্রিমের মিডিয়া সেগমেন্টে (ইন-ব্যান্ড মেটাডেটা) বা স্ট্রিমিং ম্যানিফেস্ট ফাইলে (ইন-ম্যানিফেস্ট মেটাডেটা) এম্বেড করা মেটাডেটা তথ্যের উপর নির্ভর করে দর্শকদের পজিশন ও ক্লায়েন্ট-সাইড বিজ্ঞাপন ইভেন্ট ট্র্যাক করে। যে ধরনের স্ট্রিম চালানো হচ্ছে তার উপর নির্ভর করে, মেটাডেটা বিভিন্ন ফর্ম্যাটে পাঠানো হয়।

ভিডিও প্লেয়ার ব্যাচে টাইমড মেটাডেটা পায়। প্লেয়ারের উপর নির্ভর করে, শিডিউল করা সময়ে বা ব্যাচে মেটাডেটা দেখানো হতে পারে। প্রতিটি মেটাডেটা স্ট্রিংয়ের সাথে একটি প্রেজেন্টেশন টাইমস্ট্যাম্প (PTS) থাকে যা থেকে বোঝা যায় যে কখন এটি ট্রিগার করা উচিত।

আপনার অ্যাপ মেটাডেটা ক্যাপচার করে IMA DAI SDK-তে ফরওয়ার্ড করার জন্য দায়বদ্ধ। এই তথ্য পাস করার জন্য SDK নিম্নলিখিত পদ্ধতি অফার করে:

onTimedMetadata

এই পদ্ধতি মেটাডেটা স্ট্রিং ফরওয়ার্ড করে যা SDK-তে প্রসেস করার জন্য প্রস্তুত। এটি একটি আর্গুমেন্ট নেয়:

• metadata: একটি অবজেক্ট যাতে TXXX-এর কী আছে এবং তার সাথে যুক্ত স্ট্রিং ভ্যালু আছে যার আগে google_ আছে।

processMetadata

এই পদ্ধতিটি নির্দিষ্ট PTS-এর পরে SDK দ্বারা প্রসেস করার জন্য মেটাডেটা স্ট্রিং শিডিউল করে। এটি নিম্নলিখিত আর্গুমেন্ট নেয়:

• type: প্রসেস করা হচ্ছে এমন ইভেন্টের ধরন সহ স্ট্রিং। গ্রহণযোগ্য মান হল HLS-এর জন্য ID3 বা DASH-এর জন্য urn:google:dai:2018
• data: হয় google_ প্রিফিক্স সহ স্ট্রিং ভ্যালু অথবা এই ফর্ম্যাট অনুসরণ করে এমন বাইট অ্যারে ID3:u\0004u\000u\000u\0000TXXXu\0004u\000u\000u\0000google_xxxxxxxx।
• timestamp: ডেটা প্রসেস করার সময় সেকেন্ডে টাইমস্ট্যাম্প।

IMA DAI SDK-এর সাথে কাজ করে এমন প্রতিটি স্ট্রিমের ধরন অনন্য ফর্মের টাইমড মেটাডেটা ব্যবহার করে, যা নিম্নলিখিত বিভাগে বর্ণনা করা হয়েছে।

HLS MPEG2TS স্ট্রিম

MPEG2TS সেগমেন্ট ব্যবহার করে লিনিয়ার DAI HLS স্ট্রিম ইন-ব্যান্ড ID3 ট্যাগের মাধ্যমে ভিডিও প্লেয়ারে টাইমড মেটাডেটা পাস করে। এই ID3 ট্যাগগুলি 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 ইভেন্টের মাধ্যমে ব্যাচে ID3 ট্যাগ প্রদান করে, স্যাম্পেলের অ্যারে হিসেবে। HLS.js বাইট অ্যারে থেকে স্ট্রিংয়ে ID3 ডেটা অনুবাদ করে না এবং সংশ্লিষ্ট PTS-এ ইভেন্ট অফসেট করে না। বাইট অ্যারে থেকে স্ট্রিংয়ে স্যাম্পেল ডেটা ডিকোড করা বা অপ্রাসঙ্গিক 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);
    });
  }
});
...

HLS CMAF স্ট্রিম

কমন মিডিয়া অ্যাপ্লিকেশন ফ্রেমওয়ার্ক (CMAF) ব্যবহার করে লিনিয়ার DAI HLS স্ট্রিম, CMAF-এর মাধ্যমে ID3 স্ট্যান্ডার্ড অনুসরণ করে ইন-ব্যান্ড eMSGv1 বক্সের মাধ্যমে টাইমড মেটাডেটা পাস করে। এই eMSG বক্সগুলি প্রতিটি মিডিয়া সেগমেন্টের শুরুতে এম্বেড করা হয়, প্রতিটি ID3 eMSG-তে স্ট্রিমে শেষ ডিসকন্টিনিউইটির সাথে সম্পর্কিত একটি PTS থাকে।

HLS.js-এর 1.2.0 রিলিজ অনুযায়ী, আমাদের সাজেস্ট করা দুটি প্লেয়ারই CMAF-এর মাধ্যমে ব্যবহারকারীকে ID3 ট্যাগ হিসেবে ID3 পাস করে। এই কারণে, নিম্নলিখিত উদাহরণগুলি HLS MPEG2TS স্ট্রিমের মতোই। তবে, সব প্লেয়ারের ক্ষেত্রে এটি নাও হতে পারে, তাই HLS CMAF স্ট্রিমের জন্য সহায়তা প্রয়োগ করতে eMSG-এর মাধ্যমে ID3 পার্স করার জন্য অনন্য কোডের প্রয়োজন হতে পারে।

Safari-তে প্লেব্যাক

Safari, eMSG মেটাডেটার মাধ্যমে ID3-কে ছদ্ম ID3 ইভেন্ট হিসেবে বিবেচনা করে, সেগুলিকে ব্যাচে, অটোমেটিক, একটি লুকানো ট্র্যাক হিসাবে প্রদান করে, যাতে cuechange ইভেন্টগুলি মেটাডেটার প্রতিটি অংশ প্রসেস করার জন্য সঠিক সময়ে ফায়ার করা হয়। IMA DAI SDK-তে সব মেটাডেটা পাস করা যেতে পারে, তা টাইমিংয়ের সাথে প্রাসঙ্গিক হোক বা না হোক। DAI-সম্পর্কিত নয় এমন যেকোনও মেটাডেটা অটোমেটিক ফিল্টার করে বাদ দেওয়া হয়।

একটা উদাহরণ দেওয়া হল:

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 ডেটা স্ট্রিংয়ে অনুবাদ করে না এবং ইভেন্টগুলিকে তাদের সংশ্লিষ্ট PTS-এ অফসেট করে না। বাইট অ্যারে থেকে স্ট্রিংয়ে স্যাম্পেল ডেটা ডিকোড করার প্রয়োজন নেই, কারণ 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 স্ট্রিম

লিনিয়ার DAI DASH স্ট্রিম, কাস্টম schemeIdUri ভ্যালু urn:google:dai:2018 সহ ইভেন্ট স্ট্রিমে ম্যানিফেস্ট ইভেন্ট হিসেবে মেটাডেটা পাস করে। এইসব স্ট্রিমের প্রতিটি ইভেন্টে টেক্সট পেলোড এবং PTS থাকে।

DASH.js

Dash.js প্রতিটি ইভেন্ট স্ট্রিমের schemeIdUri ভ্যালুর নাম অনুসারে কাস্টম ইভেন্ট হ্যান্ডলার প্রদান করে। এই কাস্টম হ্যান্ডলার ব্যাচে ফায়ার করে, ইভেন্টের সঠিক সময় নির্ধারণের জন্য PTS ভ্যালু প্রসেস করার দায়িত্ব আপনার উপর ছেড়ে দেয়। 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);
  }
});
...

পড পরিবেশন করা

পড পরিবেশনের জন্য, নিম্নলিখিত মানদণ্ডের উপর নির্ভর করে টাইমড মেটাডেটা পাস করার জন্য বিভিন্ন কনফিগারেশন রয়েছে:

• লাইভ বা VOD স্ট্রিমের ধরন
• HLS বা DASH স্ট্রিম ফর্ম্যাট
• যে ধরনের প্লেয়ার ব্যবহার করা হচ্ছে
• যে ধরনের DAI ব্যাকএন্ড ব্যবহার করা হচ্ছে

HLS স্ট্রিম ফর্ম্যাট (লাইভ ও VOD স্ট্রিম, 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 স্ট্রিম ফর্ম্যাট, লাইভ ও VOD স্ট্রিমের ধরন)

আপনি DASH.js প্লেয়ার ব্যবহার করলে, লাইভ বা VOD স্ট্রিমের জন্য ID3 মেটাডেটা শুনতে আপনাকে আলাদা স্ট্রিং ব্যবহার করতে হবে:

• লাইভস্ট্রিম: 'https://developer.apple.com/streaming/emsg-id3'
• VOD স্ট্রিম: '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 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});
}

VOD স্ট্রিম সহ Shaka Player (DASH স্ট্রিম ফর্ম্যাট)

VOD স্ট্রিম প্লেব্যাকের জন্য 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);
       }
}