Media player HTML5

Bonjour,

Pour ceux qui m'ont suivi sur ce forum depuis quelques semaines vous savez que je me suis attaqué à développer un player HTML5, audio et vidéo. Je pense l'avoir suffisamment testé et finalisé désormais et le livre à votre critique : les styles, le script, l'ergonomie, l'accessibilité... ce que vous voulez.

Voici la page de démonstration.

Le script une fois minifié pèse environ 11ko. La page de dev' est ici : Github.



Un grand merci à tous les alsanautes qui m'ont aidé dans la conception de ce player.

Bien à vous.
Modifié par Olivier C (07 Jun 2023 - 23:32)

Salut Olivier,
attention, sur la page de démonstration, on dirait que tu as oublié le petit script que je t'avais signalé. Quand un morceau joue, il se tait si on enclenche un nouveau. Ça ne semble pas fonctionner, et JavaScript est actif sur mon navigateur. C'est indispensable, avec des lecteurs multiples.
Sur l'image de la page de ton post, je n'aime pas la superposition des boutons à droite. Trop chargé à mon goût.
Sinon, bien, tout fait à partir de zéro.
Prochain challenge, une forme d'onde au son de la musique. Une vraie forme d'onde, pas des simili comme on voit presque partout. C'est pas donné, je me suis penché dessus -analyser le son, le découper, le reproduire sous forme d'onde. J'ai trouvé un script, mais tellement matheux que j'ai abandonné.
Modifié par Bongota (07 Jun 2023 - 16:29)

Bongota a écrit :
attention, sur la page de démonstration, on dirait que tu as oublié le petit script que je t'avais signalé. Quand un morceau joue, il se tait si on enclenche un nouveau. Ça ne semble pas fonctionner...

Houlà oui, j'ai casé quelque chose lors de la dernière MAJ, c'est réparé et la Github Page sera réactualisée dans quelques minutes (pour ceux qui ont déjà visité pensez à vider votre cache).

Bongota a écrit :
Prochain challenge, une forme d'onde au son de la musique. Une vraie forme d'onde, pas des simili comme on voit presque partout.

Oui, on peut dessiner un SVG en fonction des ondes. J'avais aussi imaginé faire des captures d'images issues des vidéos, comme sur cette page test, mais je préfère que le player reste simple. Son objectif principal est d'être intégré au site, et ce quel que soit le navigateur utilisé. Je ne veux pas le transformer en couteaux Suisse et préfère qu'il fasse bien les fonctionnalités de base.

Nota bene : je ne sais pas si tu as vu mais j'ai intégré une fonction lecture à la suite ("data-next-reading"). C'est toi qui m'a influencé
Modifié par Olivier C (07 Jun 2023 - 22:29)

Bravo pour la réalisation. Mais au fait, tu n'avais pas de la peinture à faire. Un vrai gamin cet Olivier ^^

@niuxe :

La peinture est finie depuis quelques temps déjà. Ouf. L'eau, l’électricité, les doublages, les menuiseries... j'aurais tout refais dans cette baraque (moi qui ne suis pas manuel), mais ça se tire.

Pour le player, comme vous n'êtes pas très méchants, je me colle moi-même à une auto-critique :
- Les boutons avance et retour par saut de 10 secondes ("leap rewind" et "leap forward") peuvent être séparés si le menu étendu passe à 2 lignes. Ça, je pense que je corrigerais prochainement.
- Le bouton "motion" n'est pas explicite dans la mesure où - pour des raisons de concisions - il ne donne pas à l'avance les différentes possibilités offertes, il faut cliquer pour les découvrir.
- Idem pour le bouton des traductions ("subtitles").
- Le bouton "mute", calqué sur celui du player de Google Chrome, à sa propre logique couplée avec le volume, ce qui peut être déroutant lors de la manipulation.
- D'une manière générale les boutons ne sont pas forcément explicites pour tout le monde. C'est voulu pour une question de concision, mais ne faudrait-il pas mettre une option qui rend les boutons plus explicites ? Pas forcément difficile à faire en JS mais plus difficile à intégrer joliment au niveau UI, même si j'ai des idées. Bon maintenant, si un jour je faisais un package npm et que je me retrouvais avec 1 million de téléchargement, la question se poserait... mais nous n'en sommes pas là.

Tout ça est à revoir éventuellement.
Modifié par Olivier C (07 Jun 2023 - 23:36)

bonjour
on peut faire tourner 2 videos en même temps.

@drphilgood : je vois ce que tu veux dire car sur la page de démonstration j'ai aussi installé un script maison pour gérer les vidéos Youtube. Mais, bien qu'il soit sur la page de présentation des médias, ce script ne fait pas partie du player HTML5. Normalement, pour le player, on ne peut lire qu'un fichier audio ou vidéo à la fois.
Modifié par Olivier C (08 Jun 2023 - 06:49)