Video Intro zur Homepage selbst erstellen für Anfänger möglich?

[mschrak]

Hallo zusammen,

ich stricke mir gerade eine Homepage zusammen. Bislang habe ich mir das Hauptverzeichnis frei gelassen und in einem Unterordner Wordpress installiert.

Nun wollte ich (wenn möglich) auf die Startseite (also Hauptverzeichnis), zu der man gelangt, wenn man www.xyz.de aufruft, eine Video-Intro mit "Skip Intro" Button setzen, die dann, entweder bei Klick auf den Button oder bei Ablauf des Videos in den Wordpress-Unterordner weiterleitet. Wie man das eigentlich immer so sieht auf Unternehmenshomepages...

Meine Frage ist, ob es für einen Anfänger in diesem Bereich sehr kompliziert ist, so etwas zu machen. Ich wollte nicht anfangen, mich in Flash-Programmierung oder sonst irgendetwas einzuarbeiten. Auch wollte ich kein lizenzpflichtiges Format verwenden. Ich habe gehört, dass html5 im Moment der letzte Schrei dafür sei.

Ich stelle mir das optimalerweise so vor: Ich produziere ein Video (das kann ich einigermaßen), habe dann eine Videodatei, etwa ein XVid in einem avi-Container und konvertiere diese dann in html5, was ich dann als Objekt in die index.html einbinde.

Geht das so einfach oder mache ich mir da was vor?

Danke schon mal für Eure Antworten,

Martin

 

[Magnus1986]

Also generell ist sowas natürlich immer etwas problematisch.. Bei Flash muss der Besucher Adobe Flash installiert haben und bei HTML5 muss der Besucher einen Browser haben, der HTML5 verarbeiten kann.. ansonsten sieht man davon rein garnix ^^

 

[mschrak]

Irgendwo habe ich gelesen, dass eigentlich alle neueren Browser html5 unterstützen, allerdings in zwei unterschiedlichen Lagern, die einen irgendwie mit .ogg und die anderen mit mp4.

Kann man das so machen, dass beide Versionen auf der Seite sind und je nach Browser-Version des Besuchers das eine oder das andere abläuft?

Ergänzung (22. Dezember 2011)

Als Alternative könnte ich mir eine animierte Gif-Grafik vorstellen, aber irgendwie ist mir da die Qualität und die Rechtesituation nicht ganz geheuer.

 

[ice-breaker]

Video for everybody

ich würde trotzdem von solchen Intro-Seiten abraten, das war vor 10 Jahren mal hipp, heute nicht mehr, da ist es viel mehr ein Garant für miserabeles Webdesign, denn solch ein Intro schaut eh niemand an.

 

[Daaron]

ich stricke mir gerade eine Homepage zusammen. Bislang habe ich mir das Hauptverzeichnis frei gelassen und in einem Unterordner Wordpress installiert.

Nun wollte ich (wenn möglich) auf die Startseite (also Hauptverzeichnis), zu der man gelangt, wenn man www.xyz.de aufruft, eine Video-Intro mit "Skip Intro" Button setzen, die dann, entweder bei Klick auf den Button oder bei Ablauf des Videos in den Wordpress-Unterordner weiterleitet. Wie man das eigentlich immer so sieht auf Unternehmenshomepages...

Bei welchem Unternehmen sieht man noch so eine Grütze? Vorschaltseiten, egal welcher Art, macht man wenn dann temporär zu Promo-Zwecken, aber nie permanent. Diese Monsterseiten kosten nur Ladezeit, halten den Kunden/Besucher davon ab, zügig auf die richtige Seite zu kommen und verschrecken am Ende sogar noch Leute... von den Crawlern mal ganz abgesehen, die mit dem Zeug gar nix anfangen können.

Meine Frage ist, ob es für einen Anfänger in diesem Bereich sehr kompliziert ist, so etwas zu machen. Ich wollte nicht anfangen, mich in Flash-Programmierung oder sonst irgendetwas einzuarbeiten. Auch wollte ich kein lizenzpflichtiges Format verwenden. Ich habe gehört, dass html5 im Moment der letzte Schrei dafür sei.

Wie wärs mit HTML5 und nem simplen Flashplayer als Fallback für alte Browser? Du musst da was Flash angeht nichts selbst programmieren. Nimm den Flowplayer und gut.

Ich stelle mir das optimalerweise so vor: Ich produziere ein Video (das kann ich einigermaßen), habe dann eine Videodatei, etwa ein XVid in einem avi-Container und konvertiere diese dann in html5, was ich dann als Objekt in die index.html einbinde.

HTML5 ist kein Video-Format sondern eine Markup-Sprache, genau wie das alte HTML4, XHTML, XML, SVG, MathML,.... HyperText Markup Language.

Deine xvid oder was auch immer deine Quelle ist musst du so umwandeln, dass es möglichst viel hiervon abdeckt, evlt. musst du halt 2 Dateien hosten und dem Videoelement mehrere Quellen mit verschiedenem Codec vorsetzen.
http://en.wikipedia.org/wiki/HTML5_video#Browser_support

Irgendwo habe ich gelesen, dass eigentlich alle neueren Browser html5 unterstützen, allerdings in zwei unterschiedlichen Lagern, die einen irgendwie mit .ogg und die anderen mit mp4.

1.) siehe obige Tabelle
2.) das Netz ist VOLL mit Usern, die noch den IE8 oder niedriger nutzen oder zwar n Firefox laufen haben, aber mitm letzten Update vor 3 Jahren.

Kann man das so machen, dass beide Versionen auf der Seite sind und je nach Browser-Version des Besuchers das eine oder das andere abläuft?

is ganz einfach, siehe Wiki:

<video poster="movie.jpg" controls>
        <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
        <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Nur ersetzt du den Absatz mit dem Fallback-Content eben durch den Code, der den Flashplayer einbindet. Wenn der Browser den <video>-Tag beherrscht und wenn er mit einer der Quell-Dateien was anfangen kann, dann wird er die HTML5-Schnittstelle nehmen. Wenn nicht, dann geht er nach innen und lädt den Fallback, sprich den Flash-Videoplayer (eben Flowplayer oder sonstwas)

Der gravierende Vorteil von HTML5-Video ist nicht, dass es in neuen Browsern läuft. Die können auch Flash, außer der User ist so n paranoider Querkopf mit Flashblocker. Der größte Vorteil ist, dass HTML5-Videos auffem iPad laufen (passend gewählten Codec vorausgesetzt), Flash hingegen auf keinen Fall.

Stells dir aber nicht so einfach vor mit deinen Videos. Der gravierende Nachteil von HTML5-Video und -Audio ist, dass jeder Browser die Steuerung anders darstellt. Im Endeffekt darfst du dir hier noch in JavaScript eine eigene, ans eigene Layout angepasste Steuerung zusammenfriemeln.

Ergänzung (22. Dezember 2011)

Als Alternative könnte ich mir eine animierte Gif-Grafik vorstellen, aber irgendwie ist mir da die Qualität und die Rechtesituation nicht ganz geheuer.

Brr... animierte GIF...
- riesige Datenmengen
- keine Streaming-Ladefähigkeit (da oder nicht da)
- meist lausige Qualität

Rechtlich aber kein Problem, wenn du die Rechte an dem Video hast, aus dessen Frames du die GIF zusammenklebst.

 

[mschrak]

@Daaron: Wow, danke für die umfangreiche Antwort. Leider habe ich zwischen den Jahren weniger Zeit als gedacht, so dass ich das Projekt erst später angehen werde.

Da meine Seite weniger zum "Benutzen" und mehr zu "Imagezwecken" dienen soll, habe ich an eine solche Intro gedacht. Mal sehen, wies rüberkommt. Ich habe schon einige gute Seiten gesehen, wo es aus meiner Sicht funktioniert (und auch nicht nervt). Muss halt gut gemacht sein. In meinem Fall soll es ohnehin eher nur eine "Animation" des Logos sein, 1 bis 4 Sekunden.

 

[El Diabolo Vago]

wieso nicht sowas http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

video, naja ich weiß net