Rheinwerk Computing :: Einstieg in JavaScript

17.3 Mediendateien abspielen

Die HTML5-Markierungen audio und video erleichtern das Abspielen von Audio- und Videodateien erheblich, im Vergleich zu den Möglichkeiten, die es vor HTML5 gab.

17.3.1 Audiodateien

In Ihrem Dokument können Sie mithilfe der HTML5-Markierung audio einen Audioplayer einsetzen, der einige Anzeige- und Bedienelemente besitzt: Play/Pause-Taste, analoge und digitale Fortschrittsanzeige und Lautstärkeregelung. Es ist aber auch ein Zugriff per JavaScript möglich, so dass Sie das Abspielen der Audiodatei abhängig von bestimmten Ereignissen steuern können. Beides setzen wir hier mit WAV-Dateien um, siehe Abbildung 17.19.

Abbildung 17.19 Zwei Audioplayer

Nach dem Laden des Dokuments läuft die Audiodatei auf dem zweiten Player automatisch und endlos wiederholend. Bei diesem Player können Sie:

den Abspielvorgang anhalten oder weiterlaufen lassen,
den Abspielvorgang ab einem bestimmten Punkt fortsetzen,
die endlose Wiederholung ein- und ausschalten,
die Lautstärke regeln und
zwischen zwei WAV-Dateien wechseln.

Zunächst der zweite Teil des Dokuments:

...
<body>
   <p>Audio 1: <audio src="gitarre.wav" controls></audio></p>

   <p>Audio 2:
      <audio id="idAudio" src="gitarre.wav" autoplay loop></audio>
      <input id="idPlay" type="button" value="Play">
      <input id="idPause" type="button" value="Pause">
      <input id="idSetzen" type="button" value="Setzen auf 1.5">
      <input id="idLoop" type="checkbox" checked="checked"> Loop</p>
   <p><input id="idLaut" type="button" value="Laut">
      <input id="idLeise" type="button" value="Leise">
      <span id="idVolume">(100%)</span></p>
   <p><input id="idGitarre" name="auswahl" type="radio"
             value="Gitarre" checked="checked"> gitarre.wav
   <input id="idAkkord" name="auswahl" type="radio"
          value="Akkord"> akkord.wav</p>
   <script>

      var aud = document.getElementById("idAudio");
      var vol = document.getElementById("idVolume");

      document.getElementById("idPlay").addEventListener
         ("click", function(){aud.play();});
      document.getElementById("idPause").addEventListener
         ("click", function(){aud.pause();});
      document.getElementById("idSetzen").addEventListener
         ("click", function(){aud.currentTime=1.5;});
      document.getElementById("idLoop").addEventListener
         ("click", function(){aud.loop=!aud.loop;});
      document.getElementById("idLaut").addEventListener
         ("click", function(){lautstaerke(0.2);});
      document.getElementById("idLeise").addEventListener
         ("click", function(){lautstaerke(-0.2);});
      document.getElementById("idGitarre").addEventListener
         ("click", function(){spielen("gitarre");});
      document.getElementById("idAkkord").addEventListener
         ("click", function(){spielen("akkord");});

   </script>
</body></html>

Listing 17.11 Datei »h5_audio.htm«, Audioelemente und Eventhandler

Beim ersten Player sind zwei Attribute eingetragen:

Der Wert des Attributs src legt den Namen der Audiodatei fest.

Das Attribut controls sorgt für die Anzeige der Bedienelemente.

Beim zweiten Player sind ebenfalls zwei Attribute eingetragen:

Das Attribut autoplay bewirkt das automatische Abspielen nach dem Laden des Dokuments.

Das Attribut loop sorgt für einen endlosen Abspielvorgang.

Es folgt ein Formular mit insgesamt fünf Schaltflächen, einer CheckBox und einer Gruppe von zwei RadioButtons. Im JavaScript-Bereich werden zunächst die beiden Verweise aud und vol für den Zugriff auf den Audioplayer und die Anzeige der Lautstärke eingeführt.

Die Betätigung der Schaltflächen Play und Pause führt zum Aufruf der beiden Methoden play() und pause(). Die Eigenschaft currentTime dient zum Ermitteln oder Setzen der aktuellen Position des Abspielvorgangs. Mithilfe der CheckBox wird die boolesche Eigenschaft loop für die endlose Wiederholung ein- oder ausgeschaltet.

Der Wert für die Lautstärke ist nicht per HTML voreinstellbar. Zu Beginn ist der Ton in der Lautstärke zu hören, die aktuell am Ausgabegerät (PC, Smartphone usw.) eingestellt ist. Dies entspricht dem Wert 1 für die Eigenschaft volume. Mit den beiden Schaltflächen Laut und Leise wird die Funktion lautstaerke() aufgerufen. Als Parameter wird ein Wert übergeben, der zur Änderung der Lautstärke führt. Die geänderte Lautstärke kann nur zwischen 0 und 1 liegen. Die beiden RadioButtons dienen zur Auswahl der abgespielten Audiodatei.

Es folgt der erste Teil des Dokuments:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Audio</title>
   <script>

      function lautstaerke(wert)
      {
         aud.volume += wert;
         vol.firstChild.nodeValue = "("
            + (100*aud.volume).toFixed(0) + "%)";
      }

      function spielen(dateiname)
      {
         aud.src = dateiname + ".wav";
         aud.load();
         aud.play();
      }

   </script>
</head>
...

Listing 17.12 Datei »h5_audio.htm«

In der Funktion lautstaerke() wird der Wert der Eigenschaft volume geändert. Der prozentuale Anteil der Lautstärke, die zu Beginn zu hören ist, wird ausgegeben.

In der Funktion spielen() bekommt die Eigenschaft src mithilfe des Funktionsparameters einen neuen Wert. Diese Eigenschaft enthält den Namen der Audiodatei für den Player. Die Methode load() lädt die zugehörige Audiodatei. Anschließend kann sie mit play() abgespielt werden.

17.3.2 Videodateien

Dank der HTML5-Markierung video ist es nicht mehr notwendig, externe Videoplayer einzusetzen. Die Liste der Typen von Videodateien, die in den verschiedenen Browsern abgespielt werden können, unterscheidet sich allerdings.

Daher ist es sinnvoll, eine Videodatei in mehrere Formate zu konvertieren und alle diese Formate einzubinden, jeweils mithilfe der Markierung source. Die Freeware Freemake Video Converter ermöglicht z. B. die Umwandlung einer AVI-Datei in eine MP4-Datei , in eine OGV-Datei und in eine WEBM-Datei . Damit erhöhen Sie die Wahrscheinlichkeit, dass das Video im Browser des Benutzers abgespielt werden kann. Das erste Format, das erkannt wird, wird genutzt.

Zusätzlich zu den Attributen, die Sie bei der Markierung audio kennengelernt haben, gibt es die Attribute width und height. Sie dienen zur Reservierung und Festlegung des Bereichs für das Video innerhalb der Internetseite während des Ladevorgangs. In JavaScript können Sie dieselben Eigenschaften wie bei den Audiodateien nutzen.

In Abbildung 17.20 sehen Sie die Darstellung eines kurzen Videos. Falls sich die Maus über dem Video befindet, wird die Bedienleiste angezeigt.

Abbildung 17.20 Videodatei mit Bedienleiste

Es folgt der Code:

...
<body>
   <video width="400" height="300" controls autoplay loop>
      <source src="shadow1.mp4"
              type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="shadow1.ogv"
              type='video/ogg; codecs="theora, vorbis"'>
      <source src="shadow1.webm"
              type='video/webm; codecs="vp8, vorbis"'>
   </video>
</body></html>

Listing 17.13 Datei »h5_video.htm«

Es wird ein Bereich mit einer Größe von 400 mal 300 Pixeln für das Video reserviert und festgelegt. Die Bedienelemente werden angezeigt. Das Video startet nach dem Laden der Seite automatisch und läuft endlos.

Innerhalb der source-Markierung legen Sie mit dem Attribut src den Namen der abgespielten Datei fest. Wie bereits erwähnt: Das erste Format, das der Browser erkennt, wird abgespielt. Die Angabe des MIME-Types inklusive Codec erleichtert dem Browser die Zuordnung. Der Codec kennzeichnet das Verfahren, mit dem die analoge Videoaufnahme digitalisiert ist.