HTML/Tutorials/Multimedia/Playlists

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.

Siehe auch Laufzeit mp3 ermitteln im SELF-Forum
→ empfohlen wird, den loadedmetadata-Event abzuwarten und dann .duration(MDN) abzufragen.

--Matthias Scharwies (Diskussion) 17:07, 28. Jun. 2022 (CEST))

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 sounds = new Array(new Audio("1.mp3"), new Audio("2.mp3"));
var i = -1;
playSongs();

function playSongs() {
    i++;
    if (i == sounds.length) return;
    sounds[i].addEventListener('ended', playSnd);
    sounds[i].play();
}

JS Fehlermeldung: Uncaught ReferenceError: playSnd is not defined

Nach Änderung playSnd in playSongs: Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

ToDo (weitere ToDos)

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

Weblinks[Bearbeiten]

volume