עיצוב הנגן

ה-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]

ו. MediaStatus.currentTime

ז. MediaInformation.duration

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>
הקודם
HLS במיגרציה של נגן Shaka
הבא
אופטימיזציה למסכים חכמים