Skip to content

Instantly share code, notes, and snippets.

@sam0737
Last active April 25, 2024 12:24
Show Gist options
  • Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.
Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.
OBS Studio: A HTML page for showing current date and time in the video
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A simple clock</title>
</head>
<body translate="no" >
<div id="output"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script>
// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
var urlParams;
(function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
var output = document.getElementById("output");
if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
var c;
setInterval(
c = function() {
output.innerText = moment().format(urlParams["format"] || '');
}, 1000);
c();
</script>
</body>
</html>
@sam0737
Copy link
Author

sam0737 commented Sep 8, 2017

Usage

A script for OBS Studio (https://obsproject.com/) to embed a current date and timestamp. No other softwares and plugins are needed. Just OBS Studio and the built-in Browser Source input.

這代碼是為了在OBS Studio中嵌入現在的日期和時間而寫的。而且不需要安裝其他軟件或插件即可使用,只需要OBS Studio和原生的Browser Source輸入。

For usage, please see this video:
具體用法請參看這短片:
https://youtu.be/wVbP8GQTLG8

Examples

  • Vanilla
    https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html

  • White text
    https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font: bold 30px monospace; color: white;

  • Rounded rectangle
    https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font: bold 30px monospace; color: lightgray; display: inline-block; border-radius: 5px; padding: 2px 5px; background-color: rgba(0, 0, 0, 0.5);

  • With US date formatting
    https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font: bold 30px monospace; color: lightgray; display: inline-block; border-radius: 5px; padding: 2px 5px; background-color: rgba(0, 0, 0, 0.5)&format=MMM DD YYYY HH:mm:ss;

Parameters

Use style to add more style to the output element
While bodyStyle for the style to the body element
Use format to control the date format. For the syntax, see https://momentjs.com/docs/#/displaying/format/

License

This software is licensed under the MIT License.

@Flybel
Copy link

Flybel commented Mar 7, 2018

You probably won't need it, but I forked it to change the time to UTC because I have the need for it. All credit goes to sam0737, thank you for providing this.

@SA-Deadspin
Copy link

I've also forked this to display EST time. All credit to sam0737

@eduardochinen
Copy link

FYI, When I used this I had to disable Browser Source Hardware Acceleration in OBS Studio v22.0.2 64bit - Settings/Advanced/Sources, otherwise it didn't appear on screen. Thanks for this wonderful and easy solution!

@roceys
Copy link

roceys commented Jan 22, 2019

非常感谢it9
完美啊,但在大陆使用被墙了得vpn才能上rawgit,我复制了一份。
http://roceys.cn/clock?style=font: bold 30px monospace; color: red; display: inline-block; border-radius: 5px; padding: 2px 5px;&format=YYYY-MM-DD HH:mm:ss

2019年1月23日 03:38:10

@kirinelf
Copy link

kirinelf commented Jun 17, 2019

Hi! I've been trying to do a local version of the this saved as a HTML file which you modify in an editor then load up as a local file in Browser source. I've forked this with the changes I've made, but for some reason border-radius isn't working. Any ideas?

Image
My fork

@SJP176
Copy link

SJP176 commented Feb 26, 2020

@jakchagu
Copy link

Added time zone selection functionality in my fork. Thanks to sam0703 for the initial project!

@RisheetThankiBBC
Copy link

Does this still work?

@jakchagu
Copy link

jakchagu commented May 1, 2020

Does this still work?

Yes. The code does. Rawgit may not be useable. See @SJP176's comment above.

@Cairl
Copy link

Cairl commented Jun 22, 2021

this how can change the font?

@JonJaded
Copy link

JonJaded commented Oct 5, 2021

Hey is it just me or does this not work anymore? I can't style it at all.

EDIT: I see the clock in this format - 2021-10-04T22:24:30-04:00
EDIT2: Use the one linked by SJP176.

@SunnyLeu
Copy link

SunnyLeu commented Oct 6, 2021

The style is unavailable now?

@erevrav
Copy link

erevrav commented Oct 8, 2021

Hey is it just me or does this not work anymore? I can't style it at all.

EDIT: I see the clock in this format - 2021-10-04T22:24:30-04:00 EDIT2: Use the one linked by SJP176.

thanks for asking this question & then posting your answer, @JonJaded -- and thanks for the fix, @SJP176 (um, 20 months ago... :))

@jmdv-es
Copy link

jmdv-es commented Oct 28, 2021

Rawgit is shutting down soon. Here is an alternative link: https://gistcdn.githack.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html

Working perfectly. Much thanks!

@jcschultz01
Copy link

I ended up pasting the URL from SJP176 plut the old text formatting. Otherwise I get the YY-MM-DDTHH:MM:SS-04:00 format.

https://gistcdn.githack.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html?style=font: bold 30px monospace; color: blue; display: inline-block; border-radius: 5px; padding: 2px 5px;&format=YYYY-MM-DD HH:mm:ss

Working pretty well now. Thanks.

@Marianoarauz
Copy link

THANK YOU. AWESOME

@The-Gig
Copy link

The-Gig commented Nov 23, 2021

Lol, before noticing these comments, I found a partial workaround: using OBS "browser" plugin "custom CSS" field to set the font size and color (e.g. body { background-color: rgba(0, 0, 0, 0.5); margin: 0px 5px; overflow: hidden; font-size: 50px; color: lightgray }), although I was not able to change the time format that way (so it was still YYYY-MM-DD etc.).
Learning that just replacing "cdn.rawgit.com" with "gistcdn.githack.com" in the original URLs fixed them has been a relief! Thank you @SJP176 !

Wondering if something would be broken (as it looks like the URLs may refer to specific github commits?) in case @sam0737 updates the instruction page with the new URLs... [UPDATE: Probably not... the instructions are just in a comment. So, unless github prevents from editing older posts, he should be able to update the instructions without breaking anything at all!]

@alkaris2
Copy link

Rawgit URL is dead now, it's no longer accessible, so you have to use a different URL to get the clock.

@nidefawl
Copy link

@LHY51
Copy link

LHY51 commented Oct 21, 2023

I want it to display fractional seconds, but, I can't get it to work. Is there any way to have an refresh rate or auto-update function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment