Bonjour,
Je suis nouveau sur le forum, mais ne suis pas débutant puisque je m'occupe de mon site depuis plusieurs années et qu'il semble fonctionner !
J'ai un problème avec mon affichage de vidéos en HTML5, en utilisant la fonction "video".
Je souhaiterais optimiser cela visuellement, et faire en sorte que mes vidéos n'affichent PAS la première image des vidéos concernées, mais que je puisse sélectionner une image (enregistrée autre part sur mon site) à titre de vignette.
Cette image serait soit une illustration, soit une image directement puisée de la vidéo elle même au moyen d'un autre logiciel puis enregistrée dans le site (je ne compte pas faire de manipulation de sélection de vignette à partir de la vidéo sur mon site ; le fichier préexisterait).
L'attribut "poster" est ce qui s'en approche le plus. Toutefois, les vidéos étant immédiatement disponibles, cette image vignette disparaît instantanément. Or, je voudrais une vignette PERMANENTE jusqu'à ce que la personne clique sur le bouton de lecture. Pour revoir la vignette, il faudrait alors rafraîchir la page.
A titre de comparaison, j'aimerais pouvoir choisir la vignette à l'instar de plateformes connues sur internet où l'on peut faire le choix au moment de l'upload sur sa page.
En l'état actuel, ma fonction video choisit en tout état de cause la première image de la vidéo. J'ai également tenté de changer la vignette du fichier source (comme pour une pochette de disque par exemple) d'un fichier MP4. Mon aperçu de fichier change bien lorsque je suis en exploration de fichiers sur mon ordinateur, mais une fois dans la moulinette HTML5 évidemment la première image reste la première image de la vidéo en grand format, même en proposant comme unique source la vidéo en MP4.
Extrait de mon code actuel en version simplifiée :
<video controls width="50%">
<source src="../../videos/mavideo.mp4" type="video/mp4">
<source src="../../videos/mavideo.webm" type="video/webm">
</video>
J'ai cherché sur alsacreations et de nombreux sites sur internet. Rien ne semble aborder le sujet.
Est-ce une impossibilité technique ?
PS : je ne souhaite pas compliquer le code avec du javascript. Uniquement HTML5 et éventuellement CSS3.
Merci par avance si vous avez des pistes afin de trouver une solution intéressante.
Je suis nouveau sur le forum, mais ne suis pas débutant puisque je m'occupe de mon site depuis plusieurs années et qu'il semble fonctionner !
J'ai un problème avec mon affichage de vidéos en HTML5, en utilisant la fonction "video".
Je souhaiterais optimiser cela visuellement, et faire en sorte que mes vidéos n'affichent PAS la première image des vidéos concernées, mais que je puisse sélectionner une image (enregistrée autre part sur mon site) à titre de vignette.
Cette image serait soit une illustration, soit une image directement puisée de la vidéo elle même au moyen d'un autre logiciel puis enregistrée dans le site (je ne compte pas faire de manipulation de sélection de vignette à partir de la vidéo sur mon site ; le fichier préexisterait).
L'attribut "poster" est ce qui s'en approche le plus. Toutefois, les vidéos étant immédiatement disponibles, cette image vignette disparaît instantanément. Or, je voudrais une vignette PERMANENTE jusqu'à ce que la personne clique sur le bouton de lecture. Pour revoir la vignette, il faudrait alors rafraîchir la page.
A titre de comparaison, j'aimerais pouvoir choisir la vignette à l'instar de plateformes connues sur internet où l'on peut faire le choix au moment de l'upload sur sa page.
En l'état actuel, ma fonction video choisit en tout état de cause la première image de la vidéo. J'ai également tenté de changer la vignette du fichier source (comme pour une pochette de disque par exemple) d'un fichier MP4. Mon aperçu de fichier change bien lorsque je suis en exploration de fichiers sur mon ordinateur, mais une fois dans la moulinette HTML5 évidemment la première image reste la première image de la vidéo en grand format, même en proposant comme unique source la vidéo en MP4.
Extrait de mon code actuel en version simplifiée :
<video controls width="50%">
<source src="../../videos/mavideo.mp4" type="video/mp4">
<source src="../../videos/mavideo.webm" type="video/webm">
</video>
J'ai cherché sur alsacreations et de nombreux sites sur internet. Rien ne semble aborder le sujet.
Est-ce une impossibilité technique ?
PS : je ne souhaite pas compliquer le code avec du javascript. Uniquement HTML5 et éventuellement CSS3.
Merci par avance si vous avez des pistes afin de trouver une solution intéressante.
