0

カスタム CAF レシーバーのスタイルを設定する方法については、ドキュメンテーションが明確ではありません (可能な場合)。headにスタイリングを追加しても、スタイリングは適用されません。クロムインスペクターでは、スタイリングが適用されないことは明らかです。

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>

4

1 に答える 1

0

私はまだこれに慣れていないので、間違っている場合は誰かが私を修正してください。

「スタイリング」は、利用可能な基本的な受信機を変更するときに使用されると思います。カスタム レシーバーを作成する場合は、最初から作成する必要があります。

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")');

編集：CSSに並置されたJavascriptを使用してスタイルを変更するためのものであることを振り返って申し訳ありません。

于 2020-06-30T16:37:12.990 に答える