Infografik Video kreieren - How to?

[soigroeg]

Hallo,


ich würde gerne für meine Webseite ein kurzes Infographik-Video kreieren, indem ich mit Grafiken die Vorteile meines Angebotes zeigen möchte.


Normalerweise hätte ich so etwas früher mit Flash gemacht. Seit HTML5 habe ich allerdings erstmal keine Ahnung wie ich die Sache angehen soll.


Ich denke der Weg ist die Videobearbeitung und dann die Einbindung des Videos über das <video>-Tag.


Allerdings habe ich mich gefragt, ob es für diese Aufgabe vielleicht hier ein Tutorial gibt oder ob man gänzlich einen anderen Weg nimmt?


grüße,
Georg

 

[FoXMorayn]

es hat sich erstmal nichts geändert. die neuen browser können zwar html5, aber für ein produktvideo würde ich kein html5 sondern weiterhin flash empfehlen.

edit:
ich entwickel zwar selbst schon software mit html5/css3 aber diese wird sicherleich erst in 1/2 jahren auf den markt kommen.
für elementare bestandteile von webseiten würde ich niemals auf html5/css3 setzen. maximal optionale css3 effekte, aber nicht bei einem produktvideo.
Plan 2014

 

[soigroeg]

Ich möge mich irren.

Aber Flash funktioniert doch nicht auf den meisten Apple mobilen Endgeräten (Ipad, Iphone etc.).
Daher wollte ich auf Flash verzichten.

Sehe ich das falsch?

 

[FoXMorayn]

da ist der endverbraucher wohl schuld an seiner entscheidung sich so ein gerät zu kaufen. ;) bisher sind sie auch gut ohne flashvideos ausgekommen.

youtube hat schon seit einiger zeit einen html5 test laufen:
YouTube

wenn html5, dann benötigt du eine browser-weiche und verschiedene formate des videos, da man sich noch nicht auf ein format einigen wollte: HTML video Tag

 

[soigroeg]

wenn html5, dann benötigt du eine browser-weiche und verschiedene formate des videos, da man sich noch nicht auf ein format einigen wollte: HTML video Tag

Und wenn Html5, dann frage ich mich, wie ich das angehen sollte. Normale Bildbearbeitungssoftware oder was benutzt man für Infovideos wie das hier: https://www.dropbox.com/

Gibt es irgendeinen Anlaufpunkt, der einem erklärt, wie man so etwas anfangen könnte?

 

[FoXMorayn]

dort bekomm ich ein flashvideo :)

mal ein paar ansätze:

A List Apart: Articles: Flash Satay: Embedding Flash While Supporting Standards -> Alternative Content
vllt könnte man den img tag durch den html5 video tag ersetzen. wenn der text dort stimmt, müsste das funktionieren.
ansonsten flashdetection mit javascript und damit dann den alternativen html5 tag einblenden.

ich würde den user agent per php mit $_SERVER['HTTP_USER_AGENT']; auslesen. flash würde ich als standard element anbieten und für iphones und ipads würde ich einen html5 video tag einbinden. die logik hinter der entscheidung, welches system mit welchem browser jetzt welches video format bekommt müsstest du selbst erforschen oder googeln. das möchte google mit seinem youtube html5 test herausfinden ;)

 

[soigroeg]

Erstmal tausend dank für deine Hilfe und den Artikel.

Auf meiner Suche bin ich aber noch auf Adobe Edge gestoßen: HTML examples, websites | Edge Animate | Edge Tools & Services | Adobe & HTML

Damit soll man Animationen, die wie Flash aussehen nur ganz ohne Flash zusammenbauen können.

Hatte bisher noch nie davon gehört. Ist wohl auch erst seit ein paar Tagen auf dem Markt, weil es bisher in der Alpha-Version war.
Sieht zumindest interssant aus und ich werde es mir mal aus der Nähe angucken.

 

[FoXMorayn]

edge setzt auf html5/css3/javascript und bietet keinerlei bessere unterstüzung als selbgemachte css3 animationen. was der browser nicht kann, kann adobe ihm auch nicht beibringen. frontpage und dreamwaever haben es früher schon mit webseiten versucht... edge soll es jetzt mit html5 animationen richten. das ziel ist es das erstellen zu beschleunigen, jedoch ist es keine eigene technik wie silverlight flash oder der html5 video tag.
für diese kleinen css3 animationsfilme sieht edge aber echt super aus :)

 

[vitus37]

es hat sich erstmal nichts geändert. die neuen browser können zwar html5, aber für ein produktvideo würde ich kein html5 sondern weiterhin flash empfehlen.

Ziemlich mutig etwas zu empfehlen, das mit Sicherheitslücken nur so verseucht ist, das jeglichen Standards des semantischen Webs widerspricht, das einem Rechner noch das letzte bisschen Leistung entzieht und das im Zeitalter mobiler Geräte auch noch schwer im Akku liegt.

edit:
ich entwickel zwar selbst schon software mit html5/css3 aber diese wird sicherleich erst in 1/2 jahren auf den markt kommen.

Da sitzt kein Typ hinter 'nem Schalter und sagt „Okay, ab heute ist HTML5 verfügbar.“

für elementare bestandteile von webseiten würde ich niemals auf html5/css3 setzen. maximal optionale css3 effekte, aber nicht bei einem produktvideo.
Plan 2014

Bis der neue Webstandard abschließend definiert ist, werden noch einige Jahre ins Land gehen. Aber alle verbreiteten Browser unterstützen Großteile von HTML5/CSS3. Es besteht kein Grund darauf zu verzichten. Während der Marktanteil von neuen Browsern stetig wächst, schrumpft der von Flash rapide. Warum auf eine Technologie setzen, die dem Untergang geweiht ist?

da ist der endverbraucher wohl schuld an seiner entscheidung sich so ein gerät zu kaufen. ;) bisher sind sie auch gut ohne flashvideos ausgekommen.

Man sollte jedem Endverbraucher anraten, Flash zu deaktivieren, genauso wie man Webmastern nicht empfehlen sollte, es zu verbreiten.

wenn html5, dann benötigt du eine browser-weiche und verschiedene formate des videos, da man sich noch nicht auf ein format einigen wollte: [...]

Die meisten Browserhersteller wollen. Das Problem sind lizenzrechtliche Fragen, was die Videoformate betrifft.

Ich gebe hiermit meine Meinung kund. Seit Jahren kämpfen einige Webentwickler darum, dass Flash seine Marktanteile verliert. Genauso, wie sie darum zittern, dass Frames oder der IE6 aussterben. Solche Ratschläge sind eine Blockade für die Entwicklung. So wird es nicht weiter gehen.

Edit: Adobe Edge ist eine wundervolle Alternative zu Flash. Alleine die Tatsache, dass Adobe dieses Tool bereitstellt, zeigt, dass selbst der Flash-Hersteller nicht mehr von dieser Software überzeugt ist.

 

[FoXMorayn]

adobe edge wird flash nicht ersetzen. das thema in grün gibt es zu canvas und flash. adobe edge ist nichts anderes als ein werkzeug um css3 animationen zusammen zu klicken. die erfahrung hat gezeigt, dass sowas bisher nicht erfolgreich war.
würde mich freuen, wenn beim nächsten test mein firefox nicht nach 3 offenen edge anwendungen abschmiert :)

 

[Tronjer]

Das ist ein interessantes Thema.

Man kann mittels CSS3 Attributen wie transition, transform und animation so etwas wie ein Ghetto-Flash bauen, das für einfache Animationen ausreichet. Canvas eignet sich zum Zeichnen von 2D-Objekten und für 3D gibt es WebGL. Aber diese drei Techniken sind auch zusammen genommen schon mal aufwendiger als Adobe Flash Professionell, insbesondere wenn es um "echte" movies geht, wo und Filmsequenzen verwendet werden sollen.

 

[vitus37]

Aber diese drei Techniken sind auch zusammen genommen schon mal aufwendiger als Adobe Flash Professionell, insbesondere wenn es um "echte" movies geht, wo und Filmsequenzen verwendet werden sollen.

Wenn es um echte Filme geht, dann sollte man sie mit einem Videoeditor erstellen und sie ohne Flash einbinden. Das ist angenehm für den Betrachter, sicher und vergleichsweise fehlerunbehaftet.

 

[soigroeg]

Wenn es um echte Filme geht, dann sollte man sie mit einem Videoeditor erstellen und sie ohne Flash einbinden. Das ist angenehm für den Betrachter, sicher und vergleichsweise fehlerunbehaftet.

Genau das ist auch meine erste Idee gewesen.

Mit einem Videoeditor die Animation kreieren und diese dann ohne Flash einbauen. Vielleicht mache ich es genau so, obwohl ich keinerlei Lust habe mich mit After Effects auseinander zu setzen :(

Ich versuch es erstmal mit CSS3 und vielleicht parallel mit 'nem Videobearbeitungsprogramm.

 

[FoXMorayn]

lösung:
Video For Everybody Generator
insgesammt 4 videotypen mit letztem fallback auf flash. browserweiche ist durch die html logik gelößt.
und noch mein lieblings video tool: SUPER &copy - Media File Converter, Media File Encoder, Video Player, Audio Player, Media Player
das erstellen des videos könnte mit adobe flash erfolgen, aber das ist nicht meine welt. da kennt ihr sicher noch andere lösungen.

meinung:
flash hat sich über jahre druchgesetzt und divx, shockwave o.ä. vertrieben. millionen von erotik oder illegalen video anbietern setzen auf flash. hier entscheidet die breite masse und das ziemlich effektiv, denn sie hat die wahl! lediglich die software zum erstellen der flashfilme inkl. adobe ID account live suche einloggen usw. halte ich für bedenklich. auch die installation vom flashplugin ist mit dreister adware verbunden.

 

[vitus37]

millionen von erotik oder illegalen video anbietern setzen auf flash. hier entscheidet die breite masse und das ziemlich effektiv, denn sie hat die wahl!

Illegale und semiseriöse Erotikanbieter nutzen Flash mit Sicherheit nicht primär wegen seiner Verbreitung. Was meinst du, wieso diese Seiten so gefährlich sind?

 

[FoXMorayn]

ich wage die aussage, dass erotikseiten seiten mit flash videos zu den harmloseren seiten im netz gehören. die gefahr sehe ich nicht bei flash oder bei javascript exploits. ehr die plugins selbst und vermeintliche plugin updates von drittanbietern sind das problem. selbst das flash plugin liefert eine der gefärlichsten adware mit. antivierensoftware ist einer der top gründe, warum man probleme mit seinem pc bekommt. danach kommen die toolbars der drittanbieter.

flash bietet den seiten eine günstige einfache möglichkeit mit größtmöglicher benutzerunterstüzung inhalte anzubieten.
der effekt ist eine große akzeptanz und mehr "kunden". das ziel bei solchen angeboten sind die werbeeinnahmen. durch das verteilen eines virus kommt primär kein geld in die kasse. direkte werbung geht einfacher!
durch schadsoftware direkt auf der webseite würde sich die seite schnellstmöglich auf die blackliste vom firefox bringen und die verwöhnten nutzer an eine altrernative seite abgeben.

 

[vitus37]

flash bietet den seiten eine günstige einfache möglichkeit mit größtmöglicher benutzerunterstüzung inhalte anzubieten.

Man beachte: Die Benutzerunterstützung wird immer weniger, nicht mehr. Auf meinen Sites nutzen nur noch 90% der Besucher Flash. Mit einem Flash-Embed würde jeder Zehnte ausgeschlossen.

der effekt ist eine große akzeptanz und mehr "kunden". das ziel bei solchen angeboten sind die werbeeinnahmen. durch das verteilen eines virus kommt primär kein geld in die kasse. direkte werbung geht einfacher!

Also ich halte den Handel mit Kreditkartendaten oder den Passwortdiebstahl für durchaus lukrativ. Selbst die Bundesregierung scheint Spaß mit ihren Würmern zu haben.

durch schadsoftware direkt auf der webseite würde sich die seite schnellstmöglich auf die blackliste vom firefox bringen und die verwöhnten nutzer an eine altrernative seite abgeben.

Selbst die teuersten und besten Antivirenprogramme erkennen selbst nach Wochen von Analysen nicht alle Viren. Firefox mit Mozilla als low-budget volunteer collaborative Dienstleister wird sicherlich schnell die Lücken erkennen.

Ich persönlich nutze übrigens kein Antivirenprogramm. Da ich auf Flash verzichte, fühle ich mich damit sehr sicher.

 

[FoXMorayn]

eine konsequente einstellung :)

hab nun auch lust bekommen etwas die statistik zu befragen.
die 90% decken sich ca mit meinen werten:

Bezeichnung
Cookie		100
Flash		86,7%
Pdf		73%
Java		68%
Quicktime		48,5%
Silverlight		44,5%
Windowsmedia		39,2%
Director		13,8%
Realplayer		8,8%
Gears		0,2%

[TD="width: 51"]%[/TD]

leider hab ich keinen knopf um html5 fähige browser zu filtern, daher setze ich einfach mal 15% für nicht video-tag fähige browser ein (den größten anteil hat der IE8 mit ~10%).
in diesem beispiel schlägt die entscheidung kein flash anzubieten mit 1,7% 'verlust' zu buche... also ca gleich auf. demnach ist es egal ob man sich für html5 oder flash entscheidet (hätte ich nicht vermutet). ideal wär natürlich beides. schätze hier 95% auslieferung vom video (?)

interesannt wird es bei genauerer betrachtung der kunden. im b2c vermute ich häufiger den firefox und im b2b den ie (vllt sogar ohne flash plugin).
für mich heißt das, dass ich im b2b aufjedenfall ein optionales bild zum video anbieten würde und im b2c würde ich drauf setzen, dass der user flash aktiviert oder sich sogar das plugin herunter läd.