विज्ञापन के लिए ब्रेक
वेब सेंडर SDK टूल, दी गई मीडिया स्ट्रीम में विज्ञापन के लिए ब्रेक और साथी विज्ञापनों के लिए सहायता उपलब्ध कराता है.
विज्ञापन के लिए ब्रेक कैसे काम करते हैं, इस बारे में ज़्यादा जानकारी के लिए, वेब पाने वाले के लिए विज्ञापन के लिए ब्रेक की खास जानकारी देखें.
भेजने और पाने वाले, दोनों के लिए ब्रेक तय किए जा सकते हैं. हालांकि, हमारा सुझाव है कि उन्हें वेब पाने वाले और Android TV रिसीवर पर भी सेट करें, ताकि सभी प्लैटफ़ॉर्म पर उनकी परफ़ॉर्मेंस एक जैसी बनी रहे.
वेब पर, BreakClip
और Break
का इस्तेमाल करके लोड कमांड में विज्ञापन के लिए ब्रेक की जानकारी दें:
let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;
let breakClip2 = ...
let breakClip3 = ...
let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);
let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];
let request = new chrome.cast.media.LoadRequest(mediaInfo);
cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)
ट्रैक एपीआई का इस्तेमाल करना
ट्रैक, कोई टेक्स्ट (सबटाइटल या कैप्शन) ऑब्जेक्ट हो सकता है. इसके अलावा, यह कोई ऑडियो या वीडियो स्ट्रीम ऑब्जेक्ट भी हो सकता है. ट्रैक API के ज़रिए, अपने ऐप्लिकेशन में इन ऑब्जेक्ट पर काम किया जा सकता है.
Track
ऑब्जेक्ट,
SDK टूल में किसी ट्रैक को दिखाता है. इस तरह से, एक ट्रैक को कॉन्फ़िगर करके उसे एक यूनीक आईडी असाइन किया जा सकता है:
var englishSubtitle = new chrome.cast.media.Track(1, // track ID
chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;
var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;
var frenchAudio = new chrome.cast.media.Track(3, // track ID
chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;
किसी मीडिया आइटम में एक से ज़्यादा ट्रैक हो सकते हैं; उदाहरण के लिए, उसमें एक से ज़्यादा सबटाइटल (हर एक भाषा के लिए) या कई वैकल्पिक ऑडियो स्ट्रीम (अलग-अलग भाषाओं के लिए) हो सकती हैं.
MediaInfo
वह क्लास है जो मीडिया आइटम को मॉडल करती है. किसी मीडिया आइटम के साथ Track
ऑब्जेक्ट के कलेक्शन को जोड़ने के लिए, आपको उसकी tracks
प्रॉपर्टी को अपडेट करना होगा. मीडिया पाने वाले पर मीडिया लोड करने से पहले यह असोसिएशन करना ज़रूरी है:
var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;
मीडिया अनुरोध activeTrackIds
में चालू ट्रैक सेट किए जा सकते हैं.
मीडिया लोड होने के बाद, मीडिया आइटम से जुड़े एक या एक से ज़्यादा ट्रैक को चालू किया जा सकता है. इसके लिए, EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)
पर कॉल करें और opt_activeTrackIds
में चालू करने के लिए, ट्रैक के आईडी पास करें. ध्यान दें,
दोनों पैरामीटर ज़रूरी नहीं हैं. अपने हिसाब से, ऐक्टिव ट्रैक या
स्टाइल को सेट किया जा सकता है. उदाहरण के लिए, फ़्रेंच सबटाइटल (2
) और फ़्रेंच ऑडियो (3
) को चालू करने का तरीका यहां दिया गया है:
var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
मौजूदा मीडिया से सभी ऑडियो या वीडियो ट्रैक हटाने के लिए, बस
mediaInfo.tracks=null
(खाली कलेक्शन) सेट करें और मीडिया को फिर से लोड करें.
मौजूदा मीडिया से सभी टेक्स्ट ट्रैक हटाने (उदाहरण के लिए, सबटाइटल बंद करने) के लिए, इनमें से कोई एक काम करें:
var activeTrackIds = [2, 3];
को अपडेट करें, जो पहले दिखाया गया है, ताकि इसमें सिर्फ़ ऑडियो ट्रैक [3] शामिल हो.mediaInfo.tracks=null
सेट करें. ध्यान दें कि टेक्स्ट कैप्शन (track.hidden
) बंद करने के लिए, मीडिया को फिर से लोड करना ज़रूरी नहीं है.activeTracksId
का ऐसा कलेक्शन भेजने पर टेक्स्ट ट्रैक बंद हो जाता है जिसमें पहले से चालूtrackId
शामिल न हो.
टेक्स्ट ट्रैक को स्टाइल करना
TextTrackStyle
एक ऐसा ऑब्जेक्ट है जो टेक्स्ट ट्रैक की स्टाइलिंग की जानकारी इकट्ठा करता है. किसी मौजूदा TextTrackStyle
ऑब्जेक्ट को बनाने या अपडेट करने के बाद, उसे अभी चल रहे मीडिया आइटम पर लागू किया जा सकता है. इसके लिए, उसके editTrackInfo
वाले तरीके का इस्तेमाल करें, जैसे कि:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
कॉलबैक के नतीजे से अनुरोध की स्थिति ट्रैक की जा सकती है, चाहे वह सफल हो या गड़बड़ी हो. साथ ही, भेजने वाले की जानकारी को उसी हिसाब से अपडेट किया जा सकता है.
ऐप्लिकेशन को उपयोगकर्ताओं को या तो सिस्टम या खुद ऐप्लिकेशन के ज़रिए उपलब्ध कराई गई सेटिंग का इस्तेमाल करके टेक्स्ट ट्रैक की शैली अपडेट करने की सुविधा देनी चाहिए.
इन टेक्स्ट ट्रैक स्टाइल एलिमेंट को स्टाइल किया जा सकता है:
- फ़ोरग्राउंड (टेक्स्ट) का रंग और अपारदर्शिता
- बैकग्राउंड का रंग और अपारदर्शिता
- किनारे का प्रकार
- किनारे का रंग
- फ़ॉन्ट स्केल
- फ़ॉन्ट परिवार
- फ़ॉन्ट स्टाइल
उदाहरण के लिए, टेक्स्ट के रंग को 75% ओपैसिटी के साथ लाल पर इस तरह सेट करें:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';
वॉल्यूम कंट्रोल
रिसीवर का वॉल्यूम सेट करने के लिए, RemotePlayer
और RemotePlayerController
का इस्तेमाल किया जा सकता है.
function changeVolume(newVolume) {
player.volumeLevel = newVolume;
playerController.setVolumeLevel();
// Update sender UI to reflect change
}
मैसेज भेजने वाले ऐप्लिकेशन को वॉल्यूम कंट्रोल करने के लिए, इन दिशा-निर्देशों का पालन करना होगा:
- भेजने वाले ऐप्लिकेशन को रिसीवर के साथ सिंक होना चाहिए, ताकि
भेजने वाले का यूज़र इंटरफ़ेस (यूआई) हमेशा, पाने वाले के हिसाब से वॉल्यूम की रिपोर्ट करे. भेजने वाले की आवाज़ बनाए रखने के लिए,
RemotePlayerEventType.VOLUME_LEVEL_CHANGED
औरRemotePlayerEventType.IS_MUTED_CHANGED
कॉलबैक का इस्तेमाल करें. ज़्यादा जानकारी के लिए, स्थिति के बारे में अपडेट देखें. - जब आपका ऐप्लिकेशन कॉन्टेंट पाने वाले पर लोड होता है, तो भेजने वाले ऐप्लिकेशन को आवाज़ का लेवल, पहले से तय किए गए किसी खास लेवल पर सेट नहीं करना चाहिए न ही उसे भेजने वाले के डिवाइस के रिंगर/मीडिया वॉल्यूम पर सेट करना चाहिए.
डिज़ाइन चेकलिस्ट में भेजने वाले की आवाज़ के कंट्रोल देखें.
कॉन्टेंट पाने वाले को मीडिया मैसेज भेजना
भेजने वाले व्यक्ति से पाने वाले को Media Messages
भेजा जा सकता है. उदाहरण के लिए, पैसे पाने वाले व्यक्ति को SKIP_AD
मैसेज भेजने के लिए:
// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
if (castSession) {
const media = castSession.getMediaSession();
castSession.sendMessage('urn:x-cast:com.google.cast.media', {
type: 'SKIP_AD',
requestId: 1,
mediaSessionId: media.mediaSessionId
});
}
});
चैनल से जुड़े अपडेट
जब कई ईमेल भेजने वाले एक ही पाने वाले से जुड़े होते हैं, तो हर ईमेल भेजने वाले के लिए यह ज़रूरी है कि उसे पाने वाले पर होने वाले बदलावों के बारे में पता हो. भले ही, ये बदलाव दूसरे ईमेल भेजने वालों ने किए हों.
इसके लिए, आपका ऐप्लिकेशन
RemotePlayerController
पर सभी ज़रूरी लिसनर को रजिस्टर कर लेगा.
अगर मौजूदा मीडिया के TextTrackStyle
में बदलाव होता है, तो कनेक्ट किए गए सभी ईमेल पतों को इसकी सूचना दी जाएगी. साथ ही, कॉलबैक करने वाले लोगों को मौजूदा मीडिया सेशन से जुड़ी प्रॉपर्टी, जैसे कि MediaInfo
फ़ील्ड की textTrackStyle
और activeTrackIds
भी भेज दी जाएंगी. इस मामले में, रिसीवर का SDK
यह पुष्टि नहीं करता कि नई स्टाइल, पिछली स्टाइल से अलग है या नहीं.
साथ ही, वह जोड़े गए सभी ईमेल पतों की सूचना भी देता है.
प्रोग्रेस दिखाने वाला इंंडिकेटर
ज़्यादातर ऐप्लिकेशन के लिए, भेजने वाले की जगह पर प्रोग्रेस दिखाने वाले इंंडिकेटर के साथ वीडियो चलाने की जगह दिखाना ज़रूरी है. Cast API, कास्ट मीडिया प्रोटोकॉल का इस्तेमाल करता है. यह इस और अन्य स्थितियों के लिए, बैंडविथ के इस्तेमाल को ऑप्टिमाइज़ करता है. इससे आपको अपना स्टेटस सिंक करने की ज़रूरत नहीं होती. एपीआई का इस्तेमाल करके, मीडिया प्लेबैक की प्रोग्रेस इंडिकेटर को सही तरीके से लागू करने के लिए, CastVideos-chrome सैंपल ऐप्लिकेशन देखें.
सीओआरएस से जुड़ी ज़रूरी शर्तें
अडैप्टिव मीडिया स्ट्रीमिंग के लिए, Google Cast के लिए सीओआरएस हेडर होने चाहिए. लेकिन mp4 मीडिया स्ट्रीम में ट्रैक शामिल होने पर, सीओआरएस की भी ज़रूरत होती है. अगर आप किसी भी मीडिया के लिए ट्रैक सक्षम करना चाहते हैं, तो आपको अपने ट्रैक स्ट्रीम और अपनी मीडिया स्ट्रीम दोनों के लिए CORS सक्षम करना होगा. इसलिए, अगर आपके सर्वर पर आपके सामान्य mp4 मीडिया के लिए सीओआरएस हेडर उपलब्ध नहीं हैं और इसके बाद एक सामान्य सबटाइटल ट्रैक जोड़ा जाता है, तो मीडिया स्ट्रीम नहीं किया जा सकेगा. मीडिया स्ट्रीम करने के लिए, अपने सर्वर को सही सीओआरएस हेडर को अपडेट करना ज़रूरी है.
आपको इन हेडर की ज़रूरत होगी: Content-Type
,Accept-Encoding
, और Range
.
ध्यान दें कि आखिरी दो हेडर, Accept-Encoding
और Range
ऐसे अतिरिक्त हेडर हैं जिनकी आपको शायद पहले ज़रूरत नहीं थी.
वाइल्डकार्ड "*" का इस्तेमाल Access-Control-Allow-Origin
हेडर के लिए नहीं किया जा सकता. अगर पेज पर सुरक्षित मीडिया कॉन्टेंट है, तो इसे वाइल्डकार्ड के बजाय डोमेन का इस्तेमाल करना चाहिए.
वेब पेज को फिर से लोड किए बिना सेशन को फिर से शुरू करना
किसी मौजूदा CastSession
को फिर से शुरू करने के लिए, उस सेशन के sessionId
के साथ requestSessionById(sessionId)
का इस्तेमाल करें जिसमें शामिल होने की कोशिश की जा रही है.
loadMedia()
को कॉल करने के बाद, getSessionId()
का इस्तेमाल करके sessionId
को चालू CastSession
पर पाया जा सकता है.
हमारा सुझाव है कि आप:
- सेशन शुरू करने के लिए,
loadMedia()
को कॉल करें sessionId
को डिवाइस में सेव करें- ज़रूरत पड़ने पर
requestSessionById(sessionId)
का इस्तेमाल करके सेशन में फिर से शामिल हों
let sessionId;
function rejoinCastSession() {
chrome.cast.requestSessionById(sessionId);
// Add any business logic to load new content or only resume the session
}
document.getElementById('play-button').addEventListener(("click"), function() {
if (sessionId == null) {
let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
if (castSession) {
let mediaInfo = createMediaInfo();
let request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request)
sessionId = CastSession.getSessionId();
} else {
console.log("Error: Attempting to play media without a Cast Session");
}
} else {
rejoinCastSession();
}
});
अगले चरण
इसी के साथ वे सुविधाएं पूर्ण होती हैं जिन्हें आप अपने वेब सेंडर ऐप्लिकेशन में जोड़ सकते हैं. अब आप किसी अन्य प्लैटफ़ॉर्म (Android या iOS) के लिए सेंडर ऐप्लिकेशन बना सकते हैं या रिसीवर ऐप्लिकेशन बना सकते हैं.