chromecast - CAF 接收器定制

Question

我正在尝试自定义 CAF 接收器的缓冲 UI（https://github.com/googlecast/BasicReceiverCAF）。

现在我在屏幕左下角只有一个黑屏和一个小进度条，就像从这里https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-buffer一样，但没有预览图片。

我的问题是，如何设置此预览而不是黑色背景？

我试过了：

 let playerElement = document.getElementById('player');
 playerElement.style
    .setProperty('--buffering-image', 'url("/img/megacast-placeholder.jpg")'); 

但是此代码会影响进度条控件，它会替换图像上的环。此外，我从这里尝试了其他属性https://developers.google.com/cast/docs/caf_receiver_features

请帮助，在此先感谢。

Answer 1

--splash-image

是您应该使用的属性。如果由于某种原因无法使用：

playerElement.style.setProperty('--splash-image', 'url("../img/megacast-placeholder.jpg")'); 

尝试添加一个单独的样式标签，其中包含

#player {
  --splash-image: url("../img/megacast-placeholder.jpg"); 
}