העברה (cast) של מדיה היא תכונה שמאפשרת למשתמשים עם תצוגה חכמה לגלות את קטלוג התוכן של אודיו או וידאו וליצור אינטראקציה איתם. CMB עושה זאת על ידי שיפור מקלט האינטרנט עם חוויית גלישה יעילה במיוחד שמתאימה למסכים חכמים.
ב-CMB מוגדרות תבניות סטנדרטיות שמספקות חוויית גלישה עקבית בהתאם למוסכמות של ממשק המשתמש החכם לרשת המדיה. מפתחים מספקים נתונים כדי לאכלס את התבניות הסטנדרטיות האלה. התבניות תומכות גם בתוכן האודיו וגם בסרטון, או בשילוב של שניהם.
נקודות כניסה לצ'אט
קיימות שתי נקודות כניסה ל-CMB, שמהן המשתמש יכול לעיין ולבחור תוכן באמצעות מגע או שליטה קולית.
גלישה בתוך הנגן
מחליקים למעלה במהלך ההפעלה כדי לבחור מתוך רשימה של תוכן שסופק על ידי אפליקציות:
וידאו
אודיו
גלישה בדף נחיתה
כשמקלט אינטרנט עם הרכיב cast-media-player
פועל במסכים חכמים, הוא מוצג ב-CMB במצב לא פעיל.
וידאו ואודיו
התוכן בתהליך אכלוס
המפתחים אחראים לאכלס את התבנית בכל נקודת כניסה עם נתונים לגבי כל פריט תוכן. התוכן שמשמש לאכלוס 'גלישה בתוך Play' יכול להיות שונה מהתוכן המשמש לאכלוס דפי הנחיתה.
השתמשו ב'עיון בנגן' כדי להציג פריטים הקשורים לתוכן שהמשתמש צופה בו כרגע, או פריטים בפלייליסט. גם ספקי טלוויזיה בשידור חי יכולים להשתמש בנקודת הכניסה הזו כדי לאכלס רשימת ערוצים לגישה קלה.
השתמשו בדף הנחיתה כדי להגביר את המוּדעוּת לתוכן מקורי חדש, לתוכן שזמין כרגע או לתוכן שעשוי לעניין את המשתמש שלכם.
הפעלת הגלישה במדיה
כדי לספק רשימה של תוכן מדיה לגלישה, אפשר להתקשר למספר setBrowseContent
:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
ממשק המשתמש של Media Media מתעדכן מיד לאחר הקריאה לשיטה הזו.
גובה האזור הבטוח
כשהאפשרות של 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
הסרת הגלישה במדיה
כדי להסיר את ממשק המשתמש של מדיית המדיה, צריך להשתמש בnull
עם setBrowseContent
:
controls.setBrowseContent(null);
התאמה אישית של גלישת מדיה
דפדוף בתוכן
אפשר להשתמש
BrowseContent
בהתאמה אישית של כותרת ממשק המשתמש של Media Media ולעדכן פריטים:
משתמשים בלחצן BrowseItem
כדי להציג כותרת, כותרת משנה, משך זמן ותמונה לכל פריט בממשק המשתמש של Media Media:
יחס הגובה-רוחב
השתמשו ב-targetAspectRatio
כדי לבחור את יחס הגובה-רוחב הטוב ביותר בנכסי התמונה. שלושה יחסי גובה-רוחב נתמכים ב-Web Receiver SDK:
יחס גובה-רוחב | דוגמה |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
הודעות
כשמשתמש בוחר אחד מהפריטים בממשק המשתמש של העיון במדיה, ה-SDK של אתר האינטרנט שולח הודעת LOAD
לאפליקציה בהתאם לערכי ה-BrowseItem
שנבחרו.
קוד לדוגמה
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;
});