תמונה משנית

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

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

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

טבלה 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);

השלבים הבאים

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

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