5568 sujets

Sémantique web et HTML

Intégration d'une vidéo avec fond transparent sur site internet

Bonjour à tous!

Je suis nouveau sur le forum et ne suis pas très doué en développement informatique, donc je vous remercie par avance pour votre indulgence.

Voici ma problématique.
Je filme des personnes en studio sur fond vert, pour ensuite les intégrer via un lecteur flash sur des sites internet.
Je travaille avec Adobe Premiere, je détoure le fond vert, pour ne garder que le personnage sur fond transparent au moment de l'export, au format .flv.

Le problème avec le .flv, c'est que les vidéos, une fois incrustées sur le site internet, fonctionnent très bien sous les systèmes Windows, mais pas sur les systèmes Mac, tablettes et téléphones.

Je sais aussi que les autres formats comme le .mp4 ne gèrent pas la transparence de la vidéo.

Est-ce que quelqu'un aurait une idée qui me permettrait d'avoir une vidéo compatible avec tous les systèmes, tout en conservant ce fameux fond transparent?

Merci par avance à tous ceux qui prêteront attention à ma demande.

Bon après-midi à vous.
Modérateur
C'est chaud, j'ai jamais vu de vidéo transparente... ça m’intéresse !

(au pire tu peux incruster ton site en fond de la vidéo dans Première ! Smiley lol hahaha)
Laurent,

Voici une entreprise au Royaume-Uni qui a réussi (et visiblement ils sont les seuls) à mettre au point un lecteur compatible avec tous les systèmes :

http://www.mywebpresenters.com/

La présentatrice est sur fond transparent, ce qui permet d'incruster la vidéo directement sur la page d'accueil du site web.
Du coup je suis désolé mais je ne savais pas trop si je devais posté mon message dans la catégorie "html" ou "javascript" ou autre, je suis complètement dépassé par tout ça Smiley lol
Bonsoir,
Le MDN propose une solution à ce genre de problème, mais elle demande d'avoir quelques connaissances en JavaScript.
Tout d'abord, il faut conserver le fond vert sur le fichier vidéo.
Sur le site :
* on utilise un élément video dont la source est le fichier voulu
* on injecte la video dans un élément canvas
* on récupère les infos sur les pixels
* si un pixel est plutôt vert, on le rend transparent
* on injecte les nouvelles données dans un autre canvas
Bien entendu, il faut faire tout ça très régulièrement pour obtenir une image animée, par exemple à l'aide de requestAnimationFrame.

Je vais voir si j'ai le temps de réaliser un exemple simple.
Bonsoir Tris Toon,

Merci beaucoup pour cette piste, je vais essayer de creuser tout ça.
Modifié par Totone (21 Dec 2017 - 18:42)
Re-bonsoir,
Je vous ai créé une petite solution en JavaScript, basée sur la démonstration du MDN mentionnée plus haut.
Le rendu n'est pas très bon, donc essayez peut-être votre solution à la place.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<style>
			body {
				background: linear-gradient(to right, #f99, #99f);
			}
		</style>
		<title>Vidéo transparente</title>
	</head>
	<body>
		<figure>
			<video controls="true" data-transparent>
				<source src="video.ogv"></source>
			</video>
			<!-- on spécifie la transparence avec un attribut personnalisé "data-transparent" -->
			<figcaption>Une première vidéo</figcaption>
		</figure>
		<figure>
			<video controls="true" data-transparent>
				<source src="video.ogv"></source>
			</video>
			<figcaption>Une autre vidéo</figcaption>
		</figure>
	</body>
	<script>
		[...document.querySelectorAll ("video[data-transparent]")].forEach (video => {
			const canvas1 = document.createElement ("canvas");
			const canvas2 = document.createElement ("canvas");
			let width = 0;
			let height = 0;
			let context1 = null;
			let context2 = null;
			canvas2.style.position = "fixed";
			canvas2.style.right = "100%";
			const paint = function () {
				const style = getComputedStyle (video);
				canvas2.style.width = style.getPropertyValue ("width");
				canvas2.style.height = style.getPropertyValue ("height");
				if (!video.ended && !video.paused) {
					context1.drawImage (video, 0, 0, width, height);
					const frame = context1.getImageData (0, 0, width - 1, height - 1);
					for (let i = 0, l = frame.data.length; i < l; i += 4) {
						const r = frame.data [i];
						const g = frame.data [i + 1];
						const b = frame.data [i + 2];
						if (g > 100 && r > 100 && b < 43) { /* à modifier selon la couleur d'arrière-plan à remplacer */
							frame.data [i + 3] = 0;
						};
					}
					context2.putImageData (frame, 0, 0);
				};
				requestAnimationFrame (paint);
			};
			video.addEventListener ("canplay", function () {
				width = canvas1.width = canvas2.width = video.videoWidth;
				height = canvas1.height = canvas2.height = video.videoHeight;
				context1 = canvas1.getContext ("2d");
				context2 = canvas2.getContext ("2d");
				video.parentNode.insertBefore (canvas2, video.nextSibling);
				const play = function () {
					video.style.position = "fixed";
					video.style.right = "100%";
					canvas2.style.position = canvas2.style.right = null;
				};
				const pause = function () {
					canvas2.style.position = "fixed";
					canvas2.style.right = "100%";
					video.style.position = video.style.right = null;
				};
				video.addEventListener ("play", play, false);
				video.addEventListener ("pause", pause, false);
				video.addEventListener ("ended", pause, false);
				canvas2.addEventListener ("click", function () {
					video.pause ();
				}, false);
				requestAnimationFrame (paint);
			}, false);
		});
	</script>
</html>

Modifié par TrisTOON (03 Mar 2017 - 20:29)
Nos messages se sont croisés.

Je ne pense pas par contre que l'on puisse compiler.
Il s'agit seulement d'un bricolage en temps réel.
Regardez tout même si cela ne peut pas être fait à l'aide de HTMLCanvasElement.captureStream()
Modifié par TrisTOON (02 Mar 2017 - 21:51)
Bonjour Tris Toon,

Merci beaucoup pour le texte Javascript, je transmets à mon collègue pour le tester sur notre site internet.

Bon weekend à vous.
Bonjour à tous.

J'essaye aussi de réaliser le même effet.
J'ai trouvé l'effet vendu par cette sociéé http://www.france-consulting.fr/

Ici, on peut voir une page brute :
http://www.eliotek.fr/video-eliotek/videog.inc.php?width=290&height=440

J'ai pu télécharger tous les fichiers php, vidéo et images du code.
Ce répertoire n'a pas de fichier index.html, vous pouvez récupérer les fichiers pour analyse.
http://www.koph.fr/video-eliotek/

On peut récupérer dans le sous répertoire player que les fichiers connus dans le code (des images png). On ne voit dans le code pas d'appel au répertoire flash.

Le fichier php videog.inc.php ne gère que du html

Si l'on regarde une vidéo :
http://www.koph.fr/video-eliotek/videos/videog.m4v[/url]

L'image est découpée en deux : en haut la vidéo avec le fond vert remplacé par du noir, en bas, un masque blanc correspondant à l'image du haut. Assez simple à reproduire en maîtrisant Première

Le fichier javascript jquery-1.11.0.min.js doit certainement être le player.

J'ai tout récupéré, je me suis reconfiguré les liens. En local, en fichier html, j'ai les boutons et le son. Sur mon site web, en php, rien ne se passe.

Voici pour les infos à analyser. Y aurait-il appel à un fichier caché ? Une configuration de serveur (.htaccess) ? Si quelqu'un trouve la solution, merci.

Olivier
Bonjour Olivve,

Votre piste est vraiment très intéressante! Vos tests ont pu aboutir?

Bonne journée.
Christel peux tu expliquer ta solution stp ?

1/ Comment obtiens tu cette video ?
2/ Comment l'intègres-tu au final sur le site ?

Peux tu donner un petit exemple de code pour l'intégration ? Et quel logiciel ou méthode utiliser pour transformer la video initial en la tienne ?

Merci d'avance
Sujet clos
Aller à