עיצוב הנגן

‫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);
}

תצוגה של Web Receiver:

רקע בהתאמה אישית

אפשר להשתמש במשתנים הבאים כדי להתאים אישית מאפיינים של .background:

משתנים וערכי ברירת מחדל

שם ערך ברירת מחדל תיאור
‫‎--background שחור מאפיין הרקע של CSS
--background-color מאפיין CSS background-color
--background-image מאפיין CSS background-image
--background-repeat no-repeat מאפיין CSS background-repeat
--background-size גרסת כיסוי מאפיין CSS background-size

תבנית 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');
}

תצוגה של Web Receiver:

לוגו בהתאמה אישית

אפשר להשתמש במשתנים הבאים כדי להתאים אישית מאפיינים של .logo:

משתנים וערכי ברירת מחדל

שם ערך ברירת מחדל תיאור
--logo-background מאפיין הרקע של CSS
--logo-color מאפיין CSS background-color
--logo-image מאפיין CSS background-image
--logo-repeat no-repeat מאפיין CSS background-repeat
--logo-size מאפיין CSS background-size

תבנית CSS

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

מאפייני מסך הפתיחה

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

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

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

תצוגה של Web Receiver:

מסך פתיחה בהתאמה אישית

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

אפשר להשתמש במשתנים הבאים כדי להתאים אישית מאפיינים של .splash:

משתנים וערכי ברירת מחדל

שם ערך ברירת מחדל תיאור
--splash-background מאפיין הרקע של CSS
--splash-color מאפיין CSS background-color
--splash-image מאפיין CSS background-image
--splash-repeat מאפיין CSS background-repeat
--splash-size מאפיין CSS background-size

תבנית 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 background-color
--watermark-image מאפיין CSS background-image
--watermark-position ימין למטה מאפיין CSS background-position
--watermark-repeat no-repeat מאפיין CSS background-repeat
--watermark-size מאפיין CSS background-size

תבנית 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

‫A. --logo-image

ב. MusicTrackMediaMetadata.albumName

ג. MusicTrackMediaMetadata.title

ד. ‫MusicTrackMediaMetadata.albumArtist,‏ MusicTrackMediaMetadata.artist או MusicTrackMediaMetadata.composer

ה. MusicTrackMediaMetadata.images[0]

ו. MediaStatus.currentTime

‫G. MediaInformation.duration

ח. הפעלה/השהיה

קישור נתונים לממשק משתמש בהתאמה אישית

‫Cast Web Receiver SDK תומך בשימוש ברכיב ממשק משתמש מותאם אישית משלכם במקום ב-cast-media-player.

שיוך נתונים לממשק משתמש מותאם אישית מאפשר לכם להשתמש ברכיב ממשק משתמש מותאם אישית משלכם ולהשתמש במחלקה PlayerDataBinder כדי לשייך את ממשק המשתמש למצב הנגן, במקום להוסיף את הרכיב cast-media-player למקלט. ה-binder תומך גם בשליחת אירועים לשינויים בנתונים, אם האפליקציה לא תומכת בקישור נתונים.

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();

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

<video class="castMediaElement"></video>
הקודם
HLS במיגרציה של נגן Shaka
הבא
אופטימיזציה למסכים חכמים