ה-Web Receiver SDK מספק ממשק משתמש מובנה של הנגן. כדי להטמיע את ממשק המשתמש הזה באפליקציה המותאמת אישית של Web Receiver, צריך להוסיף את הרכיב cast-media-player
לגוף של קובץ ה-HTML.
<body>
<cast-media-player></cast-media-player>
</body>
משתני CSS מאפשרים להתאים אישית מאפיינים שונים של cast-media-player
, כולל רקע הנגן, תמונת פתיחה, משפחת גופנים ועוד. אפשר להוסיף את המשתנים האלה באמצעות סגנונות CSS מוטבעים, גיליון סגנונות CSS או את style.setProperty
ב-JavaScript.
בקטעים הבאים נסביר איך להתאים אישית כל אזור ברכיב של נגן המדיה. כדי להתחיל, אפשר להשתמש בתבניות הבאות.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/receiver.css" media="screen" /> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> </body> <footer> <script src="js/receiver.js"></script> </footer> </html>
js/receiver.js
const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start();
css/receiver.css
body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); --splash-size: cover; }
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> <style> body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); } </style> <script> const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start(); </script> </body> </html>
הלוגו של ההפעלה
הלוגו של ההפעלה מוצג בפינה השמאלית העליונה של המקלט בזמן שהמדיה פועלת. הנכס הזה נפרד מהמחלקה .logo
. ניתן להתאים אישית את --playback-logo-image
באמצעות הבורר body
.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
מאפייני רקע של הנגן
המשתנים של --background
מגדירים את מאפייני הרקע של הנגן כולו, שגלויים במהלך ההפעלה וההפעלה. לדוגמה, אפשר להגדיר את כל הרקע להדרגתיות לינארית בין לבן וכסף:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
תצוגת האינטרנט של מקלט האינטרנט:
אפשר להשתמש במשתנים הבאים כדי להתאים אישית את המאפיינים של .background
:
משתנים וברירות מחדל
שם | ערך ברירת מחדל | התיאור |
---|---|---|
--רקע | שחור | נכס רקע CSS |
--background-color | מאפיין צבע רקע ל-CSS | |
--background-image | נכס תמונת רקע CSS | |
--background-repeat | ללא חזרה | מאפיין חזרה על רקע CSS |
--background-size | גרסת כיסוי | נכס CSS בגודל רקע |
תבנית CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
מאפייני לוגו
הכיתה .logo
ממוקמת לפני הכיתה .background
ונפרסת על פני כל הנגן. הכיתה הזו מוצגת כשמפעילים את המקבל. אם לא
תציינו משתנים של .splash
, המחלקה .logo
תוצג גם
כשהמקלט במצב לא פעיל.
בדוגמה הבאה הערך --logo-image
מופיע לסמל אקולייזר בשם welcome.png
. ברירת המחדל של תמונה היא מרכז המקבל:
cast-media-player {
--logo-image: url('welcome.png');
}
תצוגת האינטרנט של מקלט האינטרנט:
אפשר להשתמש במשתנים הבאים כדי להתאים אישית את המאפיינים של .logo
:
משתנים וברירות מחדל
שם | ערך ברירת מחדל | התיאור |
---|---|---|
--logo-background | נכס רקע CSS | |
--logo-color | מאפיין צבע רקע ל-CSS | |
--logo-image | נכס תמונת רקע CSS | |
--logo-repeat | ללא חזרה | מאפיין חזרה על רקע CSS |
--logo-size | נכס CSS בגודל רקע |
תבנית CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
תכונות התזה
בדומה לכיתה .logo
, הכיתה .splash
מתפרסת על פני הנגן כולו. אם
מגדירים את המאפיינים האלה, המשתנים של .splash
יחליפו את המשתנים .logo
כשהמקלט לא פעיל. כלומר, אפשר להשתמש בקבוצה אחת של
מאפייני .logo
בזמן ההפעלה, ולהציג תמונות או רקעים נפרדים
כשהמקלט לא פעיל.
לדוגמה, תוכלו לבטל את הרקע ההדרגתי בצבעי לבן וכסף באמצעות dimgray
, ולהוסיף את הסמל המונפש בהמתנה...:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
תצוגת האינטרנט של מקלט האינטרנט:
אם המאפיינים האלה לא יוגדרו, כברירת מחדל, ההגדרות של .logo
או שם האפליקציה ייקבעו כברירת מחדל כשהמכשיר לא פעיל.
אפשר להשתמש במשתנים הבאים כדי להתאים אישית את המאפיינים של .splash
:
משתנים וברירות מחדל
שם | ערך ברירת מחדל | התיאור |
---|---|---|
--splash-background | נכס רקע CSS | |
--splash-color | מאפיין צבע רקע ל-CSS | |
--splash-image | נכס תמונת רקע CSS | |
--splash-repeat | מאפיין חזרה על רקע CSS | |
--splash-size | נכס CSS בגודל רקע |
תבנית CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
מצגת
כדי להעביר עד 10 תמונות למחזור במהלך מצב לא פעיל (במקום תמונת הפתיחה), תוכלו להשתמש בפרמטרים הבאים של המצגת.
משתנים וברירות מחדל
שם | ערך ברירת מחדל | התיאור |
---|---|---|
--slideshow-interval-duration | 10 שנ' | זמן בין תמונות. |
--slideshow-animation-duration | 2 שנ' | משך המעבר. |
--slideshow-image-1 | תמונה ראשונה במצגת. | |
--slideshow-image-2 | תמונה שנייה במצגת. | |
--slideshow-image-3 | תמונה שלישית במצגת. | |
--slideshow-image-4 | תמונה רביעית במצגת. | |
--slideshow-image-5 | תמונה חמישית במצגת. | |
--slideshow-image-6 | תמונה שישית במצגת. | |
--slideshow-image-7 | תמונה שביעית במצגת. | |
--slideshow-image-8 | תמונה שמינית במצגת. | |
--slideshow-image-9 | תמונה תשיעית במצגת. | |
--slideshow-image-10 | תמונה עשירית במצגת. |
תבנית CSS
cast-media-player {
--slideshow-interval-duration:
--slideshow-animation-duration:
--slideshow-image-1:
--slideshow-image-2:
--slideshow-image-3:
--slideshow-image-4:
--slideshow-image-5:
--slideshow-image-6:
--slideshow-image-7:
--slideshow-image-8:
--slideshow-image-9:
--slideshow-image-10:
}
מאפייני סימן מים
בזמן שהמדיה פועלת, מוצג .watermark
. בדרך כלל מדובר בתמונה קטנה ושקופה, שמופיעה כברירת מחדל בפינה הימנית התחתונה של המקבל.
אפשר להשתמש במשתנים הבאים כדי להתאים אישית את המאפיינים של .watermark
:
משתנים וברירות מחדל
שם | ערך ברירת מחדל | התיאור |
---|---|---|
--watermark-background | נכס רקע CSS | |
--watermark-color | מאפיין צבע רקע ל-CSS | |
--watermark-image | נכס תמונת רקע CSS | |
--watermark-position | ימין למטה | נכס מיקום רקע ל-CSS |
--watermark-repeat | ללא חזרה | מאפיין חזרה על רקע CSS |
--watermark-size | נכס CSS בגודל רקע |
תבנית CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
הפעלה, מודעות ומאפייני CSS אחרים
אפשר גם להתאים אישית מודעות, גופנים, תמונות נגן ומאפיינים אחרים באמצעות הבורר cast-media-player
.
משתנים וברירות מחדל
שם | ערך ברירת מחדל | התיאור |
---|---|---|
--ad-title | מודעה | הכותרת של המודעה. |
--skip-ad-title | דילוג על המודעה | טקסט של תיבת הטקסט דילוג על המודעה. |
--break-color | hsl(hue, 100%, 50%) | הצבע של סימן ההפסקה למודעה. |
--font-family | Open Sans | משפחת הגופנים למטא-נתונים ולסרגל ההתקדמות. |
--spinner-image | תמונת ברירת המחדל | התמונה שתוצג במהלך ההפעלה. |
--buffering-image | תמונת ברירת המחדל | התמונה שתוצג בזמן אגירת נתונים. |
--pause-image | תמונת ברירת המחדל | התמונה שתוצג בזמן ההשהיה. |
--play-image | התמונה שתוצג במטא-נתונים בזמן ההפעלה. | |
--theme-hue | 42 | הגוון שבו יש להשתמש לנגן. |
--progress-color | hsl(hue, 95%, 60%) | הצבע של סרגל ההתקדמות. |
תבנית CSS
cast-media-player {
--ad-title:
--skip-ad-title:
--break-color:
--font-family:
--spinner-image:
--buffering-image:
--pause-image:
--play-image:
--theme-hue:
--progress-color:
}
למידע נוסף ולאיורים נוספים, קראו את המאמר Styled Media Receiver.
סריקת יתר
לפריסות לטלוויזיה יש כמה דרישות ייחודיות בעקבות התפתחות תקני הטלוויזיה והרצון להציג תמיד תמונה במסך מלא לצופים. מכשירי טלוויזיה יכולים לחתוך את הקצה החיצוני של פריסת האפליקציה כדי לוודא שכל המסך מלא. התנהגות זו נקראת בדרך כלל סריקת יתר. כדי למנוע חיתוך של רכיבים במסך עקב סריקת יתר, כדאי לשלב שוליים של 10% בכל צידי הפריסה.
ממשק ברירת מחדל לאודיו
MetadataType.MUSIC_TRACK
ת. --logo-image
ב. MusicTrackMediaMetadata.albumName
ג. MusicTrackMediaMetadata.title
ד. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
או MusicTrackMediaMetadata.composer
ה. MusicTrackMediaMetadata.images[0]
H. הפעלה/השהיה
קישור נתונים בהתאמה אישית בממשק המשתמש
ב-Cast Web Receiver SDK יש תמיכה בשימוש ברכיב ממשק משתמש מותאם אישית משלך במקום
ב-cast-media-player
.
קישור נתונים בהתאמה אישית בממשק המשתמש מאפשר להשתמש ברכיב מותאם אישית בממשק המשתמש ולהשתמש במחלקה
PlayerDataBinder
כדי לקשר את ממשק המשתמש למצב הנגן, במקום להוסיף את הרכיב
cast-media-player
למקלט. הקישור תומך גם בשליחת אירועים
לשינויים בנתונים, אם האפליקציה לא תומכת בקישור נתונים.
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();
const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
// Update ui according to player state
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
e => {
switch (e.value) {
case cast.framework.ui.State.LAUNCHING:
case cast.framework.ui.State.IDLE:
// Write your own event handling code
break;
case cast.framework.ui.State.LOADING:
// Write your own event handling code
break;
case cast.framework.ui.State.BUFFERING:
// Write your own event handling code
break;
case cast.framework.ui.State.PAUSED:
// Write your own event handling code
break;
case cast.framework.ui.State.PLAYING:
// Write your own event handling code
break;
}
});
context.start();
צריך להוסיף ל-HTML לפחות אחד מ-MediaElement
כדי שמקלט האינטרנט יוכל להשתמש בו. אם יש מספר אובייקטים זמינים מסוג MediaElement
, צריך לתייג את MediaElement
שבו רוצים שה-Web
מקלט ישתמש. כדי לעשות זאת, צריך להוסיף את castMediaElement
לרשימת
הכיתות של הסרטון, כפי שמוצג למטה. אחרת, מקלט האינטרנט יבחר ב-MediaElement
הראשון.
<video class="castMediaElement"></video>