HTML - Video

» HTML » HTML Tutorial - Einfügen von Videos in HTML-Seiten

Eine Videodatei kann in einer HTML-Seite auf zwei Arten eingesetzt werden. Die erste Möglichkeit wäre mit dem Tag. Diese Markierung benötigt kein Ende/Finishing-Tag. Es funktioniert vor allem wie ein Tag für ein Foto.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

Sie können aber auch eine Video-Datei über einen Link einfügen.

html<a href="example.mpeg" title="Download movie">film name</a>

Unterstützte Erweiterungen für das embed-Tag

Diese sind:

.swf - von Macromedia Flash
.wmv - Microsoft Windows Media Video
.mov - Quick Time Movie, gehört zu Apple
.mpeg - von Moving Pictures Expert Group.

Die am häufigsten verwendeten sind .mpeg und .swf, wegen des kompakten Formats.

Attribute des embed-Tag

autostart - legt fest, ob die Datei automatisch ausgeführt wird, nachdem die Seite geladen wurde. Kann true oder false Wert haben
hidden - legt fest, ob die Tasten versteckt sind oder nicht. Kann true oder false Wert haben.
volume - kann einen beliebigen Wert von 1 bis 100 haben
loop- legt fest, ob die Datei in Endlosschleife abgespielt wird. Kann true oder false Wert haben.
playcount - dies legt fest, wie oft die Datei abgespielt wird. Beispielsweise playcount="2" bedeutet, es wird zweimal wiederholt und danach nicht mehr.

Einfügen eines YouTube-Videos mit embed-Tag

Das geht ganz einfach, denn YouTube stellt Ihnen den HTML-Code zur Verfügung.

html<object width="425" height="344" data="https://www.youtube.com/embed/FiCiRkkfxhM"></object>

html<embed src="https://www.youtube.com/embed/FiCiRkkfxhM" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/FiCiRkkfxhM" frameborder="0" allowfullscreen></iframe>

Demo

Auch wenn alles, was Sie sehen ziemlich chaotisch ist, ist der gute Teil, dass man es nur von YouTube zu kopieren und in die Website einfügen muss, um Ihr Video zu haben. Obwohl in letzter Zeit YouTube eine einfache iFrame für die gemeinsame Nutzung bietet.

Ich will anmerken, dass embed-Skripte auf youtube nicht für XHTML gültig sind. Zur Erzeugung gültigen Videocodes für Videos auf youtube XHML empfehle ich dieses Tool, das einen gültigen XHTML YouTube Code zum einbetten von Videos erzeugt. Geben Sie einfach die URL ein, wo Sie das Video gefunden haben, und Sie werden einen gültigen XHTML-Code für Sie erstellen.

HTML5 Video Tag

Mit der Einführung von HTML5 verbreitete sich das Video-Tag sehr schnell und mit einer guten Unterstützung von modernen Browsern. Das Video-Tag wird verwendet, um ein Video zu der HTML-Seite hinzuzufügen. Im Moment unterstützt das HTML5 Video-Tag 3 Arten von Videodateien:

mp4 - MIME-type video/mp4
webm - MIME-type video/webm
ogg - MIME-type video/ogg

html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Ihr Browser unterstützt das Video Element nicht
</video>