इंटरैक्टिव मीडिया विज्ञापन (IMA) डाइनैमिक ऐड इंसर्शन (डीएआई) SDK टूल स्ट्रीम के मीडिया सेगमेंट में एम्बेड की गई मेटाडेटा की जानकारी (इन-बैंड मेटाडेटा), का इस्तेमाल किया जा सकता है. पोज़िशन और क्लाइंट-साइड विज्ञापन इवेंट बनाए जा सकते हैं. मेटाडेटा अलग-अलग फ़ॉर्मैट में भेजा जाता है, चलाई जा रही है.
वीडियो प्लेयर को समय के हिसाब से मेटाडेटा बैच में मिलता है. अलग-अलग प्लेयर के लिए, मेटाडेटा को शेड्यूल किए गए समय पर या बैच में दिखाया जा सकता है. हर मेटाडेटा स्ट्रिंग में इससे जुड़ा प्रज़ेंटेशन टाइमस्टैंप (पीटीएस) होता है. इससे पता चलता है कि यह कब होना चाहिए ट्रिगर किया गया.
मेटाडेटा कैप्चर करके, उसे IMA डीएआई SDK टूल को भेजना आपके ऐप्लिकेशन की ज़िम्मेदारी है. इस जानकारी को भेजने के लिए, SDK टूल ये तरीके उपलब्ध कराता है:
- onTimedMetadata
यह तरीका उन मेटाडेटा स्ट्रिंग को फ़ॉरवर्ड करता है जो प्रोसेस होने के लिए तैयार हैं SDK टूल. इसमें एक तर्क की ज़रूरत होती है:
metadata
: एक ऑब्जेक्ट, जिसमेंTXXX
कुंजी के साथ उससे जुड़ी स्ट्रिंग भी हैgoogle_
के शुरू में लगाई गई वैल्यू.
- processMetadata
यह तरीका, मेटाडेटा स्ट्रिंग को इस शेड्यूल के बाद प्रोसेस करता है कि SDK टूल, बताए गए PTS. इसमें यहां दिए गए आर्ग्युमेंट इस्तेमाल किए जाते हैं:
type
: एक स्ट्रिंग जिसमें प्रोसेस किए जा रहे इवेंट का टाइप होता है. स्वीकार की गई HLS के लिएID3
या DASH के लिएurn:google:dai:2018
data
:google_
से प्रीफ़िक्स किया गया एक स्ट्रिंग मान या एक बाइट अरे जो डीकोड करता है.timestamp
: डेटा प्रोसेस होने के बाद सेकंड में टाइमस्टैंप.
IMA डीएआई SDK टूल के साथ काम करने वाली हर स्ट्रीम टाइप में, तय किए गए समय वाले एक खास फ़ॉर्मैट का इस्तेमाल किया जाता है मेटाडेटा, जैसा कि नीचे दिए गए सेक्शन में बताया गया है.
एचएलएस MPEG2TS स्ट्रीम
MPEG2TS सेगमेंट का इस्तेमाल करके लीनियर डीएआई एचएलएस स्ट्रीम, इन-बैंड ID3 टैग के ज़रिए वीडियो प्लेयर इस्तेमाल कर सकते हैं. ये ID3 टैग इसमें एम्बेड किए गए हैं MPEG2TS सेगमेंट और उन्हें TXXX फ़ील्ड नाम दिया जाता है (उपयोगकर्ता की ओर से तय किए गए कस्टम टेक्स्ट के लिए) कॉन्टेंट).
Safari में वीडियो चलाएं
Safari, छिपे हुए ट्रैक के तौर पर अपने-आप ID3 टैग प्रोसेस करता है. इसलिए, क्यूचेंज इवेंट होते हैं मेटाडेटा के हर हिस्से को प्रोसेस करने के लिए, सही समय पर फ़ायर करें. यहां से निकल जाना ठीक है IMA डीएआई 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 में ऑफ़सेट नहीं करता. नहीं
सैंपल डेटा को बाइट अरे से स्ट्रिंग में डिकोड करने या फ़िल्टर करने के लिए ज़रूरी है
जो आईडी3 टैग काम के नहीं होते हैं. इसकी वजह यह है कि IMA डीएआई SDK टूल इस डीकोडिंग और फ़िल्टर का काम करता है
स्वचालित रूप से.
यहां एक उदाहरण दिया गया है:
hls.on(Hls.Events.FRAG_PARSING_METADATA, (e, data) => {
if (streamManager && data) {
data.samples.forEach((sample) => {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
...
एचएलएस सीएमएएफ़ स्ट्रीम
कॉमन मीडिया ऐप्लिकेशन फ़्रेमवर्क (सीएमएएफ़) पास का इस्तेमाल करके लीनियर डीएआई एचएलएस स्ट्रीम करना ID3 से लेकर अब तक इन-बैंड eMSGv1 बॉक्स के ज़रिए समयबद्ध मेटाडेटा CMAF स्टैंडर्ड. ये eMSG बॉक्स हैं हर मीडिया सेगमेंट की शुरुआत में एम्बेड किया गया हो, जिसमें हर ID3 eMSG में शामिल हो एक PTS दिखाया जाता है, जो स्ट्रीम में असमानता के बारे में होता है.
HLS.js के 1.2.0 वर्शन के हिसाब से, हमारे दोनों सुझाए गए प्लेयर आईडी3 पास करते हैं के ज़रिए उपयोगकर्ता को दिखाया जाना चाहिए, जैसे कि वे ID3 टैग हों. इस वजह से, ये उदाहरण एचएलएस एमपीईजी2टीएस स्ट्रीम के उदाहरण जैसे ही हैं. हालांकि, ऐसा हो सकता है कि ऐसा हर खिलाड़ी के साथ नहीं होता. इसलिए, एचएलएस सीएमएएफ़ के साथ काम करना स्ट्रीम को eMSG के ज़रिए ID3 को पार्स करने के लिए यूनीक कोड की ज़रूरत हो सकती है.
Safari में वीडियो चलाएं
Safari, eMSG मेटाडेटा के ज़रिए ID3 को pseudo ID3 इवेंट की तरह मानता है और उन्हें बैच, अपने-आप, छिपे हुए ट्रैक के रूप में, जैसे कि cuechange इवेंट मेटाडेटा के हर हिस्से को प्रोसेस करने के लिए सही समय पर ट्रिगर किया जाता है. कोई समस्या नहीं है सभी मेटाडेटा को IMA डीएआई 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 को pseudo ID3 के तौर पर इस्तेमाल करता है
इवेंट की जानकारी देता है. इन्हें FRAG_PARSING_METADATA
इवेंट के ज़रिए अलग-अलग बैच में उपलब्ध कराया जाता है
चुनें. HLS.js, बाइट सरणियों के ID3 डेटा का अनुवाद नहीं करता है
स्ट्रिंग के साथ जोड़ा जाता है और इवेंट को उनके संगत PTS में ऑफ़सेट नहीं करता. नहीं
सैंपल डेटा को बाइट अरे से स्ट्रिंग में डिकोड करना ज़रूरी होता है, क्योंकि IMA डीएआई SDK टूल यह डिकोडिंग अपने-आप करता है.
यहां एक उदाहरण दिया गया है:
hls.on(Hls.Events.FRAG_PARSING_METADATA, (e, data) => {
if (streamManager && data) {
data.samples.forEach((sample) => {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
...
डैश स्ट्रीम
लीनियर डीएआई डैश स्ट्रीम, इवेंट स्ट्रीम में मेटाडेटा को मेनिफ़ेस्ट इवेंट के तौर पर पास करती हैं
कस्टम schemeIdUri
मान urn:google:dai:2018
. इनमें से हर इवेंट
स्ट्रीम में एक टेक्स्ट पेलोड और पीटीएस शामिल होते हैं.
DASH.js
Dash.js, हर एक की schemaIdUri वैल्यू के बाद नाम रखने वाले कस्टम इवेंट हैंडलर उपलब्ध कराता है
इवेंट स्ट्रीम. ये कस्टम हैंडलर बैच में फ़ायर किए जाते हैं. इन्हें आपके काम करने के लिए छोड़ दिया जाता है
इवेंट का सही समय तय करने के लिए PTS वैल्यू को प्रोसेस करें. IMA डीएआई 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 अपने timelineregionenter
इवेंट के हिस्से के तौर पर इवेंट दिखाते हैं. पूरा होने की तारीख
शाका प्लेयर के साथ फ़ॉर्मैटिंग असंगत होने पर, मेटाडेटा मान
विवरण प्रॉपर्टी के माध्यम से रॉ डेटा फिर से हासिल किया गया
eventElement.attributes['messageData'].value
.
यहां एक उदाहरण दिया गया है:
player.addEventListener('timelineregionenter', function(event) {
const detail = event.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;
streamManager.processMetadata("urn:google:dai:2018", mediaId, pts);
}
});
...
पॉड सर्विंग
पॉड सर्विंग के लिए, तय समय पर पास करने के लिए अलग-अलग कॉन्फ़िगरेशन होते हैं नीचे दी गई शर्तों के हिसाब से मेटाडेटा:
- लाइव स्ट्रीम या वीओडी (वीडियो ऑन डिमांड) स्ट्रीम टाइप
- HLS या DASH स्ट्रीम फ़ॉर्मैट
- किस तरह का प्लेयर इस्तेमाल किया जा रहा है
- किस तरह का डीएआई बैकएंड इस्तेमाल किया जा रहा है
एचएलएस स्ट्रीम फ़ॉर्मैट (लाइव और वीओडी स्ट्रीम, HLS.js प्लेयर)
अगर HLS.js प्लेयर का इस्तेमाल किया जा रहा है, तो यह सुनें
HLS.js FRAG_PARSING_METADATA
इवेंट को ID3 मेटाडेटा के तौर पर पाने और उसे
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 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 का इस्तेमाल
वीओडी (वीडियो ऑन डिमांड) स्ट्रीम प्लेबैक, इसे सुनने के लिए '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);
}
}