מפתחי CAST יכולים להוסיף תמונה אינפורמטיבית (משנית) לממשק המשתמש עבור אפליקציות של וידאו ואודיו. בודקים את הפורמטים של התמונות הנתמכים כדי לבדוק את התאימות.
התמונה המשנית מופיעה בפינה השמאלית העליונה של המסך, וניתן להשתמש בה כדי להציג גרפיקה עם מידע נוסף על התוכן שפועל כרגע, כמו פורמט התוכן, שלט הקריאה בתחנת הרדיו או סיווג תוכנית הטלוויזיה. התמונה המשנית נשארת על המסך כל עוד התכונה מופעלת עבור התוכן הנוכחי והנגן לא במצב לא פעיל.
בטבלה 1 מוצגת חוויית המשתמש כשהתכונה מופעלת בפקדים ובסוגי המכשירים הרלוונטיים. פרטי ההטמעה והשילוב שונים במקצת באפליקציות האודיו והווידאו. עיינו בקטעים שבהמשך כדי ללמוד איך לשלב את התכונה הזו באפליקציה Web Receiver.
סוג מכשיר | תוכן אודיו | תוכן וידאו |
---|---|---|
Chromecast | ||
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 או באינטרנט.