कास्ट मीडिया ब्राउज़ (सीएमबी) एक सुविधा है. इसकी मदद से, स्मार्ट डिसप्ले वाले उपयोगकर्ता आपके ऑडियो या वीडियो कॉन्टेंट कैटलॉग को खोज सकते हैं और उससे जुड़ सकते हैं. CMB एक व्यवस्थित ब्राउज़िंग अनुभव की मदद से वेब रिसीवर को बेहतर बनाकर ऐसा करता है. यह खास तौर पर स्मार्ट डिसप्ले के लिए बनाया गया होता है.
CMB उन स्टैंडर्ड टेंप्लेट के बारे में बताता है जो स्मार्ट डिसप्ले यूज़र इंटरफ़ेस (यूआई) का पालन करने वाला एक जैसा ब्राउज़िंग अनुभव देते हैं. इन स्टैंडर्ड टेंप्लेट को पॉप्युलेट करने के लिए डेवलपर, डेटा उपलब्ध कराते हैं. टेंप्लेट में ऑडियो और वीडियो कॉन्टेंट या दोनों का इस्तेमाल किया जा सकता है.
एंट्री पॉइंट
सीआरएम के लिए, दो एंट्री पॉइंट होते हैं. इनमें से उपयोगकर्ता, टच या वॉइस कंट्रोल का इस्तेमाल करके, कॉन्टेंट ब्राउज़ कर सकता है और उसे चुन सकता है.
प्लेयर में ब्राउज़ करना
ऐप्लिकेशन से मिले कॉन्टेंट की सूची में से चुनने के लिए, वीडियो चलाते समय ऊपर की ओर स्वाइप करें:
वीडियो
ऑडियो
लैंडिंग पेज ब्राउज़ करना
जब cast-media-player
एलिमेंट वाला कोई वेब रिसीवर स्मार्ट डिसप्ले पर चल रहा होता है, तो यह IDLE स्थिति में CMB दिखाता है.
वीडियो और ऑडियो
सामग्री को मीडिया में जोड़ा जा रहा है
डेवलपर, हर कॉन्टेंट आइटम के लिए डेटा के साथ डेटा भरने के लिए ज़िम्मेदार होते हैं. प्लेयर में ब्राउज़ करने के लिए इस्तेमाल किया जाने वाला कॉन्टेंट, लैंडिंग पेज ब्राउज़ करने के कॉन्टेंट के लिए इस्तेमाल किए गए कॉन्टेंट से अलग हो सकता है.
इन-प्लेयर ब्राउज़ का इस्तेमाल करके, उपयोगकर्ता के देखे गए कॉन्टेंट से जुड़े आइटम या प्लेलिस्ट के आइटम दिखाए जाते हैं. लाइव टीवी की सेवा देने वाली कंपनियां, चैनल की सूची में अपने-आप जानकारी भरने के लिए, इस एंट्री पॉइंट का भी इस्तेमाल कर सकती हैं.
लैंडिंग पेज ब्राउज़ करने की सुविधा का इस्तेमाल करके, आप नया कॉन्टेंट, फ़िलहाल लाइव होने वाले कॉन्टेंट या अपने उपयोगकर्ता के लिए ज़्यादा दिलचस्प कॉन्टेंट के बारे में जागरूकता बढ़ा सकते हैं.
मीडिया ब्राउज़ करना चालू करें
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
मीडिया ब्राउज़ करें यूज़र इंटरफ़ेस (यूआई) में हर आइटम के लिए शीर्षक, सबटाइटल, अवधि, और इमेज दिखाने के लिए BrowseItem
इस्तेमाल करें:
जवाब.
BrowseItem.image
आसपेक्ट रेशियो या चौड़ाई-ऊंचाई का अनुपात
अपनी इमेज एसेट के लिए सबसे सही आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) चुनने के लिए, 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;
});