schoenberg - think MINI:
Videos als HTML5-Animationen auf der Webseite einbinden
Lieber XING-Kontakt, vielen Dank für Ihren Besuch!
Wenn man ein Video in die eigene Webseite einbinden möchte, wird dazu sehr oft das H.264 (MP4) Format, sowie das Ogg Theora (OGG) Format (Open Source) verwendet.
Aber auch als erstellte HTML5-Animation lassen sich z.B. Animationsclips, usw. sehr einfach einbinden.
evtl. mögliche VORTEILE können sein:
– evtl. schnellere Ladezeit: da beim Starten nur die für die erste Szene benötigten Bilder geladen werden und alle anderen Bilder nachgeladen werden, während der Clip bereits läuft. Auch Audio Dateien brauchen so erst später nachgeladen zu werden.
– Interaktion mit dem Webseitenbesucher: z.B. der Besucher könnte vorher gefragt werden, ob der MINI Cooper bei einer Straße nach rechts oder nach links abbiegen sollte (individuelle Story bzw. Interaktive Geschichte für den Besucher)
– der Besucher kann während des Videos, z.B. nach seinem Namen, usw. gefragt werden und dieser Besucher im danach folgenden Video persönlich angesprochen bzw. entsprechend darauf reagiert (z.B. bei Wohnort in Österreich auf eine andere Art als bei Wohnort in Deutschland) werden.
– sogenannte „Parallax scrolling Websites“ lassen sich damit sehr einfach umsetzen, da sich die Frames z.B. durch Scrollen mit der Mouse sehr einfach in beliebiger Geschwindigkeit vor– und auch zurückspielen lassen. Ein einfaches von mir selbst erstelltes Beispiel können Sie hier sehen :-)
– einzelne Bilder können nachträglich sehr einfach korrigiert oder verändert werden, ohne dann die ganze Videodatei (z.B. .mp4, .flv, usw.) neu erstellen zu müssen.
mögliche NACHTEILE können sein:
– nur für bestimmte Clips möglich bzw. sinnvoll, z.B. Animationsclips, Präsentationen, interaktive Erklärungsvideos, interaktive Supportvideos, usw.
– evtl. höherer Arbeitsaufwand für die Erstellung
sowie sonstige Nachteile bzw. mögliche Einschränkungen
Darunter habe ich ein einfaches Beispiel einer solchen selbst erstellten HTML5-Animation eingefügt. Die dafür notwendigen HTML- und JavaScript-Dateien habe ich mit dem von mir programmierten HTML-Animationstool unter diesem Link hier ansehen erstellt.
In diesem Beispiel können Sie auch im Feld rechts oben anstatt des „xxx“ eigene Zeichen eingeben. Diese von Ihnen eingegebenen Zeichen werden dann in der 1. Szene auf dem Autokennzeichen (hinten) des Mini Coopers eingefügt (Interaktion). Links oben wird außerdem immer die tatsächliche Uhrzeit (Stunden-, Minuten- und Sekundenzeiger) dargestellt. Auch die Audio-Dateien werden, wie oben bereits erwähnt, beim jeweils zugehörigen Frame abgespielt. Dazu müssen Sie allerdings zuvor rechts oben (an 2. Stelle) das Häckchen bei „Audio ?“ setzen.
und hier wie immer ein Glitze-Kleines-Bisschen Werbung :-(
3D-Modelle (.stl) im Browser laden
Lieber XING-Kontakt, vielen Dank für Ihren Besuch!
In den meisten 3D-Programmen lassen sich die erstellten Modelle als .stl-Datei exportieren. Damit man sich solche 3D-Modelle ansehen kann, benötigt man einen Viewer. Aber auch im Webbrowser lassen sich diese ansehen.
Wählen Sie einfach eine STL-Datei von Ihrem PC aus und klicken dann auf „.. laden„.
Außerdem können Sie mit Klicken und Ziehen der Mouse das 3D-Modell zoomen bzw. verschieben.
und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁
ein 3D-Modell mit WebGL laden
Lieber XING-Kontakt, vielen Dank für Ihren Besuch!
3D-Programme zur Erstellung von 3D-Modellen verwenden die unterschiedlichsten Datei-Formate. Jedoch die meisten ermöglichen das Exportieren als stl-Datei. Solche 3D-Modelle lassen sich mit Hilfe von WebGL auch im Webbrowser darstellen. Ein solches Beispiel können Sie darunter sehen.
und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁
WebGL-Anwendung: Zauberwürfel
Lieber XING-Kontakt, vielen Dank für Ihren Besuch!
Beinahe die meisten Webbrowser unterstützen bereits WebGL. Mit Hilfe von WebGL lassen sich 3D-Grafiken im Browser darstellen. Eine Beispielanwendung habe ich darunter erstellt, und zwar einen Zauberwürfel der ca. 1980 von Ernő Rubik herausgebracht wurde.
Zuerst müssen Sie auf starten klicken und dann mit den eingefügten Buchstaben die Ringe drehen.
und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁
HTML5 – Bilder beliebig drehen
Lieber XING-Kontakt, vielen Dank für Ihren Besuch!
Mit HTML5 lassen sich Bilder nicht nur mit den Positionen x und y festlegen, sondern Bilder können auch beliebig gedreht werden. Damit lassen sich dann auch Animationen erstellen, die zuvor nur mit Flash umgesetzt werden konnten.
In diesem Beispiel sehen Sie eine Uhr, die sich jede Sekunde aktualisiert.
und hier wie immer ein Glitze-Kleines-Bisschen Werbung 🙁
- 3D-Drucker
- Allgemein
- Audio
- Betriebs- wirtschaft
- Ebooks
- Forex
- Foto editieren
- Google+ API
- HTML-Spiele
- HTML5
- HTML5-Animation
- Internet-Marketing-Scripte
- Java
- JavaScript
- Linkedin API
- Mathematik
- Mikrocontroller
- nützliche Tools
- PHP-Scripte
- Raspberry Pi
- SEO-Tools
- Sicherheit
- SmartPhone Apps
- Technik
- Videos
- Windows App
- WordPress
- Xing API