Hier erscheint das Video, mit diesem Format können wir eine komplette Szene sehen und obwohl es auch aus dem Kontext genommen werden kann, ist seine Fähigkeit, uns mehr Informationen zu zeigen, sehr wichtig. Dies bedeutet natürlich, dass das Gewicht des Inhalts größer ist und nicht das ganze Multimedia-Inhalte auf einer Website können Videos sein.
HTML5 hat beim Einfügen von Videos in eine Webseite mehrere Verbesserungen gebracht, da es uns ermöglicht, Container auf native Weise zu erstellen. Auf diese Weise vermeiden wir die Verwendung externer Technologien wie Flash oder RealTime , die zu der Zeit den Inhalt dieses Stils im Internet dominierten.
Das Format
Einer der wichtigsten Aspekte, die wir kennen sollten, ist das Format des Videos, das wir reproduzieren möchten. Dies liegt daran, dass das Video sowohl komprimiert als auch dekodiert werden muss, damit wir seinen Inhalt in geeigneter Weise sehen und anhören können. Dazu müssen die Browser Folgendes einschließen Die Codecs, die die verschiedenen Bibliotheken und Tools sind, mit denen sie den Prozess ausführen können.
Die Wahl des Formats ist manchmal nicht unsere Entscheidung, da es möglicherweise ein Kunde ist, der das Video bereitgestellt hat. Wir müssen jedoch sicherstellen, dass es mindestens in einem dieser Formate vorliegt, damit es mit den meisten Browsern kompatibel ist.
Fügen Sie unser erstes Video hinzu
Da wir jetzt wissen, dass es Zeit ist, uns an die Arbeit zu machen, werden wir eine kleine Seite erstellen, auf der wir ein Video zeigen. Dazu müssen wir dieses Video in einem der oben genannten Formate haben. Wenn wir es nicht haben, können wir nach einer Konvertierungsanwendung suchen, es gibt viele Kostenlose Softwareoptionen, mit denen wir unser Video in das von uns benötigte Format bringen können.
Das HTML5- Tag, das wir verwenden werden, hat einen sehr intuitiven Namen und es ist <video> , um dieses Tag zu finden, und der Browser weiß, wie er mit dem Inhalt umgeht. Es ist dem <img> -Tag , das viele von uns kennen, sehr ähnlich.
Es hat zwei Schlüsseleigenschaften, src , der Pfad, von dem aus das Video geladen wird, und src, in dem angegeben wird, welches Videoformat der Browser wiedergeben soll. Ein Beispiel für die Anwendung dieses Etiketts kann sein:
<video controls> <source src = "rutavideo" type = "video / format"> </ video>
Wie wir sehen, ist es etwas umfangreicher als das img- Tag, aber die Ursache ist, dass es etwas komplexer ist, ein Video als ein Bild zu zeigen. Nachfolgend sehen wir einen Code, in dem wir ein Video in unserem Browser zeigen. In dieser Phase konzentrieren wir uns nur darauf, dass der Inhalt reproduziert werden kann. Sehen wir uns den vollständigen Code an:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Unser erstes Video </ title> </ head> <body> <video controls> <source src = "videoHTML5.mp4" type = "video / mp4"> </ video> </ body> </ html>
Wenn wir das Beispiel in unserem Browser ausführen, müssen wir Folgendes erhalten:
Wie wir gesehen haben, wird das Video in unserem Browser korrekt angezeigt, ohne dass Sie wie in der Vergangenheit zusätzliche Videos hinzufügen müssen.
Ein wenig ansprechbar
Wenn wir das vorige Beispiel nehmen und unsere Webseite neu dimensionieren, werden wir sehen, dass das Video unseren Browser verlassen kann. Dies liegt daran, dass wir dem Container nicht mitgeteilt haben, dass er reagieren muss. Sehen wir uns an, wie wir die Größe ändern, bevor wir Anpassungen vornehmen:
Wir haben dann bemerkt, dass das Video geschnitten ist, was uns ein kleines Problem bereiten kann, wenn wir eine Webseite mit einer mobilen Version erstellen. Um das Problem zu beheben, das wir mit dem Code des vorherigen Beispiels festgestellt haben, müssen wir einige CSS3- Stile in unseren Code integrieren. Dazu werden wir im <head> -Tag Folgendes einfügen:
<style type = "text / css"> Video { maximale Breite: 100%; Breite: 100%! wichtig; höhe: auto! wichtig; } </ style>
Dieser Code teilt dem <video> -Tag mit, dass es sich an die Auflösung seines Containers anpassen muss, im Fall unseres vorherigen Beispiels ist es der Body . Am Ende werden wir nach den Änderungen den folgenden Code haben:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Unser erstes Video </ title> <style type = "text / css"> Video { maximale Breite: 100%; Breite: 100%! wichtig; höhe: auto! wichtig; } </ style> </ head> <body> <video controls> <source src = "videoHTML5.mp4" type = "video / mp4"> </ video> </ body> </ html>
Wenn wir den Code in unserem Browser ausführen und die Größe des Bildschirms ändern, können wir die Änderungen sehen, die von unseren Stilen angewendet werden:
Wenn wir bei dieser Gelegenheit feststellen, dass das Video vollständig auf unserem Bildschirm angezeigt wird, obwohl die Auflösung geringer ist als die des Videos, das wir zeigen möchten, haben wir damit unseren ersten Container mit reaktionsschnellen Videos erreicht.
Sonstiges Zubehör
Obwohl die Unterstützung von Videos über HTML5 fast ein weltweiter Standard ist, verfügen Kunden manchmal nicht über einen Browser, der unsere Inhalte wiedergeben kann. Daher müssen wir bedenken, dass wir für eine zufriedenstellende Benutzererfahrung möglicherweise einen solchen benötigen Verwenden Sie eine zusätzliche Ergänzung.
Eine weitere sehr beliebte Verwendung von Videos ist das Einbinden von Inhalten von Websites wie YouTube oder Vimeo . Diese Fälle sind besonders, da der Inhalt normalerweise über <iframe> -Elemente abgerufen wird . Daher gibt es JavaScript- Add-Ons, mit denen wir die Antwort hinzufügen können In gewisser Weise einfacher, als selbst Regeln aufstellen zu müssen.
<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/JAUoeqvedMo" frameborder = "0" erlaube Vollbild> </ iframe>
Wie wir sehen, haben wir immer noch ein paar Fälle, die nicht Ihren Wünschen entsprechen. HTML5 benötigt keine Drittanbieter, wenn der Inhalt auf unsere Webseiten gestellt wird. Da jedoch nicht alles perfekt ist, müssen wir darüber informiert werden, dass es Gelegenheiten gibt in denen wir auf andere Werkzeuge zurückgreifen müssen, um das Ziel zu erreichen.
Im Allgemeinen ist dieser Trend mit jQuery- Plugins in Kombination mit Frameworks wie Bootstrap oder Foundation verbunden , aber es liegt an jedem von ihnen, die erforderlichen Ergänzungen entsprechend der Mission seiner Webanwendung zu verwenden.
Mit diesem Abschluss dieses Tutorials, in dem wir ein Video in unsere Webseite aufgenommen und das responsive Design ohne größere Komplikationen angewendet haben, ist es wichtig, dass wir die externen Dienste berücksichtigen, die Videos hosten, da der Inhalt dieses Typs hat Dies ist ein erhebliches Gewicht und kann unsere Bandbreite beeinträchtigen. Daher sind die hier beschriebenen Techniken in einer Umgebung mit begrenztem Speicherplatz möglicherweise nicht sehr nützlich. Wenn wir jedoch wissen, wie die Informationen korrekt angezeigt werden, können wir eine umfassendere Benutzererfahrung erzielen, und daher werden unsere Seiten in angemessener Weise bewertet.
