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 :P
Version imprimable
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 :P
jPlayer fait ça bien. Mais il te faudra utiliser jQuery. Sinon il y a aussi : mediaelement.js, Sound Manager 2 :
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:
- 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
- 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.
- Tu écoutes les événements en provenance du lecteur qui vont te permettre de mettre à jour ton interface personnalisée
- 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:
JS (évidemment je ne met que le code intéressant...) :Code:
2<input type="button" id="playpause" value="Play">
J'espère avoir un peu éclairci le sujet, n'hésite pas si tu as des questions.Code:
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
29function 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(); } }