Discussion :

[tilk2010]

Bonsoir,

voila j'ai créer un lecteur en utilisant la balise <audio></audio> de HTML5 mais ce que je veux c'est le personnaliser c'est à dire mettre mon propre interface pour ce lecteur

Merci de me montrer comment procéder

[Kaamo]

jPlayer fait ça bien. Mais il te faudra utiliser jQuery. Sinon il y a aussi : mediaelement.js, Sound Manager 2 :

[MaitreKaio]

Si tu as un peu de courage, tu peux tout à fait le faire toi même. Évidemment, plus tu voudras en faire, plus ce sera compliqué Et évidemment ce que je propose n'est valable que si le navigateur est compatible avec l'API video. C'est pour cela que des bibliothèques existent pour améliorer la compatibilité descendante.

Mais si le sujet t'intéresse, voilà le principe:

1. On ne veut pas afficher les contrôles natifs proposés par ton navigateur. Pour cela, il suffit de vérifier que ta balise <video> n'a pas l'attribut controls
2. Tu te crées des boutons personnalisés (ce ne sont d'ailleurs pas forcément des éléments de type bouton) que tu styles exactement comme tu veux.
3. Tu écoutes les événements en provenance du lecteur qui vont te permettre de mettre à jour ton interface personnalisée
4. Tu écoutes les événements provenant de ton interface qui vont te permettre d'agir sur le lecteur

Pour l'exemple, et parce que c'est le plus simple et le plus courant, disons que je veux créer un bouton Play/Pause. Je place un bouton dans mon HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" id="playpause" value="Play">

JS (évidemment je ne met que le code intéressant...) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
function init() {
    video = document.getElementById('myvideo');
    playPauseButton = document.getElementById('playpause');
 
    // On ecoute les événements en provenance du lecteur
    // pour mettre à jour le bouton
    video.addEventListener('play', changePlayPauseLabel);
    video.addEventListener('pause', changePlayPauseLabel);
 
    // On ecoute le click du bouton pour interagir avec le lecteur
    playPauseButton.addEventListener('click', playOrPause);
}
 
function changePlayPauseLabel() {
    if (video.paused) {
        playPauseButton.value = "Lecture";
    } else {
        playPauseButton.value = "Pause";
    }
}
 
function playOrPause() {
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

J'espère avoir un peu éclairci le sujet, n'hésite pas si tu as des questions.