modifier src video html 5

Version imprimable

Bonjour,
j'essaye de créer un outil pour remplacer une animation pas à pas en Flash par une série de vidéo appelées via la balise <video> de HTML 5.
J'ai besoin que l'on puisse avancer ou reculer dans une "histoire" en avançant ou reculant dans ces vidéos sans que cela soit trop visible pour l'utilisateur. Ca doit s'activer par un clic sur une flèche à l'écran (compatibilité tablette et autres mobiles) et par les flèches gauche et droite du clavier.

le fichier html :

Code:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test Playlist</title>
		<link rel="stylesheet" href="playlist.css">	
		<script src="playlist.js"></script>	
	</head>
	<body>
	   	<script>document.onkeydown = applyKey;</script>	
		<div id="header">&nbsp;</div>
		<div id="container" class="column">
			<div id="center">
				<video class="column" width="640" height="360" autoplay>
				<source id="videoMPG" src="./medias/1.mp4" type="video/mp4">
				<source id="videoOGG" src="./medias/1.ogv" type="video/ogg">
					Your browser does not support the video tag.
				</video>
			</div>
			<div id="left" class="column"><img src="./gauche.png" width="40" height="360" alt="backward" onClick="backward()" /></div>
			<div id="right" class="column"><img src="./droite.png" width="40" height="360" alt="forward" onClick="forward()" /></div>
		</div>
 
		<div id="footer">&nbsp;</div>
 
   </body>
 
</html>

le contenu de playlist.js :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//KEY_DOWN	= 40;
//KEY_UP		= 38;
KEY_LEFT	= 37;
KEY_RIGHT	= 39;
 
 
 
function checkEventObj ( _event_ ){
	// --- IE explorer
	if ( window.event )
		return window.event;
	// --- Netscape and other explorers
	else
		return _event_;
}
 
function applyKey (_event_){
 
	// --- Retrieve event object from current web explorer
	var winObj = checkEventObj(_event_);
 
	var intKeyCode = winObj.keyCode;
	var intAltKey = winObj.altKey;
	var intCtrlKey = winObj.ctrlKey;
 
	if ( intKeyCode == KEY_RIGHT ) {
		forward();
		}
	if ( intKeyCode == KEY_LEFT) {
		backward();
		}
 
}
   function forward(){
   var videoPlayerMPG;
   va videoPlayerOGG;
 
   var video_count;
 
   var spliter;
   var currentSplit;
   var tab;
   var currentVideo;
   var nextVideoMPG;
   var nextVideoOGG;
 
   videoPlayerMPG = document.getElementById("videoMPG");
   videoPlayerOGG = document.getElementById("videoOGG");
 
   spliter = videoPlayerMPG.src.split("/");
   currentSplit = spliter[spliter.length-1]
   tab = currentSplit.split(".");
   currentVideo = tab[0];
   currentVideo++;
   if (currentVideo == 4) currentVideo = 1;
   nextVideoMPG = "./medias/"+currentVideo+".mp4";
   videoPlayerMPG.src = nextVideoMPG;
   videoPlayerMPG.type = "video/mp4";
   nextVideoOGG = "./medias/"+currentVideoOGG+".ogv";
   videoPlayerOGG.src = nextVideoMPG;
   videoPlayerOGG.type = "video/ogg";
   }
   function backward(){
   var videoPlayerMPG;
   var videoPlayerOGG;
   var video_count;
 
   var spliter;
   var currentSplit;
   var tab;
   var currentVideo;
   var nextVideoMPG;
   var nextVideoOGG;
 
   videoPlayerMPG = document.getElementById("videoMPG");
   videoPlayerOGG = document.getElementById("videoOGG");
 
   spliter = videoPlayer.src.split("/");
   currentSplit = spliter[spliter.length-1]
   tab = currentSplit.split(".");
   currentVideo = tab[0];
   currentVideo--;
   if (currentVideo <= 1) currentVideo = 1;
   nextVideoMPG = "./medias/"+currentVideo+".mp4";
   videoPlayerMPG.src = nextVideoMPG;
   videoPlayerMPG.type = "video/mp4";
   nextVideoOGG = "./medias/"+currentVideoOGG+".ogv";
   videoPlayerOGG.src = nextVideoMPG;
   videoPlayerOGG.type = "video/ogg";
   }

Rien ne se passe quand je clique ou que j'utilise les flèches du clavier.

J'avais fait une première version fonctionnelle mais pas très propre et qui ne fonctionnait pas sur tous les navigateurs.

cela fonctionnait avec dans le code html :

Code:

<video class="column" width="640" height="360" autoplay id="Video" src="./medias/1.mp4" type="video/mp4"  >Your browser does not support the video tag.</video>

Donc sans les balise <source> qui sont pourtant très pratiques pour donner le choix au navigateur.

Une petite aide pour fixer celà ?

10/10/2013, 16h21
Bovino

Une fois que tu as affecté les nouvelles valeurs aux balises <source>, il faut recharger la vidéo :

Code:

document.getElementById('video').load();
10/10/2013, 17h05
Dark-Chyper

Huum ca me semblait assez logique en effet, mais celà ne fonctionne toujours pas malheureusement :/ ca ne change même pas les src !
10/10/2013, 17h29
Bovino

Dans ce cas, c'est probablement l'affectation de tes src qui n'est pas correct.
Il faudrait que tu regardes au niveau de la console ce qu'il se passe avec des console.log() et que tu vérifies que les chemins sont corrects.

ok il y avait quelques petites erreures comme une "}" manquante et des variables mal écrites par endroit.

Cela fonctionne très bien maintenant ! Merci Beaucoup :)

je laisse pour ceux qui chercherait une solution similaire, le code terminé ici :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//KEY_DOWN	= 40;
//KEY_UP		= 38;
KEY_LEFT	= 37;
KEY_RIGHT	= 39;
 
function checkEventObj ( _event_ ){
	// --- IE explorer
	if ( window.event )
		return window.event;
	// --- Netscape and other explorers
	else
		return _event_;
}
 
function applyKey (_event_){
 
	// --- Retrieve event object from current web explorer
	var winObj = checkEventObj(_event_);
 
	var intKeyCode = winObj.keyCode;
	var intAltKey = winObj.altKey;
	var intCtrlKey = winObj.ctrlKey;
 
	if ( intKeyCode == KEY_RIGHT ) {
		forward();
		}
	if ( intKeyCode == KEY_LEFT) {
		backward();
		}
 
}
   function forward(){
   var videoPlayerMPG;
   var videoPlayerOGG;
 
   var video_count;
 
   var spliter;
   var currentSplit;
   var tab;
   var currentVideo;
   var nextVideoMPG;
   var nextVideoOGG;
 
   videoPlayerMPG = document.getElementById("videoMPG");
   videoPlayerOGG = document.getElementById("videoOGG");
 
   spliter = videoPlayerMPG.src.split("/");
   currentSplit = spliter[spliter.length-1]
   tab = currentSplit.split(".");
   currentVideo = tab[0];
   currentVideo++;
   if (currentVideo == 4) currentVideo = 1;
   nextVideoMPG = "./medias/"+currentVideo+".mp4";
   videoPlayerMPG.src = nextVideoMPG;
   videoPlayerMPG.type = "video/mp4";
   nextVideoOGG = "./medias/"+currentVideo+".ogv";
   videoPlayerOGG.src = nextVideoOGG;
   videoPlayerOGG.type = "video/ogg";
   document.getElementById('video').load();
 
}   
   function backward(){
   var videoPlayerMPG;
   var videoPlayerOGG;
   var video_count;
 
   var spliter;
   var currentSplit;
   var tab;
   var currentVideo;
   var nextVideoMPG;
   var nextVideoOGG;
 
   videoPlayerMPG = document.getElementById("videoMPG");
   videoPlayerOGG = document.getElementById("videoOGG");
 
   spliter = videoPlayerMPG.src.split("/");
   currentSplit = spliter[spliter.length-1]
   tab = currentSplit.split(".");
   currentVideo = tab[0];
   currentVideo--;
   if (currentVideo <= 1) currentVideo = 1;
   nextVideoMPG = "./medias/"+currentVideo+".mp4";
   videoPlayerMPG.src = nextVideoMPG;
   videoPlayerMPG.type = "video/mp4";
   nextVideoOGG = "./medias/"+currentVideo+".ogv";
   videoPlayerOGG.src = nextVideoOGG;
   videoPlayerOGG.type = "video/ogg";
   document.getElementById('video').load();
   }

Code:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Test Playlist</title>
		<link rel="stylesheet" href="playlist.css">	
		<script src="./playlist.js"></script>
	</head>
	<body>
	   	<script>document.onkeydown = applyKey;</script>	
		<div id="header">&nbsp;</div>
		<div id="container" class="column">
			<div id="center">
				<video class="column" width="640" height="360" autoplay id="video">
				<source id="videoMPG" src="./medias/1.mp4" type="video/mp4">
				<source id="videoOGG" src="./medias/1.ogv" type="video/ogg">
					Your browser does not support the video tag.
				</video>
			</div>
			<div id="left" class="column"><img src="./gauche.png" width="40" height="360" alt="precedent" onClick="backward()" /></div>
			<div id="right" class="column"><img src="./droite.png" width="40" height="360" alt="suivant" onClick="forward()" /></div>
		</div>
 
		<div id="footer">&nbsp;</div>
 
   </body>
 
</html>