JavaScript/Tutorials/zugänglicher Medien-Player

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mittlerweile können alle Browser Audio- und Video-Dateien direkt im Browser ohne Plugins abspielen. Dabei haben Sie aber keinen Einfluss auf die Darstellung des browsereigenen Players. In diesem Artikel lernen Sie, wie Sie mit JavaScript einen eigenen Player nach ihren Wünschen programmieren und gestalten können.

Grundgerüst[Bearbeiten]

Beispiel ansehen …
<video id="player" >
  <source src="Demofilm.mp4" type="video/mp4">
  <source src="Demofilm.ogv" type="video/ogv">
    Ihr Browser kann dieses Video nicht wiedergeben.<br/>
    Dieser Film zeigt eine Demonstration des video-Elements. 
    Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
</video>

<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="duration">Länge anzeigen</button>
<p id="ausgabe"></p>
 
<script>
  var song = document.getElementById('player');
  document.getElementById('play').addEventListener('click', function() { song.play(); }, false);
  document.getElementById('pause').addEventListener('click', function() { song.pause(); }, false);
  document.getElementById('duration').addEventListener('click', function() { 
  document.getElementById('ausgabe').innerHTML = 'Die Dauer des Videos beträgt: '+ song.duration; +' Sekunden.'}, false);
</script>

Fortschrittsanzeige[Bearbeiten]

ToDo (weitere ToDos)

Artikel muss erstellt werden.--Matthias Scharwies (Diskussion) 08:08, 24. Jan. 2016 (CET)

Gestaltung der Buttons[Bearbeiten]

Erstellen und Wiedergabe von Playlists[Bearbeiten]

Mit JavaScript ist es möglich mehrere Audio-Dateien in einer Wiedergabeliste (Playlist) zusammenzufassen und dann beliebig abzuspielen, zu wiederholen oder anzubieten.

Beispiel
var sndLetItSnow = new Audio("audio/letItSnow.m4a"),
    sndSanta = new Audio("audio/snow.m4a"),
    playlist = [sndLetItSnow, sndSanta],
    current = null,
    idx = 0;

  function playSound() {
      if (current === null || current.ended) {
          // go to next
          current = playlist[idx++];

          // check if is the last of playlist and return to first
          if (idx >= playlist.length)
              idx = 0;

           // return to begin
           current.currentTime=0;

           // play
           current.play();
      }

  }

  setInterval(playSound, 1000);

ToDo (weitere ToDos)

Kapitel muss erstellt werden. --Matthias Scharwies (Diskussion) 07:52, 11. Jan. 2017 (CET)

Weblinks[Bearbeiten]

volume