Skip to content

Instantly share code, notes, and snippets.

@ChrisBibby
Forked from sam0737/clock.html
Created February 3, 2019 12:07
Show Gist options
  • Save ChrisBibby/b1b3b4c1611aae69ccfaa796866b3253 to your computer and use it in GitHub Desktop.
Save ChrisBibby/b1b3b4c1611aae69ccfaa796866b3253 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>
@ChrisBibby
Copy link
Author

ChrisBibby commented Feb 3, 2019

Vanilla
https://gist.githubusercontent.com/ChrisBibby/b1b3b4c1611aae69ccfaa796866b3253/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html

White text
https://gist.githubusercontent.com/ChrisBibby/b1b3b4c1611aae69ccfaa796866b3253/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/clock.html?style=font: bold 30px monospace; color: white;

Rounded rectangle
https://gist.githubusercontent.com/ChrisBibby/b1b3b4c1611aae69ccfaa796866b3253/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/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://gist.githubusercontent.com/ChrisBibby/b1b3b4c1611aae69ccfaa796866b3253/raw/94af10ef67d6c7e48295efaa43cdd2847d2fd884/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/

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