tools,

Stream Countdown to Time

Chris
Chris
       
Feb 04, 2021 · 4 mins read
Stream Countdown to Time
Share this

Have you ever sat on a streamer’s starting soon screen for what seemed like forever? Viewers will appreciate you letting them know how long a starting soon or be right back screen is going to last. This can even prevent them from leaving for another stream.

I (TheRealDarthGuy) created a stream countdown that you can use as an OBS or Streamlabs OBS browser source that will display a custom duration countdown timer. This is an alternative that will count down to a specific time of day.

Enjoy and let me know if you use it!

Customize your Countdown

You can configure your stream countdown by entering desired settings below! Any field left blank will use default values.


24-hour format with colon separator E.g. 18:00 is 6:00PM.
Text alignment within the browser source available space.
Forces a two digit minute display when the minute is less than 10 remaining. This only applies when there are no more hours left in the countdown.
Forces a two digit hour display when the minute is less than 10 remaining.
Keeps the display of hours visible even when no hours are remaining in the timer. Works with Force 2-Digit Hours.
The Text that will be displayed at the end of the countdown.
The size of the font for the countdown and the end text. Represented in numbers only and translates to pixel size within the browser source.
Use Google Color Picker to select a color and paste in either HEX value into this box.
Defaults to "transparent"but will show up as white in browser but transparent in OBS. Use Google Color Picker to select a color and paste in either HEX value into this box.

Further enhancements:

Custom Font

You can customize the font by adding custom CSS to the browser source. There are two requirements:

  1. You MUST have the font installed on your system.
  2. You MUST include the below snippet in the Custom CSS section within the browser source’s configuration window AND replace the {Your Font Name Here} with the name of the system font you’d like to use.
    • E.g. To use a font named “Good Times” the line will be:
        #countdown { font-family: "Good Times" !important; }
      

Note: This is covered at the end of the tutorial video.

#countdown { font-family: "{Your Font Name Here}" !important; }

Tips

  • Make sure you turn on (check) the browser source’s configuration window options:
    1. Shutdown source when not visible
    2. Refresh browser when scene becomes active
  • Ensure that your width setting for the browser source can support your ending text
    • Smaller sizes will cause the text to wrap too a new line
      • This may be desired to create multiple lines
  • Ensure that your height setting for the browser source can support your ending text
    • Small sizes with wrapping text will not show the text that is outside the available space


Chris
Written by Chris •        

I enjoy helping others with tech problems and am enthusiastically trying to be one of the "nice guys" of the inter-webs!

I host streams featuring just chatting and gameplay plus produce videos that give ideas on how to improve your content and interaction with your audience. I have a few nifty tools that I've made free for all who need them and post those at Streamerific.com.

Who am I offline? I'm a father, husband, paintballer, disc golfer, and software engineer! I love sunny weather (who doesn't), movies, and cycling. My friends are family and I love helping others in any way I can!