Tutorial HTML5 Player - mit mehreren Playern und eigener Grafik

Bitte guckt Euch für mein Tutorial zu einem HTML5 Player mit eigener Grafik diese Seite an. Dort findet Ihr auch detaillierte Videos zu der Grafik.

Hier zeige ich lediglich den auf meiner Startseite eingebaute Player-Code.

Bitte achtet auf die relativen Pfadangaben zu den Musik- und Grafikdateien, hier von meiner Startseite (index.html) - daher ohne Punkte ../ da alle Dateien im gleichen Stammverzeichnis liegen.

Diese JavaScript Funktion steuert die Player. Jeder Player benötigt seine eigene ID, da eine ID immer einmalig auf einer Seite sein muss und hier mit dem Befehl “getElementById” angesprochen wird. Ich habe hier jeder Funktion ein “callback” (Rückgabewert) playerID mitgegeben. Damit erreiche ich, dass ich nur ein JavaScript für beliebig viele Player benötige. Dieses JavaScript gehört in den <Head> der Seite.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<script type="text/javascript">
   function abspielen(playerID)
   {
      document.getElementById(playerID).play();
      document.getElementById("pausebutton_" + playerID).style.display = "";
      document.getElementById("playbutton_" + playerID).style.display = "none";
      document.getElementById("resetbutton_" + playerID).style.display = "";
   }
   function pausieren(playerID)
   {
      document.getElementById(playerID).pause();
      document.getElementById("playbutton_" + playerID).style.display = "";
      document.getElementById("pausebutton_" + playerID).style.display = "none";
      document.getElementById("resetbutton_" + playerID).style.display = "none";
   }
   function anfang(playerID)
   {
      document.getElementById(playerID).currentTime = 0;
   }
</script>

Zum Aufruf des ersten HTML5 Players, zieht Ihr Euch ein Textfeld auf und fügt Euren Code in den HTML-Code Editor des Textfeldes ein.

Hierbei schalten sich die Player, beim Start des jeweils anderen Players automatisch gegenseitig aus, da in der onClick Anweisung beide Funktionen angesprochen werden. Jeder Player benötigt seine eigene ID. Mein erster Player hat hier die ID player1.

> Textfeld doppelklicken > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button HTML” > Code einfügen

<audio id="player1">
   <source src="All_Hallows_Dream.mp3" type="audio/mpeg" />
   <source src="All_Hallows_Dream.ogg" type="audio/ogg" />
   HTML5 Player wird vom Browser nicht unterstützt
</audio>

<img src="play.png" name="play" width="128" height="128" id="playbutton_player1"
title="Abspielen" style="cursor: pointer" onClick="abspielen('player1'),pausieren('player2')"
onMouseover="playbutton_player1.src='play-over.png'"
onMouseout="playbutton_player1.src='play.png'" />

<img src="pause.png" name="pause" width="128" height="128" id="pausebutton_player1"
title="Pause" style="display: none; cursor: pointer" onClick="pausieren('player1')"
onMouseover="pausebutton_player1.src='pause-over.png'"
onMouseout="pausebutton_player1.src='pause.png'" />

<img src="reset.png" name="reset" width="38" height="38" id="resetbutton_player1"
title="von vorne abspielen" style="display: none; cursor: pointer" onClick="anfang('player1')" />

Zum Aufruf des zweiten HTML5 Players, zieht Ihr Euch wieder ein Textfeld auf und fügt Euren Code in den HTML-Code Editor des Textfeldes ein.

Hierbei schalten sich die Player, beim Start des jeweils anderen Players automatisch gegenseitig aus, da in der onClick Anweisung beide Funktionen angesprochen werden. Jeder Player benötigt immer eine eigene ID. Beim 2. Player also hier die ID player2, das könnt Ihr nun beliebig oft wiederholen und dann immer nur die ID erhöhen.

> Textfeld doppelklicken > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button HTML” > Code einfügen

<audio id="player2">
   <source src="ethnophobia.mp3" type="audio/mpeg" />
   <source src="ethnophobia.ogg" type="audio/ogg" />
   HTML5 Player wird vom Browser nicht unterstützt
</audio>

<img src="play.png" name="play" width="128" height="128" id="playbutton_player2"
title="Abspielen" style="cursor: pointer" onClick="abspielen('player2'),pausieren('player1')"
onMouseover="playbutton_player2.src='play-over.png'"
onMouseout="playbutton_player2.src='play.png'" />

<img src="pause.png" name="pause" width="128" height="128" id="pausebutton_player2"
title="Pause" style="display: none; cursor: pointer" onClick="pausieren('player2')"
onMouseover="pausebutton_player2.src='pause-over.png'"
onMouseout="pausebutton_player2.src='pause.png'" />

<img src="reset.png" name="reset" width="38" height="38" id="resetbutton_player2"
title="von vorne abspielen" style="display: none; cursor: pointer" onClick="anfang('player2')" />

Um auch noch die Lautstärke kontrollieren zu können, habe ich noch folgende Buttons in die HTML eines Textfeldes eingefügt, die sich wieder mit ihrer ID auf den jeweiligen Player beziehen. Unten als Beispiel mein erster Player mit der ID ‘player1’. Beim zweiten Player würde dann die ID ‘player2’ stehen. Dabei ist 1 die volle Lautstärke, die ich hier in 2 Zehntel-Schritten pro Klick verändere. Natürlich könntet Ihr, anstelle von Buttons, auch wieder eine Grafik verwenden.

> Textfeld doppelklicken > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button HTML” > Code einfügen

<div>
   <button onClick="document.getElementById('player1').volume += 0.2">lauter</button>
   <button onClick="document.getElementById('player1').volume -= 0.2">leiser</button>
</div>

  • Hinweis
     
    • bitte verwendet nicht meine Grafik, da diese eine Lizenz benötigt.
       
    • achtet darauf, dass Ihr nur gemafreie Musik verwendet

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik