Als Blogger oder Youtuber – halt alle die heute so Content-Creator sind – kennen dieses Problem. Man fragt sich regelmässig was man denn als nächstes für ein Video drehen oder ein Blogpost schreiben soll. Und darum ist es immer schön, wenn Zuschauer oder Blogleser hat die dann mit einem Problem an uns heran treten und wir ihnen helfen können.

Heute hat jemand in einer Ecamm Live Gruppe gefragt, wie man denn ein Wochentag & Datum & Uhrzeit in einen Livestream einbauen kann. In Ecamm Live ist es nun mal so, dass man „nur“ die Uhrzeit als Overlay einbinden kann.

Und auch die Einstellungen in dieser Uhr sind nur sehr begrenzt.

Da ich ja bereits 27 Jahre am programmiere und Webseiten bauen (man bin ich ein alter Sack) sind mir auf die Schnelle gleich mal eine Handvoll von Lösungen eingefallen. Man kann schnell mit PHP, JS, ASP, Python und dazu alle Frameworks die auf diesen Sprachen basieren sowas bauen.

Nun stellt sich die Frage welcher Weg denn dafür wohl der klügste ist. Natürlich könnte ich euch hier den Weg mit C# zeigen – aber ich habe mir 2 Wege ausgesucht. Ich zeig euch in diesem Blogbeitrag mal den Weg mit PHP und einmal mit Javascript. Welchen Weg ihr wählt ist relativ egal – ihr braucht dafür einfach einen Ort wo ihr eine php oder html Datei abspeichern könnt – also ein Hosting. Und da jedes normale Hosting heute html wie auch php kann ist es egal.

Wenn ihr besorgt seid, was denn der Computer oder das Hosting stärker belastet, dann nehmt das Javascript. Javascript oder JS wird ja im Browser direkt ausgeführt und PHP eher im Server (Mir ist bewusst, diese Antwort ist sehr einfach gehalten – wer also Codet wie ich – killt mich bitte nicht 🙂 ).

Video

Hier findet ihr das Video wo ich noch mehr ins Detail gehe und ihr sehen könnt, wie man das ganze aufbaut und vor allem selbst anpassen kann.

Javascript

Also das hier ist der nackte Code für Javascript. Kurz gesagt nehmt eine HTML Seite und packt diesen Code ein und ihr habt die Anzeige. Damit ihr dann den Text noch ein wenig designen könnt müsst ihr mit der CSS Klasse ≪tageszeit≫ arbeiten.

1
2
3
4
5
6
7
8
9
10
11

<div class="tageszeit">
<script language="JavaScript" type="text/javascript">
 
var datum = new Date();
wochentag=new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag","Samstag");
 
document.write(wochentag[datum.getDay()]);
document.write(" der "+ datum.getDate() +"."+ (datum.getMonth()+1)+"."+datum.getFullYear()+"  "+datum.getHours()+":"+datum.getMinutes()+":"+datum.getSeconds());
 
</script>
</div>

Wenn ihr gerne wollt, dass der Monat, die Minute, die Stunde und die Sekunden alle 2-stellig sind, dann müsst ihr diesen Code hier nehmen und den alten – in der Zeile 8 – ersetzen.

1

document.write(" der "+ ("0" + datum.getDate()).slice(-2) +"."+ ("0" + (datum.getMonth()+1)).slice(-2) +"."+datum.getFullYear()+"  "+("0" + datum.getHours()).slice(-2)+":"+("0" + datum.getMinutes()).slice(-2)+":"+("0" + datum.getSeconds()).slice(-2));

PHP

Und das hier ist der Code für den PHP Weg. Auch hier habe ich wieder die CSS Klasse ≪tageszeit≫ verwendet damit man den Text designen kann. Also einfach den Code nehmen und in ein PHP File einbauen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="tageszeit">
<?php 
$page = $_SERVER['PHP_SELF'];
$sec = "10";
 
header('Refersh: 1 url=datum.php');
 
date_default_timezone_set("Europe/Berlin");
setlocale(LC_TIME, "de_DE.utf8");
 
 
$timestamp = time();
 
$datum = date("d.m.Y", $timestamp);
$uhrzeit = date("H:i:s", $timestamp);
 
$wochentag = strftime("%A"); 
 
ECHO "$wochentag der $datum   $uhrzeit";
?>
</div>

CSS

Hier habt ihr den Code mit dem ihr den Hintergrund der Seite auf durchsichtig umstellen könnt und auch um die Schrift anzupassen. Was welcher Code macht habe ich kurz daneben kommentiert – siehe die /* blablabla */ Texte.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

* {
        background-color: rgba(0,0,0,0); /* Durchsichtiger Hintergrund*/
 
    }    
    .tageszeit {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
 
        color: #001155; /* Schrift-Farbe */
        font-size: 60px; /* Schrift-Grösse */
        font-weight: 900; /* Dicke der Schrift */
    }

Meta

Nun damit der Effekt auch wirklich funktioniert müsst ihr dafür sorgen, dass diese Seiten regelmässig neu geladen werden und das macht mit meinem Meta Befehl den man in den Header Bereich der Seite einbauen muss.

1

<meta http-equiv="refresh" content="1">

Die Zahl neben dem Content definiert all wie viele Sekunden die Webseite neu geladen werden muss. Ich persönlich würde nicht jede Sekunde nehmen – ich würde sogar nur Stunde und Minute einblenden und dann muss man die Seite nur alle 60 Sekunden neu laden lassen. Das ist in meinen Augen der smarte Weg – wer das aber nicht will, der kann hier die 1 setzen und dann wird oft und schnell geladen.

Download

Hier könnt ihr nun meine beiden Beispiele herunterladen. Einfach entzippen und dann anpassen und über ein FTP Tool auf euer Hosting / in euren Server übertragen, die neue URL im Browser aufrufen und danach einfach genau diese URL im Widget Overlay in Ecamm Live eintragen.
PHP / JS File Download

Fazit

Das sieht jetzt auf den ersten Blick sehr kompliziert aus – aber es ist wirklich sehr einfach. Ihr habt sicher auch schon das passende Video angeschaut, wo ich euch zeige wie ihr mit diesen Codes umgehen müsst. Wie ich schon sagte – jeder der einen Texteditor hat, kann das „programmieren“ und wer sich das nicht zutraut – ich werde ganz unten noch die Beispiele verlinken. Die könnt ihr dann herunterladen und selbst anpassen und verwenden.

Das Einbauen ist dann übrigens sehr einfach – einfach die Files in den Server hochladen (über FTP) und danach mit dem Widget Overlay in Ecamm Live in die gewünschte Szene einbauen oder in OBS und zack ist alles fertig 🙂

Ich hoffe ihr habt alles verstanden und wenn nicht, dann meldet euch einfach bei mir.