Recherche un lecteur vidéo avec contrôles sous la vidéo

Bonjour,

Je recherche un lecteur vidéo HTML5 avec les contrôles (la barre de lecture) qui ne soit pas placée sur la vidéo mais en-dessous, et visible en permanence.

Quelqu'un saurait-il où je peux trouver cela ?

Merci à vous.

Bonjour,
avec ce code, tu auras le bandeau placé sur le bas de la vidéo, mais dès que tu auras enlevé la souris de la vidéo, il disparaîtra. Il est d'ailleurs légèrement en transparence sur la vidéo. Il disparaîtra aussi automatiquement au bout de 2 secondes, environ. Quand tu remets la souris dessus, il apparaît de nouveau. Ça ne suffit pas ?

<video width="400" height="auto" controls="controls" preload="none">
  <source src="Videos/Exemple-Piano.mp4" type="video/mp4" />
  <source src="Videos/Exemples-Piano.ogv" type="video/ogg" /> 
Vous ne pouvez pas lire ces formats de vido ? Mettez à jour votre navigateur.
</video>

Je n'ai pas connaissance d'un bandeau qui se placerait à l'extérieur de la vidéo, tout du moins pas avec la simple balise audio html5.
Sinon, avec JavaScript :
http://webeur.blogspot.com/2014/01/controler-le-lecteur-video-html5-avec.html
Mais je ne vois pas de lecteur en-dehors de la vidéo.

Bongota a écrit :
Bonjour,
avec ce code, tu auras le bandeau placé sur le bas de la vidéo, mais dès que tu auras enlevé la souris de la vidéo, il disparaîtra. Il est d'ailleurs légèrement en transparence sur la vidéo. Il disparaîtra aussi automatiquement au bout de 2 secondes, environ. Quand tu remets la souris dessus, il apparaît de nouveau. Ça ne suffit pas ?

<video width="400" height="auto" controls="controls" preload="none">
  <source src="Videos/Exemple-Piano.mp4" type="video/mp4" />
  <source src="Videos/Exemples-Piano.ogv" type="video/ogg" /> 
Vous ne pouvez pas lire ces formats de vido ? Mettez à jour votre navigateur.
</video>

Je n'ai pas connaissance d'un bandeau qui se placerait à l'extérieur de la vidéo, tout du moins pas avec la simple balise audio html5.
Sinon, avec JavaScript :
http://webeur.blogspot.com/2014/01/controler-le-lecteur-video-html5-avec.html
Mais je ne vois pas de lecteur en-dehors de la vidéo.

J'ai actuellement un projet avec une balise video du type, est-ce que le preload="none" est vraiment nécéssaire ? Merci

On dira que ça dépend... Si les vidéos proposées sont loin dans la ou les pages et optionnelles, "preload: none" est indiqué. Ça évitera de charger inutilement et trop tôt une lourde vidéo qui ne sera peut-être pas lue ou lue bien plus tard. Si la vidéo fait office d'accueil sur la première page, il vaut mieux la charger de suite. Deux bons liens sur le sujet :

https://www.stevesouders.com/blog/2013/04/12/html5-video-preload/
https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload

Et les navigateurs mettent parfois d'office certaines valeurs à "preload", surtout sur les mobiles. Le logiciel de conversion a aussi son mot à dire dans la fluidité des vidéos.
Tu peux aussi faire du "lazy loading vidéos". J'ai essayé avec succès sur des images et il ne devrait y avoir aucune objection pour les vidéos.

Salut Bongota et merci pour ta réponse.

Effectivement, ce n'est pas ce je recherche. J'aimerais que la barre de lecture soit toujours visible, en bas et surtout à l'extérieur de la vidéo.

Mais bon, c'est bizarre que ça ne puisse pas se trouver. En tout cas, merci pour l'aide.

Il faut le faire. Remplacer les commandes d'origine par des commandes en JavaScript et positionner ces commandes où on veut, par exemple dans un block en dehors de la vidéo. Il y a beaucoup de tutos pour remplacer les commandes d'origine de la balise audio html5 et les faire agir par JavaScript. Ne pas oublier que si les boutons de commande sont trop loin de la vidéo, les visiteurs risquent d'être perdus. C'est pas pour rien qu'à l'origine ils sont sur la vidéo.
Si je trouve des liens d'ici un ou deux jours, je les expédie.

OK. Je suis près à mettre les mains dans le cambouis, mais vraiment débutant à ce niveau. Donc, oui si tu trouves des liens qui pourraient m'expliquer tout ça sans jargon trop complexe, ce serait super. Merci à toi.

Voilà un lien qui, je pense répond très bien à ta problématique. Les explications sont claires et progressives.
https://zestedesavoir.com/tutoriels/449/les-balises-audio-et-video-en-html5/
Lis jusqu'au bout, il y a un exemple avec des commandes qui s'affichent sur la vidéo mais avec une transparence très forte, ce qui fait qu'on voit très faiblement ces commandes (dans le code css, elles sont à "opacity: 0.2;" pour passer à 0.8 au survol.
Tout ça est aussi valable avec la balise audio.
Pour ma part, j'ai préféré revenir au bon vieux lecteur d'origine de la balise audio. Avec opacity et mix-blend-mode on fait beaucoup de choses intéressantes (et près de 60 lignes de js en moins).

ps: je n'ai pas testé les codes de ce lien et dans les commentaires, une erreur est signalée.

Merci beaucoup pour ce lien, Bongota. Je l'ai bien exploré mais malheureusement, il n'est pas précisé comment décaler la barre de lecture en dehors de la vidéo. Je vais continuer à chercher car, en plus, j'ai l'impression que ce ne devrait pas être si compliqué cela.