So spielen Sie Videos mit HTML5 ab

Das Platzieren eines Videos im HTML5-Markup ist einfach und für keinen bestimmten Browser komplexer als das Platzieren eines Bildes. In diesem Artikel werden wir die integrierte Browserunterstützung voll ausnutzen, um den einfachsten Videoplayer zu erstellen.

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

Voraussetzungen

Verwenden Sie Chrome, Safari oder Internet Explorer 9+. Aufgrund der Probleme mit dem browserübergreifenden Videodateiformat müssen Sie vorerst Firefox und Opera meiden. Obwohl die Unterstützung für das Videoelement in allen modernen Browsern konsistent ist, bringt das MP4-Format Firefox und Opera zum Stolpern. Du kannst Überprüfen Sie hier die Kompatibilität.

Bevor Sie beginnen, müssen Sie eine .mp4-Datei finden, die Sie verwenden können. Wenn Sie keine haben, finden Sie online viele kostenlose MP4-Dateien.

Aufbau des Grundgerüstes

Der folgende Code ist das Framework, um das herum Sie den Player aufbauen. Es erstellt ein einfaches Layout und verfügt über einen Platzhalter für das Video selbst.

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





HTML5-Videoplayer

Körper {
Schriftfamilie: serifenlos;
Rand: 0;
Rand: 0;
Polsterung: 0;
}
Header {
Textausrichtung: Mitte;
}
#Spieler {
Anzeige: Tisch;
Breite: 100 %;
Polsterung: 4px;
}
#player > div {
Anzeige: Tabellenzelle;
vertikal ausrichten: oben;
}



HTML5-Videoplayer


Nachdem nun der Grundstein gelegt ist, kommen wir zum unterhaltsamen Teil des Players, indem wir der Seite ein Video hinzufügen.

Lesen:  Notfall-Garagentorreparatur: Was zu beachten ist und wie man Ausfällen vorbeugt

Verwenden des Videoelements zum Hinzufügen von Videos zu Webseiten

Das Ziel bei der Gestaltung des

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, ist es nicht kompliziert.

Fügen Sie diesen Code anstelle des Kommentars „“ im obigen Code ein und ersetzen Sie ihn unbedingt [ YOUR VIDEO ] Geben Sie den Pfad zu Ihrer MP4-Datei ein und aktualisieren Sie die Seite.

In diesem Code die src Das Attribut ist der Pfad und Dateiname Ihrer MP4-Datei Kontrollen Das Attribut gibt an, dass das Video über die Standardsteuerelemente verfügen soll (lassen Sie es weg, wenn Sie die Steuerelemente nicht möchten) und das Breite Und Höhe sind selbsterklärend. Der Text innerhalb des Elements ist Ersatztext, der angezeigt wird, wenn das Video-Tag vom Browser nicht erkannt wird.

Zusammenfassung

Das Internet wird zunehmend als Ersatz für traditionelle Rundfunkmedien genutzt. Dienste wie Netflix, YouTube, Spotify, last.fm und Google Music versuchen, Ihre DVD- und CD-Sammlungen durch Online-Player zu ersetzen. Mit HTML5 werden Video und Audio zu erstklassigen Bürgern von Webinhalten. Anstatt die Verantwortung für die Medienwiedergabe einer Drittanbieteranwendung zu übertragen, erfolgt die Wiedergabe im Browser, sodass Sie Medien von Ihrer Webanwendung aus steuern und bearbeiten können.

Lesen:  9 beste persönliche Finanzsoftware für Mac, die Sie verwenden können

Wie Sie sehen, ist das Hinzufügen von Video und Audio zu Webseiten mit HTML5 ein ebenso unkomplizierter Prozess wie das Hinzufügen von Bildern.

Wie gehen Sie am liebsten mit Videos um? Ist das

Ausgewähltes Bild/Miniaturansicht, Videobild über Shutterstock.

Aktuelle Artikel:

Empfohlen