schoenberg - think MINI:




Videos als HTML5-Animationen auf der Webseite einbinden

erstellt am: 14.11.2016 | von: admin | Kategorie(n): Allgemein, HTML5, HTML5-Animation, JavaScript, Videos


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 🙁

schoenberg - think MINI


Virenfrei und Zertifizierung: Alle Tools auf dieser Webseite sind virengeprüft (unter https://www.virustotal.com/ mit 47 Virenscanner) und ausserdem habe ich als Urheber und verifizierter Herausgeber der Softwaretools ein Zertifikat (dieses können Sie abrufen, wenn Sie das jeweilige Softwaretool mit der rechten Maustaste als Administrator starten und dann mit 'Details anzeigen' das Sicherheitszertifikat abrufen). Hinsichtlich dieser Webseiten, Artikeln, Skripte, Tools, Ebooks, usw. gilt vollständiger Haftungsausschluss. Fehler, Irrtümer, usw. nicht ausschließbar!

vielen Dank und Ihnen schöne Grüße,

Christian Schönberg

XING.com - Netzwerk für Beruf und Leben     Facebook     Twitter



andere Besucher, die diesen Artikel gelesen haben, fanden auch diese Blogbeiträge interessant:

Blockchain: einfaches Beispiel mit PHP erstellt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Der Begriff "Blockchain" bedeutet ins Deutsch ......
den ganzen Artikel lesen ...


Videoüberwachung mit dem Raspberry Pi

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Beim Minicomputer Raspberry Pi kann man auch ......
den ganzen Artikel lesen ...


Mausbewegungen, -klicks und Tastatureingaben aufnehmen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Es gibt unzählige Tätigkeiten am PC, bei de ......
den ganzen Artikel lesen ...


PHP-Script: mehrere Fotoeffekte kombinieren

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! In diesem Artikel hier klicken habe ich berei ......
den ganzen Artikel lesen ...


Softwaretool: QR-Code erstellen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Sogenannte QR-Code sind derzeit sehr häufig ......
den ganzen Artikel lesen ...


Android (Java) Anwendung für instagram-ähnlichen Fotoeffekt

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Auch für den Instagram-ähnlichen Fotoeffekt ......
den ganzen Artikel lesen ...


Raspberry Pi: ein kreditkartengroßer Einplatinencomputer

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Vom sogenannten Raspberry Pi liest man derzei ......
den ganzen Artikel lesen ...


PHP-Skript: mehrere Fotoeffekte in ein Foto einfügen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Unter der Kategorie 'Foto editieren' befinden ......
den ganzen Artikel lesen ...


Softwaretool: Computer bereinigen

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Am PC sammeln sich mit der Zeit immer mehr Da ......
den ganzen Artikel lesen ...


Ebooks – Videomarketing, Emailmarketing, Mobile Marketing, ..

Lieber XING-Kontakt, vielen Dank für Ihren Besuch! Im Bereich Internet-Werbung gibt es in Bezug ......
den ganzen Artikel lesen ...