Das Platzieren eines Videos in HTML5-Markup ist einfach und für einen bestimmten Browser nicht komplizierter als das Platzieren eines Bildes. In diesem Artikel werden wir die integrierte Browser-Unterstützung nutzen, um den einfachsten Videoplayer zu erstellen.

Wir legen das Grundgerüst der Anwendung und verwenden dann das

Voraussetzungen

Verwenden Sie Chrome, Safari oder Internet Explorer 9+. Vorläufig müssen Sie Firefox und Opera aufgrund der Probleme mit dem browserübergreifenden Video-Dateiformat vermeiden. Obwohl die Unterstützung für das Videoelement in allen modernen Browsern konsistent ist, löst das MP4-Format Firefox und Opera aus. Sie können Überprüfen Sie hier die Kompatibilität.

Bevor Sie beginnen, müssen Sie eine .mp4 finden, die Sie verwenden können, wenn Sie nicht eine haben, finden Sie viele kostenlose mp4-Dateien online.

Aufbau des Grundgerüsts

Der folgende Code ist das Framework, um das Sie den Player erstellen. Es erstellt ein einfaches Layout und hat einen Platzhalter für das Video selbst.

Sie müssen eine neue HTML-Datei in Ihrem Arbeitsverzeichnis erstellen und sie index.html nennen und dann folgenden Code hinzufügen:

HTML5 Video Player

Nun, mit der Grundlegung, gehen wir zum spaßigen Teil des Players, indem wir ein Video zur Seite hinzufügen.

Verwenden des Videoelements zum Hinzufügen von Videos zu Webseiten

Das Ziel beim Entwerfen von HTML5's

So sieht ein HTML5-Video in Chrome aus:

Die nächste Auflistung zeigt den gesamten Code, der zum Anzeigen des Videos erforderlich ist. Wie Sie sehen können, ist es nicht kompliziert.

Fügen Sie diesen Code anstelle des " "Kommentar im obigen Code, stelle sicher, dass du [YOUR VIDEO] durch den Pfad zu deiner .mp4 ersetzt hast, und aktualisiere die Seite.