Video interactive plein écran

**rvm31** · 29/05/2015, 14h41

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.

**melka one** · 29/05/2015, 18h49

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 :

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

**rvm31** · 03/06/2015, 21h32

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%.

**melka one** · 03/06/2015, 22h39

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

**rvm31** · 04/06/2015, 16h24

tu as le lien de l'exemple?

**melka one** · 04/06/2015, 19h00

il s'agit du lien du premier poste

**rvm31** · 12/06/2015, 23h29

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 :

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

Video interactive plein écran

JavaScript

Vue hybride

Discussions similaires

Partager

Partager