HTML/Tutorials/Multimedia/Playlists

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

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

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.

Auch interessant:

• https://css-tricks.com/some-innocent-fun-with-html-video-and-progress/
• https://www.codehim.com/vanilla-javascript/javascript-audio-player-with-playlist/

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

Erstellen und Wiedergabe von Playlists

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)

• stackoverflow: html5: how to play many audio files in sequence?

Weblinks

• dev.opera: A More Accessible HTML5 <video> Player von Ionuț Colceriu (11.12.2010)
• Creating a Custom Audio Player
• designshack: Creating a Custom HTML5 Audio Element UI

volume

• MDN: HTMLMediaElement.volume
• David Walsh: Get and Set Volume with JavaScript