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.