Video interactive plein écran

Version imprimable

29/05/2015, 14h41
rvm31

Video interactive plein écran

Bonjour

J'avais déjà posé quelques questions dans ce sens mais sans trouvé de réponses.
Je voudrais faire une vidéo interactive, des éléments cliquables apparaissent par dessus la vidéo à différents moments.
jusque là rien de très compliqué, plein de choses existent entre autres celles proposées par popcorn.js
Mais les choses se compliquent si je laisse le choix à l'utilisateur de mettre la vidéo plein écran , à ce moment la vidéo vient devant et les autres éléments n'apparaissent plus.
Des solutions existent car cet exemple de raptmedia.com les éléments d'interactivité restent même quand la vidéo est plein écran.

jour

c'est possible mais il y a du travaille voici un exemple de base le principe c'est de tous mettre dans un div conteneur et de mettre le div en plein ecran

remplace l'image par celle de ton choix et appui sur entree

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
 
<!doctype html>
<html>
<head>
  <title>Full Screen Example</title>
  <style type="text/css">
    /* make the video stretch to fill the screen in WebKit */
    :-webkit-full-screen #myvideo {
      width: 100%;
      height: 100%;
    }
  </style>
 
  <script>
 
function toggleFullScreen() {
 
 var vivi = document.getElementById("myvideo");
 
 var dv = document.getElementById("mydiv");
 
	if (!document.mozFullScreen && !document.webkitFullScreen) {
 
		if (dv.mozRequestFullScreen) {
			dv.mozRequestFullScreen();
			vivi.style.height='100%'
			vivi.style.width='100%'
		} 
 
		else {
			dv.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
			vivi.style.height='100%'
			vivi.style.width='100%'
		}
	} 
 
	else {
		if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
			vivi.style.height='50%'
			vivi.style.width='50%'
		} 
 
		else {
			document.webkitCancelFullScreen();
			vivi.style.height='50%'
			vivi.style.width='50%'
		}
	}
}
 
  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);
</script>
 
 
</head>
<body>
 
<div id="mydiv" style='position:relative;height:100%;width:100%'>
 
 <video id="myvideo" controls src="http://videos-cdn.mozilla.net/serv/webmademovies/Moz_Doc_0329_GetInvolved_ST.webm" style='height:50%;width:50%' >
 
  </video>
 <img style='position:absolute;top:0px;left:0px;' src='carte_france.gif' id="myimage"/>
 
 </div>
</body>
 
</html>

ps: la curiosité m'a fait essayer la faisabilité de la chose et c'est mon premier essai pour dire j'y connais pas grand chose

03/06/2015, 21h32
rvm31

merci melka one

c'est un début de piste, et c'est simple.
Pour le moment il y a un inconvénient si j'appuie sur le bouton full screen affiché par la balise <video>, la video est plein écran, mais l'image en surimpression disparait. je vais regarder si on peut faire un add event listener sur ce bouton, ou avoir une image par dessus.
Et visiblement lors de l'exit full screen la vidéo reste à 100% au lieu de passer à 50%.
03/06/2015, 22h39
melka one

quand on regarde l'exemple du lien il on mis un player personnalisé comme ca il n'on ce probleme pareille pour le plein ecran. et quand on en sort preventDefault devrait eviter ce probleme
04/06/2015, 16h24
rvm31

tu as le lien de l'exemple?
04/06/2015, 19h00
melka one

il s'agit du lien du premier poste:aie:

si sa peut t'aidé c'est un player que j'ai fait il y a quelles temps que j'ai un peut modifié pour qu'il fonctionne en plein ecran

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
body {
background-color:gray;
}
#commande{
position:absolute;
bottom:0px;
height:50px;
width:100%;
background:#38383A;
opacity:0;
}
#commande:hover{
opacity:1;
}
#commande input{
width:60px;
height:20px;
margin-left:10px;
color:white;
border:solid;
border-width:1px;
border-color:white;
border-radius:8px;
background-color:#56555A;
float:left;
}
#defile{
 background-color:white;
 width:40%;
 margin:auto;
 border-radius:7px
 }
#precharge{
background-color:#6A665B;
width:0px;
height:14px;
border-radius:7px
}
#bar{
background-color:#222222;
width:14px;
height:14px;
margin-top:-14px;
border-radius:7px;
}
.mt_le_son{
height:14px;
border-radius:7px;
width:60px;
background:white;
margin-right:30px;
margin-top:-15px;
float:right;
cursor:pointer
}
.cur_son{
height:14px;
border-radius:5px;
width:100%;
background:#6A665B;
}
.bt_p_ecran{
height:20px;
width:20px;
background:blue;
float:right;
margin-top:-15px;
margin-right:10px;
}
.tmp{
display:block;
margin-top:-15px;
float:right;
margin-right:15px;
}

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
var inter_video;
var sens_temp=0;
var etat_pause=0
function ajoutevent(e){
	e.preventDefault()    //evite la selection d'element dans le document
	if(document.getElementById('v1').paused){
	etat_pause=1
	}
	document.getElementById('v1').pause();
	clearInterval(inter_video);
	document.documentElement.addEventListener("mousemove", curent, false);
	document.documentElement.addEventListener("mouseup", retireevent, false);
	curent(e);
}
function retireevent(){
	etat_pause==0 ?	document.getElementById('v1').play() : null;
	inter_video=setInterval(posivi,60);
	document.documentElement.removeEventListener("mousemove", curent, false);
	document.documentElement.removeEventListener("mouseup", retireevent, false);
} 
function curent(e){
	var setX =e.clientX;
	var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //distance reel de la barre de defilement
	var valeur=(setX-document.getElementById("defile").offsetLeft-document.getElementById("bar").offsetWidth/2);	//position du curseur de la sourie dans la barre de defilement
	valeur=valeur/distance; //valeur comprise entre 0 et 1
	if(valeur>=1){
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*0.99999; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=distance+"px";
	}
	else if(valeur<0){
		document.getElementById('v1').currentTime=0; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=0+"px";
	}
	else{
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*valeur; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
		}
		tmp();
}
function posivi(){
	var valeur=(document.getElementById('v1').currentTime/document.getElementById('v1').duration).toFixed(6);		//retourne une valeur compris entre 0 et 1
	var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth;		//la distance total a parcourir de la barre
	document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
	tmp();
	if(valeur>=1){
	stop();
	}
}
function tmp(){
	var vivi=document.getElementById('v1');
	var dura=(sens_temp==0 ? vivi.currentTime : vivi.duration-vivi.currentTime);
	var min = Math.floor(dura / 60);
	if (min < 10) {
		min = '0' + min;
	}
	var sec = Math.floor(dura % 60);
	if (sec < 10) {
		sec = '0' + sec;
	}
	document.getElementById('temp').firstChild.nodeValue=min+ ':'+sec;
}
function sens_t(){
	sens_temp=sens_temp==0 ? 1 : 0;
}
function precharge(evt){
	var elem=evt.currentTarget;
	if(evt.lengthComputable && evt.total) {
		var valeur=(evt.loaded/evt.total);	//retourne une valeur compris entre 0 et 1
	}
	else if(elem.buffered && elem.buffered.length>0){
		var charge=elem.buffered.end(0);
		var valeur=(charge/elem.duration).toFixed(2);	//retourne une valeur compris entre 0 et 1
	}
	document.getElementById('precharge').style.width=(valeur*document.getElementById("defile").offsetWidth)+'px';
}
function marchearret(){
	var elem=document.getElementById('v1');
	var lui=document.getElementById('ma');
	if(elem.paused==true){
		elem.play();
		lui.value="pause";
		etat_pause=0;
		inter_video=setInterval(posivi,100);
	}
	else{
		etat_pause=1;
		elem.pause();
		lui.value="play";
		clearInterval(inter_video);
	}
}
function mute(){
	var elem=document.getElementById('v1');
	elem.muted==true ? elem.muted=false : elem.muted=true;
}
function stop(){
	clearInterval(inter_video);
	document.getElementById('v1').pause();
	document.getElementById('v1').currentTime=0;
	document.getElementById("bar").style.marginLeft=0+"px";
	document.getElementById('ma').value="play";
}
function monte_le_son(e){
	var elem=document.getElementById('mt_le_son');
	var setX =e.clientX;
	var taille=elem.offsetWidth
	var position=elem.offsetLeft
	var position=setX-position
	var distance=position/taille
	if(distance>1){
		document.getElementById('v1').volume=1;
		elem.getElementsByTagName('div')[0].style.width=taille+'px';
	}
	else if(distance<0){
		document.getElementById('v1').volume=0;
		elem.getElementsByTagName('div')[0].style.width=0+'px';
	}
	else{
		elem.getElementsByTagName('div')[0].style.width=distance.toFixed(1)*taille+'px'
		document.getElementById('v1').volume=distance.toFixed(1);
		}
}
function event_son(e){
	e.preventDefault();   //evite la selection d'element dans le document
	monte_le_son(e)
	document.documentElement.addEventListener("mousemove", monte_le_son, false);
	document.documentElement.addEventListener("mouseup", no_event_son, false);
}
function no_event_son(){
	document.documentElement.removeEventListener("mousemove", monte_le_son, false);
	document.documentElement.removeEventListener("mouseup", no_event_son, false);
}
function full(){		//fonction pour le plein ecran
		var vivi = document.getElementById("v1");
 var dv = document.getElementById("dvv");
	if (!document.mozFullScreen && !document.webkitFullScreen) {
		if (dv.mozRequestFullScreen) {
			dv.mozRequestFullScreen();
			vivi.style.height='100%'
			vivi.style.width='100%'
		} 
		else {
			dv.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
			vivi.style.height='100%'
			vivi.style.width='100%'
		}
	} 
	else {
		if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
			vivi.style.height='50%'
			vivi.style.width='700px'
		} 
		else {
			document.webkitCancelFullScreen();
			vivi.style.height='50%'
			vivi.style.width='700px'
		}
	}
	document.getElementById('precharge').style.width='100%';
}

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
<body>
<div id='dvv' style='position:relative;width:700px;'>
<video id="v1"
onprogress="precharge(event)"
onclick="marchearret()"
style='cursor:pointer;display:block;width:700px;background:purple'>
<source src='http://d31j8lt3uybmqs.cloudfront.net/sublimevideo/dartmoor.mp4' type="video/mp4">
</video>
<div id='commande'>
<br>
<div style='margin:auto'>
<input type='button' value='play' onclick='marchearret(this)' id='ma'/>
<input type='button' value='mute' onclick='mute(this)'/>
<div id='defile' onmousedown="ajoutevent(event)">
<div id='precharge'></div>
<div id='bar'></div>
</div>
<div class='bt_p_ecran' onclick='full()'></div>
<span class='tmp' id="temp" onclick='sens_t()'>00:00</span>
<div onmousedown='event_son(event)' id='mt_le_son' class='mt_le_son'>
<div class='cur_son'></div>
</div>
</div>
</div>
</div>
</body>

05/06/2015, 09h39
rvm31

Citation:

Envoyé par melka one

il s'agit du lien du premier poste:aie:

IL faut que j'aille consulter alors, le seul lien que je voie est celui de la vidéo qui est une promo pour mozilla diffusée dans un player HTML classqiue
05/06/2015, 11h59
rvm31

Citation:

Envoyé par melka one

si sa peut t'aidé c'est un player que j'ai fait il y a quelles temps que j'ai un peut modifié pour qu'il fonctionne en plein ecran

OK merci, ça va m'aider. J'ai un souci avec le webkit qui ne mets pas la vidéo plein écran, sous firefox ça marche bien.

j'ai revu un peut le code et franchement l'api fullscreen au niveau comptibilité navigateurs c'est la m***** je ne me rappel pas avoir connu pire que sa

dans le code quand la video arrive a la fin il y a trois rectangle qui apparessent

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Video element</title>
 
<style type="text/css">
 
body {
background-color:gray;
}
 
#v1{
 
cursor:pointer;
display:block;
height:100%;
width:100%;
background:purple;
 
}
 
#d_conteneur{
   width:700px;
}
 
 
#d_conteneur:-webkit-full-screen{
   height:100%;
   width:100%;
}
#d_conteneur:-moz-full-screen{
   height:100%;
   width:100%;
}
#d_conteneur:-ms-fullscreen{
   height:100%;
   width:100%;
}
#d_conteneur:fullscreen{
  height:100%;
  width:100%;
}
 
#commande{
 
position:absolute;
bottom:0px;
height:50px;
width:100%;
background:#38383A;
opacity:0;
 
}
 
#commande:hover{
 
opacity:1;
 
}
 
 
#commande input{
width:60px;
height:20px;
margin-left:10px;
color:white;
border:solid;
border-width:1px;
border-color:white;
border-radius:8px;
background-color:#56555A;
float:left;
}
 
 
 
#defile{
 background-color:#6A665B;
 width:100%;
 margin:auto;
margin-bottom:12px;
 
 }
 
#precharge{
background-color:#6A665B;
width:0px;
height:12px;
}
 
#bar{
background-color:#222222;
width:14px;
height:12px;
margin-top:-12px;
}
 
 
.mt_le_son{
 
height:14px;
border-radius:7px;
width:60px;
background:white;
margin-right:30px;
margin-top:0px;
float:right;
cursor:pointer
 
}
 
.cur_son{
 
height:14px;
border-radius:5px;
width:100%;
background:#6A665B;
 
}
 
.bt_p_ecran{
 
height:20px;
width:20px;
background:blue;
float:right;
margin-top:0px;
margin-right:10px;
 
}
 
.tmp{
 
display:block;
margin-top:0px;
float:right;
margin-right:15px;
 
}
 
</style>
 
<script>
 
var inter_video;
var sens_temp=0;
var etat_pause=0
 
function ajoutevent(e){
 
	e.preventDefault()    //evite la selection d'element dans le document
 
	if(document.getElementById('v1').paused){
	etat_pause=1
	}
	document.getElementById('v1').pause();
	clearInterval(inter_video);
 
	document.documentElement.addEventListener("mousemove", curent, false);
	document.documentElement.addEventListener("mouseup", retireevent, false);
 
	curent(e);
}
 
function retireevent(){
 
	etat_pause==0 ?	document.getElementById('v1').play() : null;
 
	inter_video=setInterval(posivi,60);
 
	document.documentElement.removeEventListener("mousemove", curent, false);
	document.documentElement.removeEventListener("mouseup", retireevent, false);
 
} 
 
 
function curent(e){
 
	var setX =e.clientX;
 
	var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //distance reel de la barre de defilement
 
	var valeur=(setX-document.getElementById("defile").offsetLeft-document.getElementById("bar").offsetWidth/2);	//position du curseur de la sourie dans la barre de defilement
 
	valeur=valeur/distance; //valeur comprise entre 0 et 1
 
	if(valeur>=1){
 
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*0.99999; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=distance+"px";
	}
 
	else if(valeur<0){
 
		document.getElementById('v1').currentTime=0; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=0+"px";
	}
 
	else{
 
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*valeur; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
		}
		tmp();
 
 
}
 
function posivi(){
 
	var valeur=(document.getElementById('v1').currentTime/document.getElementById('v1').duration).toFixed(6);		//retourne une valeur compris entre 0 et 1
 
	var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth;		//la distance total a parcourir de la barre
 
	document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
	tmp();
 
 
	if(valeur>=1){
	document.getElementById('v1').pause();
	document.getElementById('lien').style.display='block';
	}
 
}
 
function tmp(){
 
	var vivi=document.getElementById('v1');
 
	var dura=(sens_temp==0 ? vivi.currentTime : vivi.duration-vivi.currentTime);
 
	var min = Math.floor(dura / 60);
	if (min < 10) {
		min = '0' + min;
	}
	var sec = Math.floor(dura % 60);
	if (sec < 10) {
		sec = '0' + sec;
	}
	document.getElementById('temp').firstChild.nodeValue=min+ ':'+sec;
}
 
function sens_t(){
 
	sens_temp=sens_temp==0 ? 1 : 0;
 
}
 
function precharge(evt){
 
	var elem=evt.currentTarget;
 
	if(evt.lengthComputable && evt.total) {
 
		var valeur=(evt.loaded/evt.total);	//retourne une valeur compris entre 0 et 1
	}
	else if(elem.buffered && elem.buffered.length>0){
 
		var charge=elem.buffered.end(0);
		var valeur=(charge/elem.duration).toFixed(2);	//retourne une valeur compris entre 0 et 1
	}
	document.getElementById('precharge').style.width=(valeur*document.getElementById("defile").offsetWidth)+'px';
}
 
function marchearret(){
 
	var elem=document.getElementById('v1');
	var lui=document.getElementById('ma');
 
	if(elem.paused==true){
		elem.play();
		lui.value="pause";
		etat_pause=0;
		inter_video=setInterval(posivi,100);
	}
	else{
		etat_pause=1;
		elem.pause();
		lui.value="play";
		clearInterval(inter_video);
	}
 
	document.getElementById('lien').style.display='none'
}
 
 
function mute(){
 
	var elem=document.getElementById('v1');
	elem.muted==true ? elem.muted=false : elem.muted=true;
}
 
function monte_le_son(e){
 
	var elem=document.getElementById('mt_le_son');
 
	var setX =e.clientX;
 
	var taille=elem.offsetWidth
 
	var position=elem.offsetLeft
 
	var position=setX-position
 
	var distance=position/taille
 
	if(distance>1){
 
		document.getElementById('v1').volume=1;
		elem.getElementsByTagName('div')[0].style.width=taille+'px';
 
	}
	else if(distance<0){
 
		document.getElementById('v1').volume=0;
		elem.getElementsByTagName('div')[0].style.width=0+'px';
	}
 
	else{
 
		elem.getElementsByTagName('div')[0].style.width=distance.toFixed(1)*taille+'px'
		document.getElementById('v1').volume=distance.toFixed(1);
		}
 
}
 
 
function event_son(e){
 
	e.preventDefault();   //evite la selection d'element dans le document
	monte_le_son(e)
	document.documentElement.addEventListener("mousemove", monte_le_son, false);
	document.documentElement.addEventListener("mouseup", no_event_son, false);
 
}
 
function no_event_son(){
 
	document.documentElement.removeEventListener("mousemove", monte_le_son, false);
	document.documentElement.removeEventListener("mouseup", no_event_son, false);
 
}
 
 
 
function full(){		//fonction pour le plein ecran
 
 var dv = document.getElementById("d_conteneur");
 
	if (!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullScreenElement) {
 
		if (dv.mozRequestFullScreen) {
			dv.mozRequestFullScreen();
		} 
 
		else if (dv.webkitRequestFullscreen) {
			dv.webkitRequestFullScreen();
		}
 
		else if (dv.msRequestFullscreen) {
			dv.msRequestFullscreen();
		}
 
		else if (dv.requestFullScreen) {
			dv.requestFullScreen();
		}
	}
 
 
	else {
 
		if (document.webkitFullscreenElement) {
 
			document.webkitCancelFullScreen();
		}
 
		if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
 
		}
 
		if (document.msExitFullscreen) {
			document.msExitFullscreen();
 
		} 
 
		if (document.fullscreenElement) {
			document.cancelFullScreen();
		}
 
		if (document.exitFullscreen) {
			document.exitFullscreen();
 
		} 
 
	}
 
	document.getElementById('precharge').style.width='100%';
 
	}
 
</script>
 
</head>
<body>
 
<div id='d_conteneur' style='position:relative;margin:auto;width:700px;'>
<video id="v1"
onprogress="precharge(event)"
onclick="marchearret()">
 
<source src='http://d31j8lt3uybmqs.cloudfront.net/sublimevideo/dartmoor.mp4' type="video/mp4">
 
</video>
 
<div id='commande'>
 
<div id='defile' onmousedown="ajoutevent(event)">
<div id='precharge'></div>
<div id='bar'></div>
</div>
 
<div style='margin:auto'>
<input type='button' value='play' onclick='marchearret(this)' id='ma'/>
 
<input type='button' value='mute' onclick='mute(this)'/>
 
<div class='bt_p_ecran' onclick='full()'></div>
 
<span class='tmp' id="temp" onclick='sens_t()'>00:00</span>
 
<div onmousedown='event_son(event)' id='mt_le_son' class='mt_le_son'>
<div class='cur_son'></div>
</div>
 
</div>
 
</div>
 
 
<div style='position:absolute;top:38%;left:10%;margin:auto;height:25%;width:80%;display:none;opacity:0.8' id='lien'>
 
<div style='display:inline-block;height:100%;width:20%;background:gray;margin-left:10%;text-align:center;'>video 1</div>
 
<div style='display:inline-block;height:100%;width:20%;background:gray;margin-left:10%;text-align:center'>video 2</div>
 
<div style='display:inline-block;height:100%;width:20%;background:gray;margin-left:10%;text-align:center;'>video 3</div>
 
</div>
 
</div>
</body>
</html>

j'ai rajouter entre autre une pseudo class css qui fait partie de l'api et qui permet de controler simplement le css pour le conteneur et les elements par contre j'ai un bug sur chrome il ne veut pas reconnaitre la largeur on peut forcer l'affichage par l'intermediaire de javascript mais si on sort du plein ecran avec la touche echap l'image reste en grand

12/06/2015, 10h57
rvm31

ton bug vient de la ligne 407, tu forces le contener à un width de 700px, en plein ecran la video reste bloqué dans cette taille.
J'ai supprimé ce width, ça fonctionne sous firefox et les webkit. avec la touch echap la video revient normalement.

J'ai essayé maintenant d'insérer un élément qui garde la même position et la même taille relativement à la vidéo.
j'ai donc fait ça.

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Video element</title>
 
<style type="text/css">
 
body {
background-color:gray;
}
 
#v1{
 
cursor:pointer;
display:block;
height:100%;
width:100%;
background:purple;
 
}
 
    /* make the video stretch to fill the screen in WebKit */
    :-webkit-full-screen #v1 {
      width: 100%;
      height: 100%;
    }
 
#bloc{
 
	position:absolute;
	top:100px;
	left:200px;
	height:100px;
	width:150px;
	background-color: grey;
 
}
#d_conteneur{
   width:700px;
}
 
 
#d_conteneur:-webkit-full-screen{
   height:100%;
   width:100%;
}
#d_conteneur:-moz-full-screen{
   height:100%;
   width:100%;
}
#d_conteneur:-ms-fullscreen{
   height:100%;
   width:100%;
}
#d_conteneur:fullscreen{
  height:100%;
  width:100%;
}
 
#commande{
 
position:absolute;
bottom:0px;
height:50px;
width:100%;
background:#38383A;
opacity:0;
 
}
 
#commande:hover{
 
opacity:1;
 
}
 
 
#commande input{
width:60px;
height:20px;
margin-left:10px;
color:white;
border:solid;
border-width:1px;
border-color:white;
border-radius:8px;
background-color:#56555A;
float:left;
}
 
 
 
#defile{
 background-color:#6A665B;
 width:100%;
 margin:auto;
margin-bottom:12px;
 
 }
 
#precharge{
background-color:#6A665B;
width:0px;
height:12px;
}
 
#bar{
background-color:#222222;
width:14px;
height:12px;
margin-top:-12px;
}
 
 
.mt_le_son{
 
height:14px;
border-radius:7px;
width:60px;
background:white;
margin-right:30px;
margin-top:0px;
float:right;
cursor:pointer
 
}
 
.cur_son{
 
height:14px;
border-radius:5px;
width:100%;
background:#6A665B;
 
}
 
.bt_p_ecran{
 
height:20px;
width:20px;
background:blue;
float:right;
margin-top:0px;
margin-right:10px;
 
}
 
.tmp{
 
display:block;
margin-top:0px;
float:right;
margin-right:15px;
 
}
 
</style>
 
 
 
</head>
<body>
 
<div id='d_conteneur' style='position:relative;margin:auto;'>
<div id="bloc" ></div>
<video id="v1"
onprogress="precharge(event)"
onclick="marchearret()">
 
<source src='A320 neo CFM First flight.mp4' type="video/mp4">
 
</video>
 
<div id='commande'>
 
<div id='defile' onmousedown="ajoutevent(event)">
<div id='precharge'></div>
<div id='bar'></div>
</div>
 
<div style='margin:auto'>
<input type='button' value='play' onclick='marchearret(this)' id='ma'/>
 
<input type='button' value='mute' onclick='mute(this)'/>
 
<div class='bt_p_ecran' onclick='full()'></div>
 
<span class='tmp' id="temp" onclick='sens_t()'>00:00</span>
 
<div onmousedown='event_son(event)' id='mt_le_son' class='mt_le_son'>
<div class='cur_son'></div>
</div>
 
</div>
 
</div>
 
 
<div style='position:absolute;top:38%;left:10%;margin:auto;height:25%;width:80%;display:none;opacity:0.8' id='lien'>
 
<div style='display:inline-block;height:100%;width:20%;background:gray;margin-left:10%;text-align:center;'>video 1</div>
 
<div style='display:inline-block;height:100%;width:20%;background:gray;margin-left:10%;text-align:center'>video 2</div>
 
<div style='display:inline-block;height:100%;width:20%;background:gray;margin-left:10%;text-align:center;'>video 3</div>
 
</div>
 
</div>
<script>
 
var inter_video;
var sens_temp=0;
var etat_pause=0
var hauteur=document.getElementById("d_conteneur").offsetHeight;
var largeur=document.getElementById("d_conteneur").offsetWidth;
var hauteurecran=screen.height;
var largeurecran=screen.width;
var ratiol=largeurecran/largeur;
var ratioh=hauteurecran/hauteur;
 
function ajoutevent(e){
 
	e.preventDefault()    //evite la selection d'element dans le document
 
	if(document.getElementById('v1').paused){
	etat_pause=1
	}
	document.getElementById('v1').pause();
	clearInterval(inter_video);
 
	document.documentElement.addEventListener("mousemove", curent, false);
	document.documentElement.addEventListener("mouseup", retireevent, false);
 
	curent(e);
}
 
function retireevent(){
 
	etat_pause==0 ?	document.getElementById('v1').play() : null;
 
	inter_video=setInterval(posivi,60);
 
	document.documentElement.removeEventListener("mousemove", curent, false);
	document.documentElement.removeEventListener("mouseup", retireevent, false);
 
} 
 
 
function curent(e){
 
	var setX =e.clientX;
 
	var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth; //distance reel de la barre de defilement
 
	var valeur=(setX-document.getElementById("defile").offsetLeft-document.getElementById("bar").offsetWidth/2);	//position du curseur de la sourie dans la barre de defilement
 
	valeur=valeur/distance; //valeur comprise entre 0 et 1
 
	if(valeur>=1){
 
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*0.99999; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=distance+"px";
	}
 
	else if(valeur<0){
 
		document.getElementById('v1').currentTime=0; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=0+"px";
	}
 
	else{
 
		document.getElementById('v1').currentTime=document.getElementById('v1').duration*valeur; //conversion par rapport a la video
		document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
		}
		tmp();
 
 
}
 
function posivi(){
 
	var valeur=(document.getElementById('v1').currentTime/document.getElementById('v1').duration).toFixed(6);		//retourne une valeur compris entre 0 et 1
 
	var distance=document.getElementById("defile").offsetWidth-document.getElementById("bar").offsetWidth;		//la distance total a parcourir de la barre
 
	document.getElementById("bar").style.marginLeft=(distance*valeur)+"px";
	tmp();
 
 
	if(valeur>=1){
	document.getElementById('v1').pause();
	document.getElementById('lien').style.display='block';
	}
 
}
 
function tmp(){
 
	var vivi=document.getElementById('v1');
 
	var dura=(sens_temp==0 ? vivi.currentTime : vivi.duration-vivi.currentTime);
 
	var min = Math.floor(dura / 60);
	if (min < 10) {
		min = '0' + min;
	}
	var sec = Math.floor(dura % 60);
	if (sec < 10) {
		sec = '0' + sec;
	}
	document.getElementById('temp').firstChild.nodeValue=min+ ':'+sec;
}
 
function sens_t(){
 
	sens_temp=sens_temp==0 ? 1 : 0;
 
}
 
function precharge(evt){
 
	var elem=evt.currentTarget;
 
	if(evt.lengthComputable && evt.total) {
 
		var valeur=(evt.loaded/evt.total);	//retourne une valeur compris entre 0 et 1
	}
	else if(elem.buffered && elem.buffered.length>0){
 
		var charge=elem.buffered.end(0);
		var valeur=(charge/elem.duration).toFixed(2);	//retourne une valeur compris entre 0 et 1
	}
	document.getElementById('precharge').style.width=(valeur*document.getElementById("defile").offsetWidth)+'px';
}
 
function marchearret(){
 
	var elem=document.getElementById('v1');
	var lui=document.getElementById('ma');
 
	if(elem.paused==true){
		elem.play();
		lui.value="pause";
		etat_pause=0;
		inter_video=setInterval(posivi,100);
	}
	else{
		etat_pause=1;
		elem.pause();
		lui.value="play";
		clearInterval(inter_video);
	}
 
	document.getElementById('lien').style.display='none'
}
 
 
function mute(){
 
	var elem=document.getElementById('v1');
	elem.muted==true ? elem.muted=false : elem.muted=true;
}
 
function monte_le_son(e){
 
	var elem=document.getElementById('mt_le_son');
 
	var setX =e.clientX;
 
	var taille=elem.offsetWidth
 
	var position=elem.offsetLeft
 
	var position=setX-position
 
	var distance=position/taille
 
	if(distance>1){
 
		document.getElementById('v1').volume=1;
		elem.getElementsByTagName('div')[0].style.width=taille+'px';
 
	}
	else if(distance<0){
 
		document.getElementById('v1').volume=0;
		elem.getElementsByTagName('div')[0].style.width=0+'px';
	}
 
	else{
 
		elem.getElementsByTagName('div')[0].style.width=distance.toFixed(1)*taille+'px'
		document.getElementById('v1').volume=distance.toFixed(1);
		}
 
}
 
 
function event_son(e){
 
	e.preventDefault();   //evite la selection d'element dans le document
	monte_le_son(e)
	document.documentElement.addEventListener("mousemove", monte_le_son, false);
	document.documentElement.addEventListener("mouseup", no_event_son, false);
 
}
 
function no_event_son(){
 
	document.documentElement.removeEventListener("mousemove", monte_le_son, false);
	document.documentElement.removeEventListener("mouseup", no_event_son, false);
 
}
 
 
 
function full(){		//fonction pour le plein ecran
 
 var dv = document.getElementById("d_conteneur");
 
	if (!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullScreenElement) {
 
		if (dv.mozRequestFullScreen) {
			dv.mozRequestFullScreen();
		} 
 
		else if (dv.webkitRequestFullscreen) {
			dv.webkitRequestFullScreen();
			document.getElementById('bloc').style.left=parseInt(document.getElementById('bloc').clientWidth)*ratiol+'px';
			document.getElementById('bloc').style.top=parseInt(document.getElementById('bloc').clientHeight)*ratioh+'px';
			document.getElementById('bloc').style.width=parseInt(document.getElementById('bloc').clientWidth)*ratiol+'px';
			document.getElementById('bloc').style.height=parseInt(document.getElementById('bloc').clientHeight)*ratioh+'px';
			document.getElementById('bloc').style.backgroundColor='blue';
			document.getElementById("bloc").innerHTML = largeurecran;
 
		}
 
		else if (dv.msRequestFullscreen) {
			dv.msRequestFullscreen();
		}
 
		else if (dv.requestFullScreen) {
			dv.requestFullScreen();
		}
	}
 
 
	else {
 
		if (document.webkitFullscreenElement) {
 
			document.webkitCancelFullScreen();
			document.getElementById('bloc').style.left=parseInt(document.getElementById('bloc').clientWidth)/ratiol+'px';
			document.getElementById('bloc').style.top=parseInt(document.getElementById('bloc').clientHeight)/ratioh+'px';
			document.getElementById('bloc').style.width=parseInt(document.getElementById('bloc').clientWidth)/ratiol+'px';
			document.getElementById('bloc').style.height=parseInt(document.getElementById('bloc').clientHeight)/ratioh+'px';
			document.getElementById('bloc').style.backgroundColor='red';
			document.getElementById("bloc").innerHTML = largeur;
		}
 
		if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
 
		}
 
		if (document.msExitFullscreen) {
			document.msExitFullscreen();
 
		} 
 
		if (document.fullscreenElement) {
			document.cancelFullScreen();
		}
 
		if (document.exitFullscreen) {
			document.exitFullscreen();
 
		} 
 
	}
 
	document.getElementById('precharge').style.width='100%';
 
	}
 
 
</script>
</body>
</html>

Mais je suis confronté à deux difficultés la div bloc ne change d'aspect seulement si j'utilise le bouton fulscreen. Si je fait echap pour revenir en normal le changement de taille n'est pas vu.
Et les ratios, entre le fullscreen et la vignette video, ne sont pas exacts.

Vérifier l'état du fullscreen

Bonjour

je souhaite vérifier si un élément est en full screen pour récupérer ses infos de hauteur et largeur, une fois en plein écran.
pour le moment très basiquement j'ai essayé ça, mais rien.

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
 
</head>
<body>
 
<div id='d_conteneur' style='position:relative;margin:auto;'>
<div id="bloc" ></div>
<video id="v1"
onprogress="precharge(event)"
onclick="marchearret()">
 
<source src='myvideo.mp4' type="video/mp4">
 
</video>
<div class='bt_p_ecran' onclick='full()'></div>
<script>
window.addEventListener("click", function(){
if ( document.getElementById("d_conteneur").webkitFullscreenElement)  {
    alert('Your video is playing in fullscreen');
  }
 
});
function full(){		//fonction pour le plein ecran
 
 var dv = document.getElementById("d_conteneur");
 
	if (!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullScreenElement) {
 
		if (dv.mozRequestFullScreen) {
			dv.mozRequestFullScreen();
		} 
 
		else if (dv.webkitRequestFullscreen) {
			dv.webkitRequestFullScreen();
 
		}
 
		else if (dv.msRequestFullscreen) {
			dv.msRequestFullscreen();
		}
 
		else if (dv.requestFullScreen) {
			dv.requestFullScreen();
		}
	}
 
 
	else {
 
		if (document.webkitFullscreenElement) {
			document.webkitCancelFullScreen();
 
		}
 
		if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
 
		}
 
		if (document.msExitFullscreen) {
			document.msExitFullscreen();
 
		} 
 
		if (document.fullscreenElement) {
			document.cancelFullScreen();
		}
 
		if (document.exitFullscreen) {
			document.exitFullscreen();
 
		} 
 
	}
 
	document.getElementById('precharge').style.width='100%';
 
	}
</script>