अपने वेब सेंडर ऐप्लिकेशन में बेहतर सुविधाएं जोड़ें

विज्ञापन के लिए ब्रेक

वेब सेंडर 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';

आवाज़ कंट्रोल करें

Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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 अभी मीडिया में बदलाव कर रहे हैं, तो इससे जुड़े हुए सभी ईमेल भेजने वालों को सूचना दी जाएगी और मौजूदा मीडिया सेशन से जुड़ी प्रॉपर्टी, जैसे कि के activeTrackIds और textTrackStyle MediaInfo फ़ील्ड को कॉलबैक में भेजने वालों को भेजा जाएगा. इस मामले में, रिसीवर का SDK टूल यह पुष्टि नहीं करता कि नई स्टाइल पिछली स्टाइल से अलग है या नहीं. कनेक्ट किए गए सभी ईमेल पतों को सूचना देता है.

प्रोग्रेस दिखाने वाला इंंडिकेटर

भेजने वाले की ओर से वीडियो चलाने की जगह दिखाने के लिए, प्रोग्रेस दिखाने वाला इंंडिकेटर दिखाना ज़्यादातर ऐप्लिकेशन को डाउनलोड करने की ज़रूरत होती है. Cast API, Cast मीडिया प्रोटोकॉल का इस्तेमाल करते हैं, जो इस और अन्य परिस्थितियों के लिए बैंडविड्थ खपत को ऑप्टिमाइज़ करता है, इसलिए आप को स्थिति सिंक करने की ज़रूरत होती है. सही तरीके से लागू करने के लिए एपीआई का इस्तेमाल करके, मीडिया प्लेबैक के लिए प्रोग्रेस इंडिकेटर की स्थिति देखें. CastVideos-chrome सैंपल ऐप्लिकेशन.

सीओआरएस से जुड़ी ज़रूरी शर्तें

अडैप्टिव मीडिया स्ट्रीमिंग के लिए, Google Cast के लिए सीओआरएस हेडर मौजूद होना ज़रूरी है. हालांकि, सामान्य mp4 मीडिया स्ट्रीम में भी ट्रैक शामिल होने पर, सीओआरएस की ज़रूरत होती है. अगर आपको अगर आपको किसी मीडिया के लिए ट्रैक को चालू करना है, तो आपको अपने दोनों ट्रैक के लिए सीओआरएस को चालू करना होगा स्ट्रीम और आपकी मीडिया स्ट्रीम. इसलिए, अगर आपके पास सीओआरएस हेडर उपलब्ध नहीं हैं mp4 मीडिया को डाउनलोड करने का विकल्प होता है. इसके बाद, एक सामान्य सबटाइटल जोड़ा जा सकता है ट्रैक करने के लिए, आप अपने सर्वर को अपडेट किए बिना अपने मीडिया को स्ट्रीम नहीं कर पाएंगे में सही सीओआरएस हेडर शामिल करें.

आपको इन हेडर की ज़रूरत होगी: Content-Type,Accept-Encoding, और Range. ध्यान दें कि आखिरी दो हेडर, Accept-Encoding और Range, अतिरिक्त हैं ऐसे हेडर शामिल करें जिनकी आपको शायद पहले ज़रूरत न हो.

वाइल्डकार्ड "*" Access-Control-Allow-Origin हेडर के लिए इस्तेमाल नहीं किया जा सकता. अगर आपने पेज में सुरक्षित मीडिया कॉन्टेंट है, तो इसे वाइल्डकार्ड.

वेब पेज को फिर से लोड किए बिना सेशन को फिर से शुरू करना

किसी मौजूदा CastSession को फिर से शुरू करने के लिए, इसका इस्तेमाल करें requestSessionById(sessionId) उस सत्र के sessionId के साथ जिसमें आप शामिल होने का प्रयास कर रहे हैं.

sessionId को इनका इस्तेमाल करके, चालू CastSession पर पाया जा सकता है getSessionId() कॉल करने के बाद loadMedia().

हमारा सुझाव है कि आप:

  1. कॉल करें loadMedia() सेशन शुरू करने के लिए
  2. sessionId को डिवाइस में सेव करें
  3. इसका उपयोग करके सत्र में फिर से शामिल हों 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) या एक रिसीवर ऐप्लिकेशन बनाना.

पीछे जाएं
कास्ट को जोड़ें