דף זה תורגם על ידי Cloud Translation API.

עיצוב הנגן

ה-SDK של מכשיר האינטרנט של המקלט מספק ממשק משתמש מובנה של הנגן. כדי להטמיע את ממשק המשתמש הזה את האפליקציה המותאמת אישית ב-Web שאתה משתמש במקלט, עליך להוסיף את הרכיב 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:

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

שם	ערך ברירת מחדל	תיאור
--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:
}

למידע נוסף ולאיורים נוספים, מקלט מדיה מסוגננת.

סריקת יתר

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

ממשק משתמש אודיו המוגדר כברירת מחדל

MetadataType.MUSIC_TRACK

ת. --logo-image

ב. MusicTrackMediaMetadata.albumName

ג. MusicTrackMediaMetadata.title

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

ה. MusicTrackMediaMetadata.images[0]

ו. MediaStatus.currentTime

ג. MediaInformation.duration

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

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

ה-SDK של מקלט האינטרנט ל-Cast תומך בשימוש ברכיב ממשק משתמש מותאם אישית במקום ברכיב ממשק משתמש מותאם אישית 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();

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

<video class="castMediaElement"></video>

HLS במיגרציה של נגן Shaka

אופטימיזציה למסכים חכמים