0

I am trying to customize buffering UI of CAF Receiver (https://github.com/googlecast/BasicReceiverCAF).

Now I just have a black screen and a little progress bar on the screen left bottom corner, like from here https://developers.google.com/cast/docs/design_checklist/receiver#receiver-ui-buffer, but without a preview picture.

My question is, how to set this preview instead of the black background?

I tried:

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

But this code affects on progress bar control, it replaces the ring on the image.Also, I tried other properties from here https://developers.google.com/cast/docs/caf_receiver_features

Please help, Thanks in advance.

Jerry Stratton
  • 3,287
  • 1
  • 22
  • 30
Roman Lebedenko
  • 29
  • 1
  • 4

1 Answers1

0

--splash-image

is the property you should use. If it's for some reason not working with: 

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

Try adding a separate style tag containing

#player {
  --splash-image: url("../img/megacast-placeholder.jpg"); 
}
Кristian Кulev
  • 3
  • 4