Remplacer un .jpg par un .mp4 dans un slider

Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 2 juin 2022 à 15:39
 DoctorHow - 3 juin 2022 à 12:22
Bonjour,
J'ai un slider tout simple :
.lddc .bg-img-1 {
	background-image: url(../images/1.jpg);
}
.lddc .bg-img-2 {
	background-image: url(../images/2.jpg);
}
.lddc .bg-img-3 {
	background-image: url(../images/3.jpg);
}
.lddc .bg-img-4 {
	background-image: url(../images/4.jpg);
}
.lddc .bg-img-5 {
	background-image: url(../images/5.jpg);
}


Configuration: Macintosh / Firefox 101.0
dont voici le HTML :
			<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-2"></div>
							<h2>Regula aurea.</h2>
							<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
						</div>
			  </div>
					
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-3"></div>
							<h2>Dum spiro, spero.</h2>
							<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
						</div>
					</div>
					
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-4"></div>
							<h2>Donna nobis pacem.</h2>
							<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
						</div>
					</div>
					
					<div class="sl-slide" data-orientation="vertical">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-5"></div>
							<h2>Acta Non Verba.</h2>
							<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
						</div>

je voulais savoir si on pouvait remplacer le .jpg par une animation gif (une image .gif, c'est bon; mais pour l'animation, je n'y arrive pas) pour par une video mp4 ou autres ?!!?
Merci d'avance,
E.
A voir également:

3 réponses

Salut,
en effet background-image sert à mettre une image de fond donc pas une vidéo .mp4

Pour faire ce que vous faites il faudrait utiliser la programmation(JavaScript) et mettre les éléments défilants avec <img> pour une image et <video> pour une vidéo.
Cela peut se faire en testant l'élément à afficher (selon son type) pour inclure soit img soit video et leur URL.

https://www.w3schools.com/tags/tag_img.asp

https://www.w3schools.com/tags/tag_video.asp

Il manque d'ailleurs dans le code(complet) que vous mettez pour le slider en lui même donc impossible de dire quoi que ce soit d'autre et qui utilise probablement JavaScript pour masquer/afficher les éléments au fur et à mesure du défilement(pour les classes CSS sl-slide et sl-slide-inner qui ne sont décrites nulle part dans ce que vous montrez).
Il y a certainement mieux que la façon dont c'est fait d'ailleurs: en changeant dynamiquement les contenus(et non une image d'arrière plan non repéré comme contenu mais comme élément décoratif) au fil du temps et permettrait de référencer vos contenus correctement en tant qu'images(ou vidéos) et non en tant qu'élément d'arrière plan qui n'est pas vraiment référencé.
0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
2 juin 2022 à 18:43
Je ne touche malheureusement au Javascript :/
Je pensais que cela pouvait se régler avec les CSS (je peux envoyer les codes)
Mais merci DoctorHow
0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
2 juin 2022 à 18:48
Mais c'est étonnant qu'il accepte une image .gif, mais pas une animation !????!!!
-1
Une "image gif" c'est une image(formats et contenus même si plusieurs en fait si ce sont des "gifs animés") non rien d'étonnant à ça. Par contre pour lire une vidéo il faut un lecteur vidéo ce qui n'a rien à voir!!

Il est possible de convertir vos vidéos en images animés(png animé nettement meilleur que gif animé qui est un format super naze et à éviter totalement) mais bien sûr vous y perdez en qualité et en plus mettre une image animé en arrière plan TOTALEMENT à éviter et ce n'est simplement plus une vidéo donc adieu la possibilité de lecture/arrêt/etc...
Bref pour une vidéo utilisez la balise vidéo et pour une image la balise image. ça semble plutôt basique comme principe(voir aussi la sémantique et le rôle de HTML) étonnant que j'ai à le répéter.


Votre code présenté ici reste incomplet parce que vous ne montrez simplement pas la partie qui gère l'animation: le JavaScript il y a de grandes chances.
Il aurait été mieux de mettre votre code COMPLET et encore mieux de le comprendre par vous même histoire de savoir ce que vous faites.
ça aide pas mal, vous pouvez commencer par cela et concernant la programmation ou un langage de programmation en particulier cela s’apprend et pour ça pas de secret: travailler.

bon travail alors.
0