मीडिया ब्राउज़ करें

कास्ट मीडिया ब्राउज़ (सीएमबी) एक सुविधा है. इसकी मदद से, स्मार्ट डिसप्ले वाले उपयोगकर्ता आपके ऑडियो या वीडियो कॉन्टेंट कैटलॉग को खोज सकते हैं और उससे जुड़ सकते हैं. CMB एक व्यवस्थित ब्राउज़िंग अनुभव की मदद से वेब रिसीवर को बेहतर बनाकर ऐसा करता है. यह खास तौर पर स्मार्ट डिसप्ले के लिए बनाया गया होता है.

CMB उन स्टैंडर्ड टेंप्लेट के बारे में बताता है जो स्मार्ट डिसप्ले यूज़र इंटरफ़ेस (यूआई) का पालन करने वाला एक जैसा ब्राउज़िंग अनुभव देते हैं. इन स्टैंडर्ड टेंप्लेट को पॉप्युलेट करने के लिए डेवलपर, डेटा उपलब्ध कराते हैं. टेंप्लेट में ऑडियो और वीडियो कॉन्टेंट या दोनों का इस्तेमाल किया जा सकता है.

एंट्री पॉइंट

सीआरएम के लिए, दो एंट्री पॉइंट होते हैं. इनमें से उपयोगकर्ता, टच या वॉइस कंट्रोल का इस्तेमाल करके, कॉन्टेंट ब्राउज़ कर सकता है और उसे चुन सकता है.

प्लेयर में ब्राउज़ करना

ऐप्लिकेशन से मिले कॉन्टेंट की सूची में से चुनने के लिए, वीडियो चलाते समय ऊपर की ओर स्वाइप करें:

वीडियो

ऑडियो

लैंडिंग पेज ब्राउज़ करना

जब cast-media-player एलिमेंट वाला कोई वेब रिसीवर स्मार्ट डिसप्ले पर चल रहा होता है, तो यह IDLE स्थिति में CMB दिखाता है.

वीडियो और ऑडियो

सामग्री को मीडिया में जोड़ा जा रहा है

डेवलपर, हर कॉन्टेंट आइटम के लिए डेटा के साथ डेटा भरने के लिए ज़िम्मेदार होते हैं. प्लेयर में ब्राउज़ करने के लिए इस्तेमाल किया जाने वाला कॉन्टेंट, लैंडिंग पेज ब्राउज़ करने के कॉन्टेंट के लिए इस्तेमाल किए गए कॉन्टेंट से अलग हो सकता है.

इन-प्लेयर ब्राउज़ का इस्तेमाल करके, उपयोगकर्ता के देखे गए कॉन्टेंट से जुड़े आइटम या प्लेलिस्ट के आइटम दिखाए जाते हैं. लाइव टीवी की सेवा देने वाली कंपनियां, चैनल की सूची में अपने-आप जानकारी भरने के लिए, इस एंट्री पॉइंट का भी इस्तेमाल कर सकती हैं.

लैंडिंग पेज ब्राउज़ करने की सुविधा का इस्तेमाल करके, आप नया कॉन्टेंट, फ़िलहाल लाइव होने वाले कॉन्टेंट या अपने उपयोगकर्ता के लिए ज़्यादा दिलचस्प कॉन्टेंट के बारे में जागरूकता बढ़ा सकते हैं.

चेतावनी: परफ़ॉर्मेंस की समस्याओं से बचने के लिए, ज़्यादा से ज़्यादा 30 आइटम मीडिया ब्राउज़ करने की अनुमति है.

मीडिया ब्राउज़ करना चालू करें

setBrowseContent पर कॉल करके, ब्राउज़ करने के लिए मीडिया के कॉन्टेंट की सूची दें:

const controls = cast.framework.ui.Controls.getInstance();
controls.setBrowseContent(BrowseContent);

इस तरीके से कॉल करने के तुरंत बाद, मीडिया ब्राउज़ करने का यूज़र इंटरफ़ेस (यूआई) अपडेट हो जाता है.

सुरक्षित जगह की ऊंचाई

जब CMB चालू होता है, तो Cast SDK यूज़र इंटरफ़ेस (यूआई) के सुरक्षित क्षेत्र की ऊंचाई बदल जाती है और आपको अपने मौजूदा वेब रिसीवर यूज़र इंटरफ़ेस (यूआई) को अपडेट करना पड़ सकता है. सुरक्षित इलाके की ऊंचाई पता करने के लिए, getSafeAreaHeight का इस्तेमाल करें.

// Media Browse UI enabled
controls.setBrowseContent(BrowseContent);
console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub

// Media Browse UI disabled
controls.setBrowseContent(null);
console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub

मीडिया ब्राउज़ करें को हटाएं

मीडिया ब्राउज़ करने के यूज़र इंटरफ़ेस (यूआई) को हटाने के लिए, setBrowseContent के साथ null का इस्तेमाल करें:

controls.setBrowseContent(null);

पसंद के मुताबिक मीडिया ब्राउज़ करें

कॉन्टेंट ब्राउज़ करना

मीडिया ब्राउज़ करने के यूज़र इंटरफ़ेस (यूआई) के शीर्षक को पसंद के मुताबिक बनाने और आइटम अपडेट करने के लिए, BrowseContent का इस्तेमाल करें:

जवाब. BrowseContent.title

B. BrowseContent.items

मीडिया ब्राउज़ करें यूज़र इंटरफ़ेस (यूआई) में हर आइटम के लिए शीर्षक, सबटाइटल, अवधि, और इमेज दिखाने के लिए BrowseItem इस्तेमाल करें:

जवाब. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

आसपेक्ट रेशियो या चौड़ाई-ऊंचाई का अनुपात

अपनी इमेज एसेट के लिए सबसे सही आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) चुनने के लिए, targetAspectRatio का इस्तेमाल करें. वेब रिसीवर SDK टूल के तीन आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) काम करते हैं:

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात)	उदाहरण
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

Messages

जब उपयोगकर्ता मीडिया ब्राउज़ करने के यूज़र इंटरफ़ेस (यूआई) से किसी आइटम को चुनता है, तो वेब रिसीवर SDK टूल, ऐप्लिकेशन के लिए चुने गए BrowseItem की वैल्यू के हिसाब से LOAD मैसेज भेजता है.

नमूना कोड

const controls = cast.framework.ui.Controls.getInstance();

const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';

const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';

const items = [item1, item2];

const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    // Media browse
    controls.setBrowseContent(browseContent);
  });

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD, loadRequestData => {
    if (loadRequestData.media && loadRequestData.media.entity) {
      // Load by entity
      loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
      loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
    }
    return loadRequestData;
  });