时间戳

首页 > 解决方案 > 如何对自定义 Chromecast Receiver 应用程序进行基本自定义？喜欢在加载时设置背景图像？

chromecast - 如何对自定义 Chromecast Receiver 应用程序进行基本自定义？喜欢在加载时设置背景图像？

问题描述

我有一个带有最基本代码的自定义 Chromecast 接收器应用程序：

<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>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

它有效，但非常难看。当您点击投射时，应用程序会在加载时显示“MyCustomReceiver”（我的接收器的名称）。我更喜欢为正在加载的内容提供启动画面或缩略图。或者甚至只是删除粗略的“MyCustomReceiver”文本。

我查看了自定义 UI 文档

--playback-logo-image它说您可以使用自定义 UI等关键字。

我试试这个：

body {
  --playback-logo-image: url('https://i.imgur.com/kV5GW0A.jpg');
}

什么都没发生。我希望它会显示为页面下方的徽标。

我尝试将其设置为--buffering-image. 也没有运气。

body {
  --buffering-image: url('https://i.imgur.com/kV5GW0A.jpg');
}

我应该如何定制这个？

标签： chromecastgoogle-castgoogle-cast-sdkcustom-receiver

解决方案

基本的定制可以用 CSS 本身来完成。SDK (V3) 有它自己的 CSS 变量。

 <style>

 body {
      --watermark-size: 120px;
      --watermark-image: url("your-img-location/url");
      --splash-image:url("your-img-location/url");
      --logo-image:url("your-img-location/url");
      --progress-color: #ffd200;
 }

 </style>

在接收器 HTML 文件上添加此标记

推荐阅读