[ERLEDIGT] Videos mit html5 eingebunden, lässt sich ein "thumb" setzen?

[Loerbs]

Guten Abend,

Nach sehr langen überlegen habe ich mich doch noch enschlossen, die Videos auf unserer Band seite mit html5 einzubinden und nicht mit "Flash". Eine richtige entscheidung, wie ich heute festelle.
Nun ist es auch endlich möglich die Videos auf Mobielen-Endgeräten wie z.B. iOS oder Androide abspielbar zu machen.

Nun kommt mir aber wieder mal ein kleines Problem engegen gesprungen.
Ich habe vorher die Videos (wie oben schon erwähnt) mit hilfe von Flash eingebunden. Das sah dan so aus:

Die Bilder die man dort zieht ist nicht die anfang Seqenz sondern von mir draufgesetzte "thumbs", die im *.jpg format sind.
Der Code dazu sah so aus:

<h3 class="letter">IMPULS <strong>Musik Videos</strong></h3>
                                    </div>
                                    <div class="wrapper indent-bot1">
                                        
                                        <article class="grid_4 alpha">
                                            <div class="padding-grid-3">
                                                <div class="wrapper p2">
                                                    <figure class="style-img-2 fleft"><a class="lightbox-image" href="video/video_AS3.swf?width=495&amp;height=275&amp;fileVideo=385148274869984_4973.mp4" data-gal="prettyVideo[prettyVideo_1]"><img src="http://www.html.de/images/page3-img2.jpg"  alt=""></a></figure>
                                                </div>
                                                <p class="prev-indent-bot2">Impuls Live Video / Mai 2012<br> Tanz in den Mai - Degersen / Kreis Hannover.</p>
                                                
                                            </div>
                                        </article>

Nun dachte ich mir, lieber mit html. Doch leider sieht das ganze nun nicht mehr so schick aus, da ich nicht weiß wie ich die "thumbs" setzen bzw. mit im Code einschreiben kann.
Die seite sieht so, nach der Bearbeitung, aus.

Nun ist beim Video 3-5 ein Roter Hintergrund gesetzt, wall die Videos, bzw. der erste Frame rot ist. Das habe ich bei Flash mit einer .*jpg datei lösen können.
der Code nun sieht, nach der Bearbeitung so aus.

<h3 class="letter">IMPULS <strong>Musik Videos</strong></h3>
                                    </div>
                                    
                                    <article class="grid_4 alpha">
                                            <div class="padding-grid-3">
                                                <div class="wrapper p2">
                                                    <figure class="style-img-2 fleft"> 
                                                    <video id=0 controls width=250 height=160>
                                                    <source src="video/video1/385148274869984_4973.ogv" type='video/ogg; codecs="theora, vorbis"'/>
                                                    <source src="video/video1/385148274869984_4973.webm" type='video/webm' >
                                                    <source src="video/video1/385148274869984_4973.mp4" type='video/mp4'>
                                                    <p>Video is not visible, most likely your browser does not support HTML5 video</p>
                                                    </video>
                                                    </figure>
                                                    <p class="prev-indent-bot2"><b>Impuls Live Video / Mai 2012</b><br> Tanz in den Mai - Degersen / Kreis Hannover.</p>
                                                </div>
                                                
                                            </div>
                                        </article>

Bitte nicht wundern, ich habe die Titel der Videos nocht nicht bearbeitet.

Vieleicht weiß jemand wie ich ganz einfach die "thumbs" setzen kann, ohne viel aufwand.
Website: impuls-live.de/video.html

Vielen Dank für Eure mühe.

Mit Lieben Grüßen von der Nordsee-Küste!
Alexander Lörbs

 

[Cheffchen]

hast dir schon videojs angeschaut wenn dich für html5 entschieden hast.
dort findest was suchst und das sogar ab IE7.

cheffchen

 

[Daniel_AppUndWeb.net]

Mache sowas immer mit Video.js. Doku dazu: https://github.com/videojs/video.js/blob/master/docs/setup.md.
Schnell gesagt: Skript einbinden, <video> Tag setzen und neben den benötigten Attributen auch dein Preview-Image für den <poster> Tag setzen, fertig.

Edit: Ou sorry, wurde ja schon genannt.