设置播放器的样式

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>

当媒体播放时,播放徽标会显示在接收器的左上角。此属性与 .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

答:--logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtistMusicTrackMediaMetadata.artistMusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

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>