Neu im Angebot: Transparente Videos 1

Neu im Angebot: Transparente Videos

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

V/AR Modelle bereit für Metaverse

Sparen Sie Entwicklungszeit und -kosten, machen Sie Prototypenerfahrungen oder verwenden Sie unsere 3D-Modelle in Ihrem V/AR Projekt.
Charakterdesign / Maskottchen

Der neue Trend nennt sich VR-Commcere. Mit dem Browser in die erweiterte Realität, ohne App. Wir haben es umgesetzt.

Welche Vorteile haben transparente Videos

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

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

Einfache Einbindung in

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

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!

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.


Beitragsautor R23

3D-Modelle für Metaverse und Echtzeit-Anwendungen: VR, AR und mehr

Als Atelier für Metaverse Inhalte und interaktive Markenerlebnisse bieten wir Ihnen eine breite Palette an 3D-Modellen, die sich perfekt für Echtzeitanwendungen eignen. Ob Sie in eine virtuelle Welt eintauchen wollen (Virtual Reality, VR), virtuelle Objekte in die reale Welt einblenden wollen (Augmented Reality, AR) oder beides kombinieren wollen (Mixed Reality, MR) – unsere Modelle sind für alle Formen von Extended Reality (XR) optimiert. Dank unserer Expertise können Sie wertvolle Entwicklungszeit und -kosten sparen. Nutzen Sie unsere 3D-Modelle als Prototypen für Ihre XR-Erfahrungen oder integrieren Sie sie in Ihr fertiges Projekt. Wir stehen Ihnen gerne mit Rat und Tat zur Seite und sorgen dafür, dass Ihre Markenerlebnisse einzigartig und unvergesslich werden.

3D-Visualisierung
3D-Scan – Dienstleistung

Angebot anfordern


Kommentare

Schreiben Sie einen Kommentar

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