Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 für Webdesigner

Beispiel-Skizze, Teil 11: Video einbinden per HTML5

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dank des HTML5-Elements video kann der Browser, Videos ohne zusätzliches Plug-in abspielen. Wie das Element eingebunden und gestaltet wird, verrät dieser Film.

Transkript

In diesem Film möchte ich Ihnen zeigen, wie Sie mit dem HTML5-Element "Video" ein Video im Browser einbinden. Dazu einen kurzen Blick auf die Beispielseite, auf die Skizze der Startseite für Video2Brain mit HTML5-Elementen. Hier gibt es einen "Feature Rotator" - der hat heute frei, der steht nicht zur Verfügung. Stattdessen soll hier an der Stelle ein Video eingebunden werden, und zwar das Intro-Video von diesem Video-Training. Dazu wechsle ich rüber in den Editor, schaue mir die Startseite im HTML an und suche die Section mit dem Feature Rotator. Das wird ausgetauscht, wird heißen: "Video Player".  Dann gibt es hier statt Feature Rotator die Überschrift "HTML5 für Webdesigner", der Titel dieses Videotrainings. Der Absatz unten drunter, den ändern wir in "Look mal, no flash". Dieses Video wird ohne Flash eingebunden. Hier in der Skizze brauchen wir keine Rücksicht zu nehmen auf IE 8 und ältere Browser, da kann man das einfach so machen. Video2Brain müsste auf seiner realen Startseite natürlich ein paar mehr Gegebenheiten berücksichtigen. Das Videoelement - ich habe es hier im Hintergrund schon reinkopiert - ist sehr, sehr ähnlich aufgebaut wie das Audioelement. Es geht los mit "Video" und hört auf mit "/Video". Es gibt hier eine ID, es gibt das Attribut "Controls" und es gibt das Attribut "Preload". "Controls" gibt die Steuerelemente, das sollte man eigentlich immer geben, und "Preload Metadata" genau hier, damit die Daten vorab schon einmal geladen werden. Zusätzlich gäbe es hier noch ein Attribut, das heißt "Poster". Da könnte man ein Bild laden. Browser, die das verstehen, würden dann vor dem Abspielen dieses Bild darstellen und nicht eines aus dem Video nehmen. Wir wollen das aber nicht tun. "Source" gibt es wieder zweimal. Hier "HTML5 für Webdesigner-Intro.mp4" und einmal als "WebM". Die müssen natürlich auch im entsprechenden Ordner liegen. Das haben wir aber alles soweit vorbereitet.  Auch hier wird wieder der MimeType angegeben "Video/mp4" und "Videos/WebM". Falls Sie das von einem Webspace aus servieren, muss man eventuell in der HT Access-Datei noch die MimeType definieren. Hier lokal ist das nicht nötig. Damit wird das Video bereits eingebunden. Browser, die mp4 können, hören hier auf; Browser, die mp4 nicht können, nehmen das WebM, und wer das alles nicht kann, bietet einen Download-Link an. Also sehr ähnlich aufgebaut wie das Audioelement. Dann geht es gleich rüber zum Styling. Im Stylesheet soll erst einmal die Überschrift "HTML5 für Webdesigner" - das kommt ganz unten drunter - hier ein bisschen angepasst werden. "Video Player" als Kommentar. "Section.Class Video Player" hieß das Ding, und da ist eine H3-Überschrift, und die soll keinen Abstand nach oben haben, die soll also ein kleines bisschen nach oben rutschen. Jetzt kommt der eigentliche Clou hier, nämlich der Player selbst. Das Element heißt "Video", hat eine ID namens "HTML5 Video". Damit können wir es selektieren. Als Erstes: Die Breite soll 640 Pixel sein, die Höhe überlassen wir sich selbst. Dann soll das einen Background haben: "White", sicherheitshalber. "Box Shadow" sieht bestimmt ganz gut aus, wenn der Player so einen Schatten hat mit 30 Pixeln; so einen satten Schatten drum rum. "RGBA": 0.3. Also "Schwarz" mit einer Transparenz von 0,3 Border drum rum - damit man weiß, wo er anfängt und aufhört - mit einem dunklen Grau. Wir haben hier noch einen "Border Radius" von 0,5 EM. Das ist optional, natürlich. Das kann man alles nach  Geschmack gestalten. Und rüber geht es in dem Browser. Jetzt wird es spannend. Hier steht noch: "Feature Rotator", einmal "Neu laden", und wir haben hier ein Video: "HTML5 für Webdesigner. Look mal, no flash". Hier ist schon ein Player, der wird vom Firefox serviert. Ich klicke einfach mal auf den "Play"-Button und dann werden wir sehen: "Herzlich willkommen zum Videotraining HTML5 für Webdesigner. Mein Name ist Peter Müller, und ich möchte Ihnen zeigen, was es mit HTML5 für Webdesigner so auf sich hat. Und bevor es im Rest des Trainings darum geht, was genau HTML5 ist, möchte ich zunächst ein paar Worte darüber verlieren, was ich eigentlich mit "Designer" meine, da Begriffe wie 'Webdesign' und 'Webentwicklung' momentan des Öfteren mal für Verwirrung sorgen." Das soll reichen. Das kommt Ihnen bekannt vor. Das ist das Intro zu diesem Video. Wir haben das hier eingebaut. Das ist kein Flash. Wenn ich mit rechts draufklicke, steht hier überall nur "Video anzeigen" usw. usf. Damit haben wir eigentlich schon fast alles erledigt. Hier noch einmal im Überblick die Einbindung vom Video. Mit "Poster" wäre es möglich, die Source-Dateien - zuerst mp4,  dann WebM und dann mp4 - zum Download anzubieten. Mit diesem Trick ist das hier eingebunden. Das sieht in jedem Browser ein bisschen anders aus, aber es funktioniert soweit eigentlich ganz gut.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!