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