google-cast - 如何将自定义样式应用于自定义谷歌 CAF 接收器
问题描述
文档不太清楚如何设置自定义 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>
解决方案
我还是新手,所以如果我错了,请有人纠正我。
我认为在修改可用的基本接收器时使用“样式”。如果您要创建自定义接收器,则必须从头开始。
由于您使用的是 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。
推荐阅读
- ruby - 使用字符串数组检查哈希中是否存在嵌套属性
- wordpress - 木材 - 列出类别及其帖子
- sql - 与事件的两个条件匹配的查询 ID - BigQuery
- vuejs2 - Vee-validate : 如何在对象构造后附加几个验证规则
- javascript - 使用“x[i].style.padding”将 CSS 填充重新计算为其原始值的一半
- c++ - 将 C 字符串转换为单个整数
- bash - Bash 自动登录强制门户
- actionscript-3 - 在 Actionscript 3.0 中使用 pinchzoom 控制时间线
- javascript - 通过按 ENTER 按钮防止用户多次提交表单
- javascript - 是什么让 JavaScript 函数异步?