תמונה משנית

מפתחי Cast יכולים להוסיף לממשק המשתמש תמונה (משנית) שתשמש למידע לצורך אודיו ואפליקציות וידאו. הצגת החבילות הנתמכות פורמטים של תמונות לתאימות.

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

טבלה 1 מציגה את חוויית המשתמש כשהתכונה מופעלת בסוגים ובפקדים הרלוונטיים של המכשירים. פרטי ההטמעה יש הבדלים קלים בין אפליקציות האודיו והווידאו. לעיון בקטעים שבהמשך כדי לשלב את התכונה הזו באפליקציה של מכשיר האינטרנט של YouTube.

טבלה 1: ממשק משתמש של תמונה משנית לפי תוכן וסוג מכשיר
סוג מכשיר תוכן אודיו תוכן וידאו
Chromecast תמונה משנית במתאם Chromecast לתוכן אודיו. תמונה משנית במתאם Chromecast לתוכן וידאו.
Chromecast עם Google TV תמונה משנית ב-Chromecast עם מתאמים של Google TV לתוכן אודיו. תמונה משנית ב-Chromecast עם מתאמים של Google TV לתוכן וידאו.
מסך חכם תמונה משנית במסכים חכמים לתוכן אודיו. תמונה משנית במסכים חכמים לתוכן וידאו.
שלט רחוק למסך חכם תמונה משנית בשלט רחוק של מסך חכם בשביל תוכן אודיו. הערה: תמונה משנית לא נתמכת בשלט הרחוק לתוכן וידאו.

אודיו

סקירה כללית

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

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

הטמעה

כדי להגדיר, להסיר או לעדכן את התמונה המשנית: secondaryImage יש לשנות את המאפיין של MusicTrackMediaMetadata. הנכס לוקח Image אובייקט שמאוכלס בכתובת ה-URL שמתארת איפה מתארחת התמונה המשנית.

בדוגמה הבאה, התמונה המשנית מוגדרת במיירט load. מתי הנגן מסיים לטעון את התוכן, והתמונה המשנית מוצגת.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

כדי לעדכן את התמונה המשנית במהלך ההפעלה, צריך שבאפליקציה PlayerManager כדי לקבל את ה-MediaInformation בהתקשרות getMediaInformation. לאחר מכן האפליקציה אמורה לשנות את metadata על ידי עדכון secondaryImage עד לערך הרצוי. לבסוף, שיחותsetMediaInformation במידע החדש יעודכן בממשק המשתמש. אפשר להשתמש בשיטה הזו כדי: שינויים במטא-נתונים שסופקו באמצעות עדכונים כמו אירועי EMSG או ID3 בזמן ההפעלה.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

כדי לבטל את ההגדרה של התמונה המשנית, צריך להגדיר את המאפיין secondaryImage כ-null של מטא-נתונים.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

וידאו

סקירה כללית

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

הטמעה

כדי להגדיר את התמונה המשנית, האפליקציה חייבת לקבל מופע של UiManager ולהתקשר setSecondaryImage. היא לוקחת שני פרמטרים: SecondaryImagePosition ואת כתובת ה-URL של התמונה. תמיד אפשר להגדיר את התמונה המשנית, יוצגו רק כאשר משתמש יפעיל את שכבת-העל בחזית.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

הסרת התמונה המשנית מבוצעת על ידי הגדרת כתובת ה-URL של התמונה ל-null או מחרוזת ריקה.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

השלבים הבאים

הגענו למסקנה שאפשר להוסיף למקלט האינטרנט. מעכשיו אפשר פיתוח אפליקציית שולח ב-iOS, Android או אינטרנט.

הקודם
בשידור חי
הבא
יומן ניפוי באגים של העברה (cast)