如何将自定义样式应用于自定义谷歌 CAF 接收器答案

【问题标题】：How do I apply custom styling to custom google CAF receiver如何将自定义样式应用于自定义谷歌 CAF 接收器
【发布时间】：2020-08-02 15:24:18
【问题描述】：

文档对如何设置自定义 CAF 接收器的样式不太清楚（如果可能的话）。即使向 head 添加样式，也不会应用样式。在 chrome 检查器中，很明显从未应用样式。

const context = cast.framework.CastReceiverContext.getInstance()
const playerManager = context.getPlayerManager();

// unrelated code

// end 

/***
 * start player
 * */
context.start()

body {
  --playback-logo-image: url('res/logo.png');
}

cast-media-player {
  --theme-hue: 180;
  --progress-color: rgb(255, 255, 255);
  --splash-image: url('res/background-2.png');
  --splash-size: cover;

}

<html>
<head>
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
    </script>
    <link rel="stylesheet" href="css/receiver.css" media="screen" />
</head>

<body>
    <cast-media-player id="player"></cast-media-player>
    <script type="text/javascript" 
        src="js/receiver.js">
    </script>
</body>

</html>

【问题讨论】：

标签： google-cast google-cast-sdk caf-receiver-sdk

【解决方案1】：

我还是新手，如果我错了，请有人纠正我。

我认为在修改可用的基本接收器时会使用“样式”。如果您要创建自定义接收器，则必须从头开始。

由于您使用的是 cast-media-player 元素，我觉得您正在寻找自定义基本接收器的 ui 外观。

看起来（通过查看文档）您在 js 文件中缺少此代码。

来自：https://developers.google.com/cast/docs/caf_receiver/customize_ui

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

编辑：很抱歉，回头看它是为了使用 Javascript 来更改样式，而不是 CSS。

【讨论】：