In HTML einen Video-Player integrieren - so funktioniert's

Mit HTML5 einen Video-Player erstellen

Am Einfachsten können Sie einen Video-Player in Ihre Website einbinden, indem Sie dafür die HTML5-Funktion "video" verwenden.

• Dabei handelt es sich um einen einfach Tag, der im Prinzip ähnlich wie ein img-Tag zum Darstellen von Bildern funktioniert. Zum Einbinden eines Video-Players müssten Sie dann lediglich vier Zeilen HTML-Code schreiben, die Sie dann optional noch verändern beziehungsweise erweitern könnten.
• Standardmäßig brauchen Sie die dafür nur die folgenden vier Zeilen:
  <video width="400" height="300" >
  <source src="film.mp4" type="video/mp4" />
  <source src="film.ogv" type="video/ogg" />
  </video>
• Die erste Zeile öffnet den Video-Tag und legt die Breite ("width") und Höhe ("height") fest und die vierte Zeile schließt den Tag wieder. Dazwischen müssen Sie dann Ihr Video festlegen, wobei Sie dabei am besten das MP4-Format (2. Zeile) und das OGV-Format (3. Zeile) verwenden sollten. Dies hat den Grund, dass nicht alle Webbrowser das MP4- bzw. OGV-Format abspielen können, sodass Sie mit beiden Formaten alle neuen gänigen Webbrowser abdecken würden. 
• Diesen Standardplayer könnten Sie dann noch erweitern, indem Sie dem Video-Tag weitere Attribute zuweisen. Mit dem Attribut "controls" geben Sie dem Video-Player Steuerelemente wie zum Beispiel Play/Pause oder einen Lautstärkeregler. Das Attribut "autoplay" legt fest, dass das jeweilige Video automatisch abgespielt wird, sobald die Seite vollständig geladen wurde. Außerdem könnten Sie mit "poster" ein Vorschaubild einstellen, das zu Beginn gezeigt wird, bis Ihr Video abgespielt wird. 


Mit PHP einen MP3-Player erstellen - so funktioniert's

Falls Sie auf Ihrer Webseite mit PHP programmieren und dabei einen MP3-Player integrieren möchten, …

• Wenn Sie also zum Beispiel einen Video-Player mit Steuerelementen und einem Vorschaubild haben möchten, welches automatisch starten soll, könnten Sie in der 1. Zeile zum Beispiel schreiben: <video  width="400" height="300" controls autoplay poster="bild.jpg">

Einen fertigen Video-Player verwenden

Alternativ könnten Sie auch ein externes Video-Player-Skript verwenden, den Sie sich herunterladen und dann in Ihre Website integrieren müssten.

• Dabei reicht es oftmals aus, dass Sie lediglich die Skriptdatei (oft eine Javascript-Datei "*.js") und eine CSS-Datei für das Design im Head-Bereich Ihrer Datei einbinden und dann im Body-Bereich den Player einfügen lassen.
• Viele neue Video-Player setzen dabei auf eine Kombination von HTML5 und dem Flash Player. Standardmäßig wird dabei versucht, einen Video-Player mit HTML5 erstellen zu lassen. Sollte der Browser diesen aber nicht darstellen können, weil der Browser zum Beispiel zu alt ist, würde alternativ ein Flash-Player erzeugt.
• Meistens können Sie sich bei fertigen Video-Player-Skripten ein Beispiel anschauen oder herunterladen, über welches Sie dann Ihren Video-Player schnell und einfach erstellen können. Zudem finden Sie oft auf der Website des Anbieters eine Dokumention sowie Plugins oder Skins, mit denen Sie Ihren Video-Player nach Ihren Bedürfnissen anpassen können.
• Gute und kostenlose Video-Player sind dabei zum Beispiel jPlayer, JW Player oder Flowplayer.