11540 sujets

JavaScript, DOM et API Web HTML5

Player multi-vidéo et responsive, problèmes (javascript + <video>

Bonjour à tous !
Je suis dans une impasse...
J'ai essayé pas mal de trucs mais je n'arrive pas obtenir ce que je veux...
Commençant à maîtriser à peu prêt le HTML5 et le CSS3, j'aimerai parfois aller un peu plus loin avec le javascript mais on passe tout de suite à un autre niveau de programmation pour le web ! héhé

Bref, voici mon problème :
J'ai sur cette page (http://www.jeremy-godreau.com/8.html) un player <video> mélangé avec un peu de javascript.
Il y a 3 vidéos au choix à diffuser dans le cadre principal. La contrainte est que le player s'adapte à la taille de l'écran (responsive c'est ça ? Smiley smile

1)
Mon 1er problème est que je sais pas comment faire pour que les flèches fassent défiler les vidéos lorsque l'on clique dessus (car pour l'instant la flèche "next" envoie toujours sur la vidéo 2 et la flèche "prev" sur la vidéo 3 sans se mettre à jour lorsque l'on passe à une nouvelle vidéo).

2)
Les 3 points jaunes dessous sont des liens qui mènent aux 3 vidéos. J'aurais aimé que quand on clique sur les points la couleur de ceux-ci soient différents des autres pour mieux se repérer.

3)
Pour l'instant, mon système, même s'il est assez bancale fonctionne plus ou moins... Sur firefox et chrome, l'accès aux 3 vidéos est possible en cliquant sur les petites pastilles. Mais pas sur internet explorer ni iphone (je n'ai pas encore testé les autres navigateurs). Pourquoi donc ? héhé


<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-player">
	<video class="video-player" 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>
	<a class="commands prev commands1" href="javascript:changeVideo('videos/video_6.webm', 'videos/video_6.mp4', 'videos/video_6.ogg', 'videos/video_6_iphone.mp4');" rel="player" title="Aller à la dernière vidéo">&lt;</a>  					 
	<a class="commands next commands1" href="javascript:changeVideo('videos/video_5.webm', 'videos/video_5.mp4', 'videos/video_5.ogg', 'videos/video_5_iphone.mp4');" rel="player" title="Aller à la 2ème vidéo">&gt;</a>
	<div> 
	<ul> 
		<li class="choix-video"><a href="javascript:changeVideo('videos/video_4.webm', 'videos/video_4.mp4', 'videos/video_4.ogg', 'videos/video_4_iphone.mp4');" rel="player">&nbsp;&nbsp;</a></li> 
		<li class="choix-video"><a href="javascript:changeVideo('videos/video_5.webm', 'videos/video_5.mp4', 'videos/video_5.ogg', 'videos/video_5_iphone.mp4');" rel="player">&nbsp;&nbsp;</a></li> 
		<li class="choix-video"><a href="javascript:changeVideo('videos/video_6.webm', 'videos/video_6.mp4', 'videos/video_6.ogg', 'videos/video_6_iphone.mp4');" rel="player">&nbsp;&nbsp;</a></li> 
	</ul> 
</div>
</body>
</html>



Merci de m'avoir lu, Help !
Cordialement,
Jérémy
Sujet clos
Aller à