রৈখিক DAI স্ট্রীমে টাইমড মেটাডেটা পরিচালনা করুন

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

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

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

onTimedMetadata

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

• metadata : একটি বস্তুর সাথে TXXX এর একটি কী যুক্ত একটি সম্পর্কিত স্ট্রিং মান যা google_ দ্বারা উপসর্গযুক্ত।

প্রক্রিয়া মেটাডেটা

এই পদ্ধতিটি নির্দিষ্ট 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 একটি লুকানো ট্র্যাক হিসাবে স্বয়ংক্রিয়ভাবে ID3 ট্যাগগুলিকে প্রক্রিয়া করে, তাই প্রতিটি মেটাডেটা প্রক্রিয়া করার জন্য সঠিক সময়ে কিউচেঞ্জ ইভেন্টগুলি ফায়ার করে৷ বিষয়বস্তু বা প্রকার নির্বিশেষে 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 ইএমএসজি মেটাডেটার মাধ্যমে ID3 কে ছদ্ম ID3 ইভেন্ট হিসাবে বিবেচনা করে, সেগুলিকে ব্যাচে, স্বয়ংক্রিয়ভাবে, একটি লুকানো ট্র্যাক হিসাবে প্রদান করে, যাতে মেটাডেটার প্রতিটি অংশ প্রক্রিয়া করার জন্য সঠিক সময়ে কিউচেঞ্জ ইভেন্টগুলি চালানো হয়। সময়ের সাথে প্রাসঙ্গিক হোক বা না হোক, সমস্ত মেটাডেটা 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 ইএমএসজি মেটাডেটার মাধ্যমে 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);
    });
  }
});
...

ড্যাশ স্ট্রীম

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

DASH.js

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

শাকা প্লেয়ার

শাকা প্লেয়ার তাদের timelineregionenter এন্টার ইভেন্টের অংশ হিসাবে ইভেন্টগুলি দেখায়। শাকা প্লেয়ারের সাথে বিন্যাসের অসঙ্গতির কারণে, মেটাডেটা মানটি অবশ্যই পুনরুদ্ধার করতে হবে, বিস্তারিত সম্পত্তি 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 বা 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);
}

লাইভস্ট্রিম সহ শাকা প্লেয়ার (DASH স্ট্রিম ফর্ম্যাট)

আপনি যদি লাইভস্ট্রিম প্লেব্যাকের জন্য শাকা প্লেয়ার ব্যবহার করেন, তাহলে মেটাডেটা ইভেন্ট শুনতে শুনতে '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 স্ট্রীম সহ শাকা প্লেয়ার (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);
       }
}