分类目录: 工作
一个简单的 OBS 时钟 Overlay 页面代码
Post date:
Author: wenbo828
Number of comments: no comments
工作原因平时经常用到 OBS 做直播推流测试，其中一个重要的测试项是直播端到端延时（Latency），不同协议不同 Latency 表现，有时需要精确到毫秒级别做对比，一般来讲会使用 OBS 加载一个外部在线时钟网页，比如https://time.is，但这个时间长了不明原因会页面假死导致总得手工刷新，而且页面广告比较碍眼。
后来发现某个项目文档截图里一个半透明时钟效果，Google 了半天，原来是一段 html 代码，可以保存为本地 html 文件再被 OBS 载入即可，好用，保存。
页面效果
可以在代码里调整显示格式，比如日期格式、时间格式等，以及页面字号之类的来做一些简单的样式调整。
OBS 配置效果
添加一个 Browser 实例，填入该 html 本地保存路径，配置一下显示尺寸。
调整到需要的画面位置即可
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A simple clock</title>
</head>
<body translate="no" >
<div id="output"
style= "display: inline-block;
font-family: monospace;
font-size: 72px;
text-align: left;
color: white;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);">
</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"] || 'DD/MMM/YYYY ddd HH:mm:ss.SSS ZZ');
// output.innerText = moment().format(urlParams["format"] || '');
}, 1);
c();
</script>
</body>
</html>
<!--
https://momentjs.com/docs/#/displaying/format/
Month M 1 2 ... 11 12
Mo 1st 2nd ... 11th 12th
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 ... 30 31
Do 1st 2nd ... 30th 31st
DD 01 02 ... 30 31
Day of Year DDD 1 2 ... 364 365
DDDo 1st 2nd ... 364th 365th
DDDD 001 002 ... 364 365
Day of Week d 0 1 ... 5 6
do 0th 1st ... 5th 6th
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
Day of Week (Locale) e 0 1 ... 5 6
Day of Week (ISO) E 1 2 ... 6 7
Week of Year w 1 2 ... 52 53
wo 1st 2nd ... 52nd 53rd
ww 01 02 ... 52 53
Week of Year (ISO) W 1 2 ... 52 53
Wo 1st 2nd ... 52nd 53rd
WW 01 02 ... 52 53
Year YY 70 71 ... 29 30
YYYY 1970 1971 ... 2029 2030
YYYYYY -001970 -001971 ... +001907 +001971
Note: Expanded Years (Covering the full time value range of approximately 273,790 years forward or backward from 01 January, 1970)
Y 1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Era Year y 1 2 ... 2020 ...
Era N, NN, NNN BC AD
Note: Abbr era name
NNNN Before Christ, Anno Domini
Note: Full era name
NNNNN BC AD
Note: Narrow era name
Week Year gg 70 71 ... 29 30
gggg 1970 1971 ... 2029 2030
Week Year (ISO) GG 70 71 ... 29 30
GGGG 1970 1971 ... 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 11 12
hh 01 02 ... 11 12
k 1 2 ... 23 24
kk 01 02 ... 23 24
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
SSSS... SSSSSSSSS
000[0..] 001[0..] ... 998[0..] 999[0..]
Time Zone z or zz EST CST ... MST PST
Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they *do* work if you are using a specific time zone with the moment-timezone addon.
Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp
x 1360013296123
-->
Code language: HTML, XML (xml)