Your add here for 15$/month, ask more here
Tutorial how to use obscountdown countdown timer through browser source in OBS Studio or Streamlabs
One of OBS's most adaptable sources is the browser source. It is basically a web browser that you can directly add and control from OBS. You can use this to carry out a variety of unique layout, image, video, and even audio operations. You can add directly to OBS anything that you can write to run in a standard browser.
By default, the browser source doesn't offer many options and is rather simple. The list of options is explained below.
| Local File: | Indicates to the source whether you are loading a web page locally or remotely. | |
| Width: | Sets the width of the browser page's viewport. | |
| Height: | Defines the browser page's viewport height. | |
| FPS: | Sets the frame rate at which the browser page will render. | |
| CSS: | By default, the background is made transparent, the body's margins are eliminated, and the scroll bar is hidden, this setting overrides the default CSS style from the selected resource/web page. | |
| Shutdown source when not visible: | when the source is no longer visible, unloads the page. | |
| Refresh browser source when scene becomes active: | The source is reloaded after the scene is started. This feature allows you to refresh the browser source without having to interact with it because it simply refreshes each time you switch scenes. | |
| Refresh cache of current page: | Clicking this will immediately refresh the page and reload any content. |
| Parameter | Default value | Description |
|---|---|---|
| &countdown_direction | on | If it's turned on on, Seconds will be decremented by the system. If it's not in the url, the system will increment the seconds. |
| &hours_count | 24 | How many hours to count down from |
| &minutes_count | 0 | How many minutes to count down from |
| &seconds_count | 0 | How many seconds to count down from |
| &show_hours | on | Hours digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide hours and their associated labels. |
| &show_minutes | on | Minutes digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide minutes and their associated labels. |
| &show_seconds | on | Seconds digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide seconds and their associated labels. |
| &top_title | Your+countdown+preview | Title that shows above the countdown, can be left blank |
| &top_title_size | 6 / Big | Top title font size in rem "Root element's font-size" |
| &end_title | Your+ending+text | Title that shows when countdown reaches 0, can be left blank |
| &hours_label | Hours | Hours label chose to make it editable so that it may be used in any language. |
| &minutes_label | Minutes | Minutes label chose to make it editable so that it may be used in any language. |
| &seconds_label | Seconds | Seconds label chose to make it editable so that it may be used in any language. |
| &font_family | ABeeZee | Every Google font may be used |
| &font_weight | 400 Regular | Auto complete for specific fonts to have them working properly |
| &digit_animation | none | Animation when any of the digits changes it's value |
| &top_title_color | #000000 | Text color for title above the countdown |
| &end_title_color | #000000 | Text color for ending title |
| &digits_color | #000000 | Text color for countdown digits |
| &labels_color | #000000 | Text color for countdown labels |
Click on the url box to copy the url to your clipboard
Open your streaming software, in this example I'm using OBS. Move to your sources panel after starting the app and establish a new source for your preferred scene.
From the sources list, make sure you select the Browser source.
Give the newly created source a name; I recommend using a name that corresponds to the scope of this countdown, such as a be right back page or a going live shortly page.
Paste the copied URL into the desired URL entry in the source settings window. Because we will subsequently resize it to fit the spot where we want to insert the countdown, choose a window size of 1920x1080px.
Now, if we followed all of the preceding procedures correctly, we must see the countdown. I'll have to resize it to fit where we want to put it. We can resize the window by dragging the left or right corner till it fits the space.
If you're using an animation that takes a lot of space, I wouldn't recommend cropping the window; however, if you want to save some space, holding down the ALT key and dragging the window's borders will crop the window.
To open the interaction window, right-click on the source in the sources dock and select interact.
You can engage with the interaction window as if it were a standard web browser after it is open and selected/focused. Before pressing any hotkey, make sure the interaction window is selected/focused.