Wir haben eine erfreuliche Nachricht für unsere Kundinnen und Kunden. In unserem Atelier erstellen wir nun transparente Videos. In diesem Blogbeitrag sprechen wir über die unkomplizierte Einbindung in HTML.

Vor wenigen Tagen haben wir in unserem Blog über die David Büste berichtet. Wir haben die Büste als Augmented Reality, Virtuelle Realität auf Sketchfab für Sie veröffentlicht und als YouTube Video.

In unserem Onlineshop erhalten Sie die David Büste als transparentes Video.

Welche Vorteile haben transparente Videos

WebM-Videos mit transparentem Hintergrund bieten einige Vorteile, wie zum Beispiel:

• Sie können das Video über einem anderen Hintergrund abspielen, ohne dass ein schwarzer oder weißer Rand sichtbar ist. Das kann nützlich sein, wenn Sie das Video als Overlay oder Animation verwenden möchten.
• Sie können die Dateigröße des Videos reduzieren, indem Sie nur die relevanten Teile des Videos speichern und den Rest transparent machen. Das kann die Ladezeit und den Bandbreitenverbrauch verbessern.
• Sie können das WebM-Format nutzen, das eine hohe Komprimierung bei geringem Qualitätsverlust bietet. WebM ist ein offenes und lizenzfreies Format, das von vielen Webbrowsern und Plattformen unterstützt wird. Es ist vor allem für die Verwendung im Internet in Kombination mit HTML5 gedacht.

Einfache Einbindung in HTML5

Um ein transparentes Video im WebM-Format mit einem Loop in HTML einzubinden, können Sie das <video> - Element verwenden. Dieses Element erlaubt Ihnen, einen Media Player einzubetten, der das Video abspielt. Sie müssen dafür die Attribute src, type und loop angeben. Zum Beispiel:

<video src="meinvideo.webm" type="video/webm" loop>
  Dein Browser unterstützt das Video-Element nicht.
</video>

Das src-Attribut gibt den Pfad zu Ihrem Video an. Das type-Attribut gibt das Format Ihres Videos an. Das loop-Attribut ist ein boolesches Attribut, das angibt, dass das Video immer wieder von vorne beginnen soll, wenn es zu Ende ist.

Sie können auch mehrere -Elemente innerhalb des <source> -Elemente innerhalb des <video>-Elements verwenden, um verschiedene Formate anzubieten. Der Browser wählt dann das erste Format aus, das er unterstützen kann. Zum Beispiel:

<video loop>
  <source src="meinvideo.webm" type="video/webm">
  <source src="meinvideo.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Um die Größe oder Position des Videos zu ändern, können Sie verschiedene Attribute oder CSS-Eigenschaften verwenden.

Um die Größe des Videos anzupassen, kannst du die Attribute width und height verwenden. Diese geben die Breite und Höhe des Videos in Pixeln an. Zum Beispiel:

<video src="meinvideo.webm" type="video/webm" loop width="320" height="240">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Dieses Video hat eine Breite von 320 Pixeln und eine Höhe von 240 Pixeln.

Sie können auch CSS-Eigenschaften wie width und height verwenden, um die Größe des Videos zu ändern. Zum Beispiel:

<video src="meinvideo.webm" type="video/webm" loop style="width: 50%; height: auto;">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Dieses Video hat eine Breite von 50% der verfügbaren Breite und eine Höhe, die sich automatisch anpasst.

Um die Position des Videos zu ändern, kannst du die CSS-Eigenschaften position, top, right, bottom und left verwenden. Diese erlauben Ihnen, das Video relativ zum nächsten positionierten Element oder zum Rand des Viewports zu platzieren. Zum Beispiel:

<video src="meinvideo.webm" type="video/webm" loop style="position: absolute; top: 10px; left: 10px;">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Dieses Video hat eine absolute Position und ist 10 Pixel vom oberen und linken Rand entfernt.

Webvideo mit Transparenz-Demo

Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari. Dieser Text erscheint unter dem abspielenden Video und funktioniert sowohl in Chrome als auch in Safari.

---