Comment créer une playlist audio ou vidéo avec une balise audio ou vidéo, un select et un script Javascript (2 lignes de code).

Tester vous même :

Placer le script ci-dessous dans les balises HEAD de la page.

<script language="JavaScript">
function selmusic() {
var music = document.getElementById('musique').value;
var joue = document.getElementById('jouemusic').src = music;
}
</script>

Placer dans le Html une balise audio nommée id="jouemusic" et placer un select nommé id="musique". La value option du select indique le chemin de vos musiques.

<audio id="jouemusic" controls>
	<source src="" type="audio/mpeg">
Votre navigateur ne supporte pas la balise audio.
</audio>
 
  <select id="musique" onchange="selmusic();">
  	<option value="">Pas de musique</option>
	<option value="midi/2.mp3">Athena - Yasamak</option>
    <option value="midi/3.mp3">Pop corn</option>
	<option value="midi/6.mp3">Y.M.C.A</option>
	<option value="midi/9.mp3">Agadou dou dou</option>
	<option value="midi/10.mp3">Rock collection</option>
  </select>

Pour jouer directement la musique.

<audio id="jouemusic" autoplay controls>

Placer le script ci-dessous dans les balises HEAD de la page.

<script language="JavaScript">
function selvideo() {
var mavideo = document.getElementById('lesvideos').value;
var joue = document.getElementById('jouevideo').src = mavideo;
}
</script>

La même chose que pour l'audio placer dans le Html une balise vidéo nommée id="jouevideo" et placer un select nommé id="lesvideos". La value option du select indique le chemin de vos vidéos.

<video id="jouevideo" controls>
	<source src="" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</vidéo>
 
  <select id="lesvideos" onchange="selvideo();">
  	<option value="">Pas de vidéo</option>
	<option value="film/2.mp4">Ma vidéo 1</option>
    <option value="film/3.mp4">Ma vidéo 2</option>
	<option value="film/6.mp4">Ma vidéo 3</option>
	<option value="film/9.mp4">Ma vidéo 4</option>
	<option value="film/10.mp4">Ma vidéo 5</option>
  </select>