modifier src video html 5

**Dark-Chyper** · 10/10/2013, 15h47

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 html :

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
<!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 :

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
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 html :

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

<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à ?

**Bovino** · 10/10/2013, 16h21

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

Code :

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

document.getElementById('video').load();

**Dark-Chyper** · 10/10/2013, 17h05

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

**Bovino** · 10/10/2013, 17h29

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.

**Dark-Chyper** · 11/10/2013, 15h51

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 :

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
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 html :

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
<!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>

modifier src video html 5 [API HTML5]

JavaScript

Discussions similaires

Partager

Partager