Skip to content

Instantly share code, notes, and snippets.

@tveyben
Forked from sam0737/clock.html
Created February 5, 2021 22:47
Show Gist options
  • Save tveyben/91cd0c2b20a306ef059ae3a9b1d9640f to your computer and use it in GitHub Desktop.
Save tveyben/91cd0c2b20a306ef059ae3a9b1d9640f 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>
@tveyben
Copy link
Author

tveyben commented Feb 5, 2021

From the author sam0737:

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.

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