Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 13): Video und Sound

Web-Apps erstellen (Teil 13): Video und Sound

Die App soll natürlich nicht nur einfach als Textsammlung daherkommen. Wie wäre es stattdessen denn mit ein paar Videos und MP3-Songs? Denn damit lässt sich gehörig Schwung in Smartphone und Tablet bringen. Mit HTML5 wurden entsprechende Elemente eingeführt, mit denen sich multimediale Elemente ganz einfach einbinden lassen.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Für das Einbinden von multimedialen Elementen gibt es in HTML5 die beiden Elemente audio und video. Darüber lassen sich Sound- und Videodateien einbinden. Diese Elemente bzw. die darüber eingebundenen Dateien können gezielt per JavaScript gesteuert werden.

Zunächst zum video-Element. Um dessen Vorteile zu verstehen, braucht man sich eigentlich nur eine Syntax anzusehen, über die sich bislang Videos und Flash-Anwendungen in Webseiten einbinden ließen. Hier mal ein typisches Beispiel zur Anzeige eines YouTube-Videos:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
   <param name="allowFullScreen" value="true" />
   <param name="allowscriptaccess" value="always" />
   <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
   <param name="allowfullscreen" value="true" />
   <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
   </embed>
</object>

Die Syntax zeigt deutlich, dass hier mit embed und object stets zwei Elemente nötig sind. Diese doppelte Lösung ist natürlich alles andere als ideal.

Mit HTML5 wurde zum Einbinden von Videos das video-Element eingeführt. Hier ein Beispiel, wie sich darüber Videos integrieren lassen:
<video src="video.ogv" width="300" height="200">
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

 
Im vorherigen Beispiel - das Video könnt ihr euch übrigens von der Seite http://camendesign.com/code/video_for_everybody/test.html herunterladen - wurden drei Attribute verwendet. Über src gibt man das Video an, das eingebunden werden soll. Die beiden Attribute width und height bestimmen Breite und Höhe des Videos. Wird keines der beiden Attribute angegeben, ist das Video in seiner Originalgröße zu sehen. Notiert man nur eines der beiden Attribute, wird der andere Wert vom Browser automatisch berechnet.

Bilder



 
Ein weiteres interessantes Attribut ist controls. Setzt man dieses, werden vom Browser native Steuerelemente für die Wiedergabe und die Lautstärkeregelung angezeigt.

Bilder



Ihr solltet in jedem Fall immer versuchen, eine Alternative für den Fall anzubieten, wenn das Video nicht abgespielt werden kann. Verwendet wird dafür das poster-Attribut.
<video src="video.ogv" width="300" height="200" poster="video.gif">
   Ihr Browser ist leider nicht HTML5-kompatibel.
</video>

poster weist man ein Bild zu. Damit es an dieser Stelle nicht zu Missverständnissen kommt. Das dem poster-Attribut zugewiesene Bild greift ausschließlich dann, wenn eine Wiedergabe des Videos nicht möglich ist. Kennt der Browser das video-Element nicht, ist das zu sehen, was zwischen öffnendem und schließendem <video>-Tag steht. Im vorliegenden Fall ist das der wenig erbauliche Hinweis Ihr Browser ist leider nicht HTML5-kompatibel.

 
Ein weiteres Attribut ist autoplay. Darüber legt man fest, ob das Video automatisch nach dem Aufrufen der Seite gestartet werden soll.
<video width="500" height="400" autoplay="autoplay">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Ihr Browser ist leider nicht HTML5-kompatibel.
</video>

Persönlich finde ich Seiten, auf denen Videos automatisch starten, allerdings eher nervig.

Hinsichtlich der Performance kann das preload-Attribut interessant sein. Denn dieses Attribut steuert das Vorladeverhalten. Dabei kann das Attribut die folgenden Werte annehmen:

auto – Der Browser kann die gesamte Datei vorladen.
none – Die Datei muss nicht vorgeladen werden.
metadata – Die Datei kann vorgeladen werden.

Fehlt das preload-Attribut, greifen die Voreinstellungen der Browser.

 
Bevor ihr Videos einsetzt, solltet ihr unbedingt einen Blick auf die unterschiedlichen Videoformate werfen. Gängige Videoformate sind OGG Theora, das von Opera, Chrome und Firefox unterstützt wird. Safari interpretiert hingegen MOV und H.264 bzw. MP4. Wollt ihr also so viele Browser wie möglich unterstützen, solltet ihr die Videos zumindest in OGG und MP4 anbieten. Das ist natürlich nicht schön, schließlich müsst ihr stets zwei Videos anbieten. Das bedeutet ein Mehr an Speicherplatz und Verwaltungsaufwand, da schließlich immer zwei Videos gepflegt werden müssen, wenn es beispielsweise Änderungen an den Videos gibt.

Wir ihr bereits gesehen habt, wird die betreffende Videodatei dem src-Attribut des video-Elements zugewiesen.

Das ist allerdings nicht die einzige Möglichkeit, wie sich Videos einbinden lassen. Alternativ dazu existiert nämlich auch ein source-Element. Dieses Element wird innerhalb des video-Elements notiert.
<video width="400" height="300">

   <source src="video.ogg" />

   Ihr Browser ist leider nicht HTML5-kompatibel.

</video>

Sind mehrere source-Elemente angegeben, wird vom Browser immer das erste Video abgespielt, das "passt".
<video width="400" height="300">
   <source src="video.ogg">
   <source src="video.mp4" />
</video>

 
So kann man also die Videos immer in den verschiedenen Formaten anbieten und sicher sein, dass diese dann auch tatsächlich abgespielt werden.

Wie kriegt man nun aber eigentlich die Videos in die passenden Formate? Das kann man beispielsweise mit dem kostenlosen MiroVideoConverter (http://www.mirovideoconverter.com/) erledigen. Ladet euch das Tool von der genannten Seite herunter und installiert es. (Den MiroVideoConverter gibt es für Windows, Mac OS und Linux).

Bilder



Nach dem Programmstart braucht man nur das gewünschte Video in das angezeigte Fenster zu ziehen. Wählt anschließend das Zielgerät aus. Den Rest erledigt das Tool automatisch.

 
Sollten sich die Videos trotz der richtigen Formate nicht abspielen lassen, müssen dem Server noch die entsprechenden MIME-Typen bekannt gemacht werden. Fügt dazu in die .htaccess-Datei die Formate ein, die ihr verwenden wollt.
AddType video/mp4 .mp4 
AddType video/x-m4v .m4v
AddType video/webm .webm
AddType audio/webm .weba
AddType video/ogg .ogm 
AddType video/ogg .ogv 
AddType video/ogg .ogg

Sound einbinden

Audiodateien können ähnlich wie Videos eingebunden werden. Anstelle des video-Elements wird hier allerdings audio verwendet.

Das audio-Element selbst erwartet das Attribut src. Als Wert werden dem src-Attribut Name und Pfad der Audiodatei zugewiesen.
<audio src="song.mp3">
   Ihr Browser unterstützt das audio-Element nicht.
</audio>

Zwischen öffnendem und schließendem <audio>-Tag wird das geschrieben, was angezeigt werden soll, wenn das audio-Element vom Browser nicht unterstützt wird.

Anstelle eines einfachen Hinweistextes, wie das im vorherigen Beispiel zu sehen ist, ist es besser, wenn man den Besuchern eine Alternative bietet.
<audio src="song.mp3">
   <a href="song.mp3">Lied herunterladen</a>
</audio>

So kommen sie trotzdem in den Genuss des Liedes, auch wenn der Browser das audio-Element nicht kennt.

 
Interessant ist bei audio auch das controls-Attribut.
<audio src="song.mp3" controls="controls">
   <a href="song.mp3">Lied herunterladen</a>
</audio>

Denn darüber lassen sich die Steuerelemente anzeigen/ausblenden.

Bilder



Fehlt controls, ist das über audio eingebundene Element nicht zu sehen. Sinnvoll ist das Weglassen des Attributs, wenn man per JavaScript eigene Steuerungselemente einfügen will. Wird das Attribut autoplay gesetzt, startet die Wiedergabe der Audiodatei automatisch, sobald sie geladen wurde. Dieses Attribut setzt man normalerweise nicht, da man den Besuchern die Entscheidung, wann eine Audiodatei abgespielt wird, selbst überlassen sollte.

Findet ihr den eingebundenen Sound so prima, dass er die ganze Zeit laufen soll, könnt ihr zusätzlich das Attribut loop verwenden. Die Datei wird dann in einer Schleife abgespielt.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 14:58

Herzlichen Dank für das Video

Portrait von Kundentest
  • 27.07.2014 - 11:53

Herzlichen Dank für das Tutorial.

Portrait von MicroSmurf
  • 14.07.2014 - 11:28

Interessant wie immer. Danke.

Portrait von johen
  • 04.07.2014 - 14:53

Vielen Dank für das interessante wie immer Textversion und die Datei.

Portrait von hierkarl
  • 04.07.2014 - 14:44

vielen dank, fürs coole tut :)

Portrait von Steve007
  • 04.07.2014 - 14:11

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 04.07.2014 - 13:54

Vielen Dank für das interessante und informative Texttutorial und die Datei.

Portrait von BOPsWelt
  • 04.07.2014 - 13:24

Vielen Dank für die klasse Arbeit!

Portrait von Domingo
  • 04.07.2014 - 13:12

Da habe ich viel gelernt,

Portrait von Kundentest
  • 14.06.2014 - 18:10

Herzlichen Dank für das Video.

Portrait von Steve007
  • 14.06.2014 - 12:03

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von renate_C
  • 04.06.2014 - 11:21

Vielen Dank für das informative Tutorial und die Datei.

Portrait von Caesarion2004
  • 04.06.2014 - 02:08

Vielen Dank für den weiteren sehr interessanten und informativen Teil.

Portrait von MicroSmurf
  • 03.06.2014 - 23:56

Vielen Dank für diesen Teil.

Portrait von johen
  • 03.06.2014 - 21:51

Sehr gut erklärt.Vielen Dank!

x
×
×