18041 sujets

Questions générales et questions de débutants

Player avec choix de vidéos ?

Bonjour à tous !

Sur mon portfolio web, j'aimerai présenter plusieurs vidéos d'animations.
2 solutions se présentent à moi :

- Mettre les vidéos les unes sous les autres sur une page à faire défiler.
- Réussir à réunir l'ensemble des vidéos d'une page dans un seul player. L'utilisateur pourrait alors cliquer sur l'une ou l'autre vignette pour lancer la vidéo de son choix ! Les vidéos seraient toujours lues dans le même cadre !

upload/47969-exemplevid.png

J'imagine que c'est quelque chose de faisable mais plus en javascript... Hors je n'y connais pas grand chose si ce n'est faire des copier/coller et modifier ce qu'il faut dedans pour l'accorder à mon site ! héhé

Alors si l'un d'entre vous pouvait m'indiquer un site ou un code pour faire ceci, ça serait vraiment génial !

Cordialement,
Jérémy
Petit up ! Smiley smile
(Je précise que l’exemple en image que j'ai posté n'a rien à voir avec l'aspect visuel définitif de ce que j'aimerais faire ! Il s'agit seulement d'une image pour mieux faire comprendre le système que j'aurais aimé avoir).
Modifié par JemsGodo (18 Feb 2013 - 09:44)
Re-bonjour !

Alors voilà, j'ai trouvé quelque chose pour faire ce que je voulais mais je ne sais pas comment faire pour que le javascript comprenne qu'il faut switcher entre les différentes possibilités de formats vidéo si l'une ou l'autre n'est pas reconnu par le navigateur utilisé...

Mon code : 



<html>
	<head>
		<script language="JavaScript" type="text/javascript">
			function changeVideo(newUrl) {
			document.getElementById("video_src").setAttribute("src", newUrl);
				var video = document.getElementById("player");
				video.src = newUrl;
				video.load();
				video.play();
			}
		</script>
	</head>


	<body>
		<div class="gabarit-video">
			<video id="player" controls preload="auto" poster="videos/img_video_4.png" onclick="this.play();"> 
				<source id="video_src" src="videos/video_4.webm" type="video/webm" />
				<source id="video_src" src="videos/video_4.mp4" type="video/mp4" />
				<source id="video_src" src="videos/video_4.ogg" type="video/ogg" />
				<source id="video_src" src="videos/video_4_iphone.mp4" type="video/mp4" />
			</video>
		</div>
		<div> 
			<ul> 
				<li class="choix-video"><a href="javascript:changeVideo('videos/video_4.webm');" rel="player"><img src="images/8_vid1_coul.png" alt="D-link - Video1"/></a></li> 
				<li class="choix-video"><a href="javascript:changeVideo('videos/video_5.webm');" rel="player"><img src="images/8_vid2_coul.png" alt="D-link - Video2"/></a></li> 
				<li class="choix-video"><a href="javascript:changeVideo('videos/video_6.webm');" rel="player"><img src="images/8_vid3_coul.png" alt="D-link - Video3"/></a></li> 
			</ul> 
		</div>
	</body>
</html>


Petite précision :
Ça à l'air de marcher sur modzilla et chrome, mais pas sur internet explorer 9 et Iphone.

Pour voir comment ça réagit : http://www.jeremy-godreau.com/8.html

J'ai volontairement mis uniquement la version "webm" des vidéos dans la liste des boutons vidéo.

Help ! Quelqu'un saurait comment résoudre mon problème ?

Cordialement,
Jérémy
Modifié par JemsGodo (18 Feb 2013 - 13:58)
Sujet clos
Aller à