Skip to content

Instantly share code, notes, and snippets.

@jakchagu
Forked from sam0737/clock.html
Last active December 1, 2021 19:18
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jakchagu/a36acca6be8550ac3b72661c87f08d80 to your computer and use it in GitHub Desktop.
Save jakchagu/a36acca6be8550ac3b72661c87f08d80 to your computer and use it in GitHub Desktop.
OBS Studio: A HTML page for showing current date and time in the video + Time Zones
<!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.24.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data.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() {
if (urlParams["tz"]) output.innerText = moment().tz(urlParams["tz"]).format(urlParams["format"] || '');
else output.innerText = output.innerText = moment().format(urlParams["format"] || '');
}, 1000);
c();
</script>
</body>
</html>
@jakchagu
Copy link
Author

jakchagu commented Mar 19, 2020

Building off of sam0703. Just updated the libraries being used to add time zone functionality.
Same usage as sam0703's original, just add a URL parameter based on the moment timezone libraries to set the TZ.

EXAMPLES
Eastern Time
https://gistcdn.githack.com/jakchagu/a36acca6be8550ac3b72661c87f08d80/raw/34e6c4c7674a7ecff8e6cf91c0301c3611cd85c7/clock.html?tz=America/New_York

Pacific Time
https://gistcdn.githack.com/jakchagu/a36acca6be8550ac3b72661c87f08d80/raw/34e6c4c7674a7ecff8e6cf91c0301c3611cd85c7/clock.html?tz=America/Los_Angeles

@aerodavo
Copy link

Is there an easy way to run this as a local file? I often use OBS just for recording, and sometimes am without an internet connection, so I'm worried the timestamp won't work in that case...

Thanks in advance!

@SealOfTime
Copy link

Forked with ability to change language

@wradevelop
Copy link

wradevelop commented Dec 1, 2021

This might be dumb but I can't edit the display output on your fork like I can on the original. I need the tz output as I don't want to use my local time but I can't seem to get the following to work. bold 80px impact; color: white; display: inline-block; border-radius: 5px; padding: 2px 5px; background-color: rgba(0, 0, 0, 0.5)&format=DD MMM YYYY HH:mm:ss;

Essentially I can change either the tz or the display but not both. This is likely a syntax issue but IDK what I am doing wrong.

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