设置播放器的样式

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

网络接收器 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 背景属性
--背景颜色 CSS 背景颜色属性
--背景图片 CSS 背景图片属性
--background-duplicate 不重复 CSS 后台重复属性
--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 后台重复属性
--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 属性:

变量和默认值

名称 默认值 说明
--spark-background CSS 背景属性
启动画面颜色 CSS 背景颜色属性
--启动图片 CSS 背景图片属性
--启动重复 CSS 后台重复属性
--spark-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 秒 过渡时长。
--幻灯片图片-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 背景颜色属性
--水印 CSS 背景图片属性
--水印位置 右下角 CSS 背景位置属性
--水印重复 不重复 CSS 后台重复属性
--水印大小 CSS 背景大小属性

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 跳过广告 Skip Ad 文本框的文本。
--break-color hsl(色调, 100%, 50%) 广告插播时间点的颜色。
--font-family Open Sans 元数据的字体系列和进度条。
--旋转图标图片 默认图片 启动时显示的图片。
--buffering-image 默认图片 缓冲时显示的图片。
--pause-image 默认图片 暂停时显示的图片。
--play-image 播放时在元数据中显示的图片。
--主题色调 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 设备可以裁剪应用布局的外边缘以确保填满整个显示屏。此行为通常称为过扫描。通过在布局四周添加 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 接收器 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 对象可用,您应标记您希望网络接收器使用的 MediaElement。为此,您可以在视频类列表中添加 castMediaElement,如下所示;否则,网络接收器将选择第一个 MediaElement

<video class="castMediaElement"></video>