דפדוף במדיה

העברה (cast) של מדיה היא תכונה שמאפשרת למשתמשים עם תצוגה חכמה לגלות את קטלוג התוכן של אודיו או וידאו וליצור אינטראקציה איתם. CMB עושה זאת על ידי שיפור מקלט האינטרנט עם חוויית גלישה יעילה במיוחד שמתאימה למסכים חכמים.

ב-CMB מוגדרות תבניות סטנדרטיות שמספקות חוויית גלישה עקבית בהתאם למוסכמות של ממשק המשתמש החכם לרשת המדיה. מפתחים מספקים נתונים כדי לאכלס את התבניות הסטנדרטיות האלה. התבניות תומכות גם בתוכן האודיו וגם בסרטון, או בשילוב של שניהם.

נקודות כניסה לצ'אט

קיימות שתי נקודות כניסה ל-CMB, שמהן המשתמש יכול לעיין ולבחור תוכן באמצעות מגע או שליטה קולית.

גלישה בתוך הנגן

מחליקים למעלה במהלך ההפעלה כדי לבחור מתוך רשימה של תוכן שסופק על ידי אפליקציות:

וידאו

כניסה לגלישה במדיה – סרטון בנגן 1 כניסה לעיון במדיה – סרטון בנגן 2

אודיו

כניסה לעיון במדיה – אודיו 1 בנגן כניסה לעיון במדיה – אודיו 2 בנגן

גלישה בדף נחיתה

כשמקלט אינטרנט עם הרכיב 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 ולעדכן פריטים:

עיון במדיה – עיון בתוכן

א. BrowseContent.title

ב. BrowseContent.items

משתמשים בלחצן BrowseItem כדי להציג כותרת, כותרת משנה, משך זמן ותמונה לכל פריט בממשק המשתמש של Media Media:

לעיון במדיה – דפדוף בפריט

א. BrowseItem.image

ב. BrowseItem.duration

ג. BrowseItem.title

ד. BrowseItem.subtitle

יחס הגובה-רוחב

השתמשו ב-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;
  });
הקודם
אופטימיזציה למסכים חכמים
הבא
טראקים