Html5 Video selection avec OnMouseOver

**MrGoldz** · 27/06/2013, 17h54

Bonjour,

Je reviens avec une question un peu plus complexe que la première

cela ne fera que plus de challenge, bien que cela doit être pas si complexe pour les habitué du JavaScript (je suis un ZERO, promis je m'y met bientôt)...

Voici un script qui fonctionne, quand je passe ma souris sur un lien, le player unique affiche la vidéo correspondante (objectif : traduire en langue des signes ce qu'indique le lien). Cependant, j'aimerai que tout les navigateurs puisse lire la vidéo, c'est à dire que je vais injecter chaque vidéo en swf,mp4 et ogg. C'est là où est le problème

, je ne sais pas comment m'y prendre dans ce code pour que je puisse injecter les différent formats pour chaque lien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
function changeVideo(newUrl) {
  var video = document.getElementById("player");
  video.src = newUrl;
  video.load();
  video.play();
}
</script>
</head>
<body>
<div> 
  <ul id="maListe"> 
    <li><a  href="#"  OnMouseOver="javascript:changeVideo('http://www.fsmtds.be/videosFSM/test11.mp4');" rel="player" >
	Accueil</a></li> 
    <li><a href="#" OnMouseOver="javascript:changeVideo('http://www.fsmtds.be/videosFSM/test21.mp4');" rel="player" >
	FSM en bref</a></li> 
    <li><a href="#" OnMouseOver="javascript:changeVideo('http://www.fsmtds.be/videosFSM/test31.mp4');" rel="player" >
	Agenda</a></li> 
  </ul> 
</div> 
 
  <video id="player" width="230" height="225" controls="controls"> 
    <source id="video_src" src="http://www.fsmtds.be/videosFSM/test11.mp4" type="video/mp4" />
  </video> 
</body>
</html>
 
WORDPRESS NAV ENTETE
<nav id="main-nav">
 
		<?php echo ss_framework_main_navigation(); ?>
 
	</nav>

Si je ne me suis pas assez bien fait comprendre, n'hésitez pas à me demander des infos supplémentaires !

Merci d'avance à ceux qui se pencheront sur ce souci

**Barsy** · 28/06/2013, 09h35

Regarde sur cette page, c'est plutôt pas mal expliqué :
...
Il y a plusieurs solutions possibles. A toi de voir laquelle s'adapte le mieux à ton cas.

**MrGoldz** · 28/06/2013, 11h51

Merci Barsy... effectivement j'ai déjà vu cette page de W3Schools, je vois comment insérer par ce biais plusieurs formats pour une vidéo unique mais le souci c'est que là j'ai un seul player qui joue plusieurs vidéos. Donc je dois insérer les différents formats pour chaque lien ... sais tu comment je dois m'y prendre pour indiquer différents formats pour chaque vidéo dans ce code ?

Merci d'avance !

**Barsy** · 28/06/2013, 14h09

J'aurai tendance à dire qu'il faudrait faire quelque chose comme ça

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<video width="320" height="240" controls>
  <source id="sourceMp4" src="movie.mp4" type="video/mp4">
  <source id="sourceOgg" src="movie.ogg" type="video/ogg">
  <object id="objectMp4" data="movie.mp4" width="320" height="240">
    <embed id="embedSwf" src="movie.swf" width="320" height="240">
  </object>
</video>

Et dans le code Javascript

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function changeVideo(urlMp4, urlOgg, urlSwf)
{
document.getElementById("sourceMp4").src = urlMp4;
document.getElementById("sourceOgg").src = urlOgg;
document.getElementById("objectMp4").src = urlMp4;
document.getElementById("embedSwf").src = urlSwf;
}