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 |
| --фоновый цвет | Свойство CSS background-color | |
| --фоновая картинка | Свойство фонового изображения CSS | |
| --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 :
Переменные и значения по умолчанию
| Имя | Значение по умолчанию | Описание |
|---|---|---|
| --logo-фон | Свойство фона CSS | |
| --лого-цвет | Свойство CSS background-color | |
| --изображение логотипа | Свойство фонового изображения CSS | |
| --logo-repeat | неповторяющийся | CSS свойство background-repeat |
| --размер логотипа | Свойство 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-фон | Свойство фона CSS | |
| --splash-цвет | Свойство CSS background-color | |
| --заставка-изображение | Свойство фонового изображения CSS | |
| --всплеск-повторить | CSS свойство background-repeat | |
| --размер заставки | Свойство CSS background-size |
CSS-шаблон
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Слайд-шоу
Чтобы циклически отображать до 10 изображений в режиме ожидания (вместо изображения-заставки), используйте следующие параметры слайд-шоу.
Переменные и значения по умолчанию
| Имя | Значение по умолчанию | Описание |
|---|---|---|
| --слайд-шоу-интервал-длительность | 10 с | Время между изображениями. |
| --слайд-шоу-анимация-длительность | 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 :
Переменные и значения по умолчанию
| Имя | Значение по умолчанию | Описание |
|---|---|---|
| --водяной знак-фон | Свойство фона CSS | |
| --водяной знак-цвет | Свойство CSS background-color | |
| --водяной знак-изображение | Свойство фонового изображения CSS | |
| --водяной знак-позиция | Нижний правый | Свойство CSS background-position |
| --водяной знак-повторить | неповторяющийся | CSS свойство background-repeat |
| --размер водяного знака | Свойство CSS background-size |
CSS-шаблон
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Воспроизведение, реклама и другие свойства CSS
Вы также можете настроить рекламу, шрифты, изображения плеера и другие свойства с помощью селектора cast-media-player .
Переменные и значения по умолчанию
| Имя | Значение по умолчанию | Описание |
|---|---|---|
| --ad-заголовок | Объявление | Название объявления. |
| --skip-заголовок объявления | Пропустить рекламу | Текст текстового поля « Пропустить рекламу ». |
| --break-цвет | hsl(оттенок, 100%, 50%) | Цвет метки рекламной паузы. |
| --семейство шрифтов | Открытый Санс | Семейство шрифтов для метаданных и индикатора выполнения. |
| --spinner-image | Изображение по умолчанию | Изображение для отображения при запуске. |
| --buffering-изображение | Изображение по умолчанию | Изображение для отображения во время буферизации. |
| --пауза-изображение | Изображение по умолчанию | Изображение для отображения во время паузы. |
| --play-image | Изображение для отображения в метаданных во время воспроизведения. | |
| --тема-оттенок | 42 | Оттенок , используемый для игрока. |
| --прогресс-цвет | hsl(оттенок, 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 % со всех сторон макета.
Звуковой интерфейс по умолчанию
Тип метаданных.MUSIC_TRACK
А. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist , MusicTrackMediaMetadata.artist или MusicTrackMediaMetadata.composer
E. 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();
Вы должны добавить хотя бы один MediaElement в HTML, чтобы Web Receiver мог его использовать. Если доступно несколько объектов MediaElement , вы должны пометить тот MediaElement , который должен использовать веб-приемник. Вы делаете это, добавляя castMediaElement в список классов видео, как показано ниже; в противном случае Web Receiver выберет первый MediaElement .
<video class="castMediaElement"></video>