Local Playback Styling

Scott Murphy

• April 21, 2020 10:07

Hi, is there a way to change the color of the uploading progress text on local playback?  Currently it is white and when a user records a video with a white background they can't see the progress and think that the upload/site has frozen.

Otherwise, I was thinking of using the upload_progress event of the embed to show the progress outside of the embedding.  However, I'd like to know how I can turn off the upload progress text in both localplayback and normal embed (say when webrtc_streaming is used in Safari).  So this way the user doesn not see the upload progress twice.

Finally, is there a property on the embedding that will tell me is localplayback will be used or not?

 

Thank you!

0

• 

  Bane

  • April 23, 2020 15:43

  Hi Scott,

  Yes, all of the aspects of our embeddings can be changed in any way you like.

  The CSS code would be used in all cases, however you could really even do it through JS if that was needed.

  Now if you tell me the theme you are using I could help you with the exact class that you would use for this (some classes change based on your theme name and color.

  In terms of knowing when the localplayback is available or not, there is no option at this time. With that said, you could listen for "ready_to_play" event as that would tell you when the video can be played. This will fire before the playing event (when someone actually starts the playback).

  If the video is still uploading when the event telling you that video is ready to play fires the video is available for local playback.

  Now with all of that said, you could really change the text or background of the embedding notification and have it styled in such a way that it is easy to see what it says, regardless of the background.

  Actually some of our themes have this type of implementation already so I do suggest checking out all of our themes to see what looks best for you if you did not do so before :)

  Recorder themes: https://ziggeo.com/features/video-recorder-themes/

  Player themes: https://ziggeo.com/features/video-player-themes/

  0
• 

  Scott Murphy

  • April 23, 2020 16:18

  Hi Bane,

  Thanks for the detailed reply.  We are using the Modern theme for recording with the default color of white.  Please note that I did try to change the theme color to red when setting up the embed parameters but the 'uploading' text in the upper left hand of local playback was still white even through the recorder was red.  I am using r34 of both the JS and CSS files.

  We prefer not to color the theme or change the theme as we prefer Modern.  I would greatly appreciate the classnames for removing the uploading text so we can hide it and move the uploading progress outside of the embedded recorder.  The upload always goes so fast that I never had enough time to find the classname using the console :-)

  Cheers!

   

   

  0
• 

  Natasha Calleia

  • April 29, 2020 20:40

  Hi Scott,

  For the modern theme with localplayback the class you’re looking for is ba-videoplayer-topmessage-message. You should be able to use CSS to either change the color or completely hide the text, as you mentioned on your previous message. :)

  0
• 

  Scott Murphy

  • May 18, 2020 11:02

  Thank you!  I was able to put a slightly opaque background behind the text (as well as increasing the font-size) so this messaging can be seen in any background.

   

   

  0

Please sign in to leave a comment.