Web Receiver SDK 提供内置播放器界面。如需在自定义 Web 接收器应用中实现此界面,您需要将 cast-media-player
元素添加到 HTML 文件的正文中。
<body>
<cast-media-player></cast-media-player>
</body>
借助 CSS 变量,您可以自定义各种 cast-media-player
属性,包括播放器背景、启动画面、字体系列等。您可以使用内嵌 CSS 样式、CSS 样式表或 JavaScript 中的 style.setProperty
添加这些变量。
在接下来的部分中,您将了解如何自定义媒体播放器元素的每个区域。您可以使用以下模板快速上手。
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>
Playback 徽标
当媒体播放时,播放徽标会显示在接收器的左上角。此属性与 .logo
类是分开的。您可以通过 body
选择器自定义 --playback-logo-image
。
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-color | CSS 背景颜色属性 | |
--background-image | CSS 背景图片属性 | |
--background-repeat | 不重复 | CSS background-重复属性 |
--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 background-重复属性 |
--logo-size | CSS 背景大小属性 |
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');
}
网络接收器展示:
如果未设置这些属性,在闲置时,接收器默认采用您的 .logo
设置或应用名称。
您可以使用以下变量来自定义 .splash
属性:
变量和默认值
名称 | 默认值 | 说明 |
---|---|---|
--splash-background | CSS 背景属性 | |
--splash-color | CSS 背景颜色属性 | |
--splash-image | CSS 背景图片属性 | |
--splash-repeat | CSS background-重复属性 | |
--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 | 幻灯片中的第 8 张图片。 | |
--slideshow-image-9 | 幻灯片中的第 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 background-重复属性 |
--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 | Ad | 广告的标题。 |
--skip-ad-title | 跳过广告 | 跳过广告文本框的文字。 |
--break-color | hsl(色相, 100%, 50%) | 广告插播标记的颜色。 |
--font-family | Open Sans | 元数据和进度条的字体系列。 |
--spinner-image | 默认图片 | 启动时显示的图片。 |
--buffering-image | 默认图片 | 在缓冲时显示的图片。 |
--pause-image | 默认图片 | 暂停时显示的图片。 |
--play-image | 播放时显示在元数据中的图片。 | |
--theme-hue | 42 | 播放器使用的色调。 |
--progress-color | 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:
}
如需了解详情并查看其他图示,请参阅自定样式的媒体接收器。
过扫描
TV 布局有一些独特的要求,因为 TV 标准的演变,以及始终向观看者呈现全屏画面的需要。TV 设备可以裁剪应用布局的外边缘,以确保填满整个显示屏。此行为通常称为过扫描。 通过在布局的各侧留出 10% 的外边距,避免屏幕元素因过扫描而被裁剪。
默认音频界面
MetadataType.MUSIC_TRACK
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
元素添加到接收器中。如果应用不支持数据绑定,则 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();
您应在 HTML 中至少添加一个 MediaElement
,以便网络接收器可以使用。如果有多个 MediaElement
对象可用,您应标记想让 Web 接收器使用的 MediaElement
。为此,您可以在视频的类列表中添加 castMediaElement
,如下所示;否则,Web 接收器会选择第一个 MediaElement
。
<video class="castMediaElement"></video>