Эта страница переведена с помощью Cloud Translation API.

Стиль игрока

SDK Web Receiver предоставляет встроенный пользовательский интерфейс проигрывателя. Чтобы реализовать этот интерфейс в вашем собственном приложении 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
--background-color		Свойство CSS background-color
--background-image		Свойство CSS background-image
--background-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');
}

Отображение веб-приемника:

Для настройки свойств .logo можно использовать следующие переменные:

Переменные и значения по умолчанию

Имя	Значение по умолчанию	Описание
--логотип-фон		свойство CSS background
--цвет логотипа		Свойство CSS background-color
--логотип-изображение		Свойство CSS background-image
--logo-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 и добавить анимированную иконку ожидания...

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

Отображение веб-приемника:

Пользовательский всплеск

Если вы не зададите эти параметры, в режиме ожидания ваш приемник будет использовать настройки .logo или название приложения по умолчанию.

Для настройки свойств .splash можно использовать следующие переменные:

Переменные и значения по умолчанию

Имя	Значение по умолчанию	Описание
--splash-background		свойство CSS background
--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с	Продолжительность переходного периода.
--слайдшоу-изображение-1		Первое изображение в слайд-шоу.
--слайдшоу-изображение-2		Второе изображение в слайд-шоу.
--слайдшоу-изображение-3		Третье изображение в слайд-шоу.
--слайдшоу-изображение-4		Четвёртое изображение в слайд-шоу.
--слайдшоу-изображение-5		Пятое изображение в слайд-шоу.
--слайдшоу-изображение-6		Шестое изображение в слайд-шоу.
--слайдшоу-изображение-7		Седьмое изображение в слайд-шоу.
--слайдшоу-изображение-8		Восьмое изображение в слайд-шоу.
--слайдшоу-изображение-9		Девятое изображение в слайд-шоу.
--слайдшоу-изображение-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 background
--watermark-color		Свойство CSS background-color
--watermark-image		Свойство CSS background-image
--watermark-position	нижний правый	Свойство CSS background-position
--watermark-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	Изображение по умолчанию	Изображение, которое будет отображаться при запуске.
--буферизация-изображения	Изображение по умолчанию	Изображение, которое будет отображаться во время буферизации.
--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

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist , MusicTrackMediaMetadata.artist или MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. Воспроизведение / Пауза

Пользовательская привязка данных пользовательского интерфейса

SDK Cast Web Receiver поддерживает использование собственного пользовательского элемента интерфейса вместо 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

Оптимизация для смарт-дисплеев

Стиль игрока Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Логотип воспроизведения

Свойства фона игрока

Переменные и значения по умолчанию

CSS-шаблон

Свойства логотипа

Переменные и значения по умолчанию

CSS-шаблон

Свойства брызг

Переменные и значения по умолчанию

CSS-шаблон

Слайд-шоу

Переменные и значения по умолчанию

CSS-шаблон

Свойства водяного знака

Переменные и значения по умолчанию

CSS-шаблон

Воспроизведение, реклама и другие свойства CSS

Переменные и значения по умолчанию

CSS-шаблон

Пересканирование

Стандартный интерфейс аудио

MetadataType.MUSIC_TRACK

Пользовательская привязка данных пользовательского интерфейса

Стиль игрока