Neu im Angebot: Transparente Videos

3D-Visualisierung, Fotografie, WordPress Schlagwörter: 0 Kommentare

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.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels "Neu im Angebot: Transparente Videos" schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

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

In unserem 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:

Verwandeln Sie Ihren Commerce mit 3D-Visualisierung von R23

Ein Maskottchen / Charakter transportiert die Botschaft Ihrer Dienstleistungen und Produkte nach außen. Darüber hinaus kann ein Maskottchen / Charakter für einen Wiedererkennungswert sorgen.

Charakterdesign / Maskottchen

Wir bieten Ihnen Maskottchen / Charakter Design für Ihre Marke, in 3D oder als Zeichnung. Ihre einzigartige Sympathiefigur.

  • Sie können das ü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 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:

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

Das src-Attribut gibt den Pfad zu Ihrem 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 <>-Elements verwenden, um verschiedene Formate anzubieten. Der Browser wählt dann das erste Format aus, das er unterstützen kann. Zum Beispiel:

< 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:

< 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.

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR - wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.

Neu im Angebot: Transparente Videos 2

R23 Newsletter

ABONNIEREN SIE UNSEREN NEWSLETTER

Liebe Leserin, lieber Leser,

wenn Sie sich für aktuelle Themen und Tipps rund um unser Atelier für Virtual & interessieren, dann melden Sie sich jetzt für unseren kostenlosen Newsletter an. Sie erhalten wöchentlich eine E-Mail mit spannenden Artikeln, exklusiven Angeboten und praktischen Ratschlägen.

Um sich anzumelden, füllen Sie einfach das folgende Formular aus und klicken Sie auf “SETZ DICH AUF DIE LISTE”. Sie können sich jederzeit wieder abmelden, wenn Sie möchten.

Wir freuen uns auf Ihre Anmeldung!

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!
R23
R23 : Metaverse, Augmented Reality, Virtual Reality

Kommentar verfassen

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Ralf Dreiundzwanzig: Atelier für Virtual & Augmented Reality

Aktuell

Virtuelle Influencerin

Charakterdesign
In unserem r23 Atelier in Hagen entwerfen wir für Ihr Unternehmen, Ihre Organisation oder Ihr Projekt die passende virtuelle Influencerin. Wir entwerfen gerade eine virtuelle Influencerin für uns selbst. Verfolgen Sie die Entstehung auf https://blog.r23.de/tag/claudia/
Virtuelle Influencer von R23