Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

设置播放器的样式

Web 接收器 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);
}

Web 接收器显示：

自定义背景

您可以使用以下变量自定义 .background 属性：

变量和默认值

名称	默认值	说明
--background	黑色	CSS background 属性
--background-color		CSS background-color 属性
--background-image		CSS background-image 属性
--background-repeat	no-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');
}

Web 接收器显示：

您可以使用以下变量自定义 .logo 属性：

变量和默认值

名称	默认值	说明
--logo-background		CSS background 属性
--logo-color		CSS background-color 属性
--logo-image		CSS background-image 属性
--logo-repeat	no-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，并添加动画 waiting... 图标：

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

Web 接收器显示：

自定义启动画面

如果您未设置这些属性，则当接收器处于空闲状态时，默认使用 .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 秒	过渡时长。
--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		幻灯片中的第十张图片。

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	no-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	默认映像	启动时显示的图片。
--buffering-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:
}

如需了解详情和其他插图，请参阅样式化媒体接收器。

过扫描

TV 布局有一些独特的要求，因为 TV 标准不断发展演变，并且用户希望 TV 能够始终向观众呈现全屏画面。TV 设备可能会裁剪应用布局的外边缘以确保填满整个显示屏。此行为通常称为“过扫描”。为避免屏幕元素因过扫描而被裁剪，请在布局的所有边上添加 10% 的边距。

默认音频界面

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist、MusicTrackMediaMetadata.artist 或 MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. 播放 / 暂停

自定义界面数据绑定

Cast Web 接收器 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();

您应向 HTML 添加至少一个 MediaElement ，以便 Web 接收器可以使用它。如果有多个 MediaElement 对象可用，您应标记要让 Web 接收器使用的 MediaElement。为此，请在视频的类列表中添加 castMediaElement，如下所示；否则，Web 接收器将选择第一个 MediaElement。

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

Shaka Player 迁移中的 HLS

针对智能显示屏进行优化

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

播放徽标

播放器背景属性

变量和默认值

CSS 模板

徽标属性

变量和默认值

CSS 模板

启动画面属性

变量和默认值

CSS 模板

幻灯片

变量和默认值

CSS 模板

水印属性

变量和默认值

CSS 模板

播放、广告和其他 CSS 属性

变量和默认值

CSS 模板

过扫描

默认音频界面

MetadataType.MUSIC_TRACK

自定义界面数据绑定

设置播放器的样式