3 <head> |
3 <head> |
4 <meta charset="utf-8"> |
4 <meta charset="utf-8"> |
5 <title>The End niv1- @todo</title> |
5 <title>The End niv1- @todo</title> |
6 |
6 |
7 <meta name="description" content="@todo"> |
7 <meta name="description" content="@todo"> |
|
8 <link rel="icon" href="static/res/img/favicon.ico" /> |
8 |
9 |
9 <!-- Mobile Specific Metas --> |
10 <!-- Mobile Specific Metas --> |
10 <meta name="viewport" content="initial-scale=1.0, width=device-width" /> |
11 <meta name="viewport" content="user-scalable=no"> |
11 |
12 <!-- |
12 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
13 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> |
13 |
14 --> |
|
15 |
|
16 <!-- Test Smartphone --> |
|
17 <script src="static/res/js/incdetectmobile.js"></script> |
|
18 <script> |
|
19 if (IsSmartphone()) { location.href = "mindex.html"; } |
|
20 </script> |
|
21 <!-- Metanav FranceTV --> |
|
22 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
|
23 |
|
24 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
|
25 |
14 </head> |
26 </head> |
15 <body> |
27 <body> |
16 <!-- div content - site takes the full height of browser --> |
28 <!-- div content - site takes the full height of browser --> |
17 <div id="content" class="full_screen"> |
29 <div id="content" class="full_hightScreen"> |
18 |
30 |
19 <!-- div content_top - the elements takes the full height of "content_top" --> |
31 <!-- div content_top - the elements takes the full height of "content_top" --> |
20 <div id="content_top"> |
32 <div id="content_top"> |
21 <div class="strut"></div><!-- |
33 <div id="topEmpty"></div> |
22 this comment corrects the white-space (display: inline); |
34 <section id="main"> |
23 --><section class="fullScreen_vcentering"> |
|
24 <!-- Video --> |
35 <!-- Video --> |
25 <!-- |
36 <div id="video" class="small_video"> |
26 controls attribute - you're going to turn the default controls off via JavaScript |
|
27 poster - sets a default image to display instead of the video's first frame. |
|
28 |
|
29 <video controls poster="/"> |
|
30 <p>Votre navigateur ne gère pas l'élément video @todo</p> |
|
31 </video> |
|
32 --> |
|
33 <div id="video"> |
|
34 </div> |
37 </div> |
35 <!-- /Video --> |
38 <!-- /Video --> |
36 </section> |
39 </section> |
37 |
40 <div id="bottomEmpty"></div> |
38 </div> |
41 </div> |
39 |
42 |
40 <!-- Controls container --> |
43 <!-- Controls container --> |
41 <footer id="controlContainer"> |
44 <footer id="controlContainer"> |
42 <!-- @todo JS the player disappears down the screen after 5 sec --> |
45 <!-- @todo JS the player disappears down the screen after 5 sec --> |
43 <section id="controlbar"> |
46 <section id="controlbar"> |
44 <div class="container_hcentering"> |
47 <div class="container_hcentering"> |
45 <button id="btnInfo" class="btn">INFO</button> |
48 <button id="btnInfo" class="btn" onclick="popup('popUpDiv', 'content')">INFO</button> |
46 |
49 |
47 <button id="btnSDHD" class="btn" onClick="/">SD/HD</button> |
50 <button id="btnSDHD" class="btn" onClick="incPlayer.ctrlHdSd()">SD/HD</button> |
48 |
51 |
49 |
52 |
50 <div id="progressContainer"> |
53 <div id="progressContainer"> |
51 |
54 |
52 <div id="progressBar" class="progress_bar"> |
55 <div id="progressBar" class="progress_bar"> |
53 <span id="progress" class="progress_bar"></span> |
56 <span id="progress" class="progress_bar"></span> |
54 <button id="stateBar" class="txt_hidden" onClick="/"></button> |
57 <button id="stateBar" class="txt_hidden"></button> |
55 </div> |
58 </div> |
56 |
59 |
57 <ul id="progressTime"> |
60 <ul id="progressTime" class="clearfix"> |
58 <!-- class="txt_white" can be used to color current time in white --> |
61 <!-- class="txt_white" can be used to color current time in white --> |
59 <li id="current" class="floatL"></li> |
62 <li id="current" class="floatL">0'00''</li> |
60 <li id="duration" class="floatR">0'00''</li> |
63 <li id="duration" class="floatR">0'00''</li> |
61 </ul> |
64 </ul> |
62 |
65 |
63 </div> |
66 </div> |
64 <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button> |
67 <button id="btnBck" class="btn txt_hidden" onClick="incPlayer.ctrlPrev();">Back</button> |
65 <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing. |
68 <!--I use a single button, which will serve as a play button when the video is paused (or stopped) and a pause button when it's playing. |
66 --> |
69 --> |
67 <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay(this);">Play/Pause</button> |
70 <button id="btnPlayPause" class="btn txt_hidden" title="play" onClick="incPlayer.ctrlPlay();">Play/Pause</button> |
68 |
71 |
69 <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button> |
72 <button id="btnFwd" class="btn txt_hidden" onClick="incPlayer.ctrlNext();">Forward</button> |
70 |
73 |
71 <button id="btnChoice" class="btn">Choice</button> |
74 <!-- il faut faire un lien vers la page transition mais le div the end,etc est visible ??? --> |
|
75 <button id="btnChoice" class="btn" onClick="location.href = 'transition.html';">Choice</button> |
72 </div> |
76 </div> |
73 </section> |
77 </section> |
74 <!-- /Controlbar container --> |
78 <!-- /Controlbar container --> |
75 </footer> |
79 </footer> |
76 </div> |
80 <!-- il faut stopper la video quand on clique sur info ??? --> |
77 <!-- Metanav FranceTV --> |
81 <div id="popUpDiv" style="display:none;"> |
78 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
82 <div id="popUpTitle" class="clearfix"> |
|
83 <h3>THE END, ETC. <span class="text_lowercase">de Laetitia Masson.</span></h3> |
|
84 <a id="popUpClose" class="floatR clearfix" onclick="popup('popUpDiv', 'content')"> |
|
85 <img alt="Fermer" src="static/res/img/popUpClose.png"/> |
|
86 </a> |
|
87 </div> |
|
88 <div id="popUpTxtScroll"> |
|
89 <div class="header_txt marginBottom "> |
|
90 <p>A l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…</p> |
|
91 <p>Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.</p> |
|
92 <p>Dans une expérience de cinéma inédite sur internet, la cinéaste propose à chacun de s’approprier sa matière première. Pas d’histoire prédéfinie, pas de fin imposée.</p> |
|
93 <p>Fin du monde ? Fin d'une ère ? Fin d'un idéal ? Début d'autre chose ? Ceci est votre expérience.</p> |
|
94 </div> |
|
95 <h4>UNE EXPÉRIENCE DE CINÉMA</h4> |
|
96 <p>Trois clics, pour composer « votre » film. Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. »Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. Vous pouvez recommencer à l’infini. Autant de propositions que de spectateurs...</p> |
|
97 <h4>PROLONGER L’EXPÉRIENCE</h4> |
|
98 <p>Dans cet espace, découvrez les versions intégrales de la fiction et des portraits documentaires. Accédez à l’écoute de la bande originale conçue par Jean-Louis Murat.</p> |
|
99 <h4>ETC.</h4> |
|
100 <p>Ce niveau est participatif. Son écran d'accueil, mis à jour en temps réel, présente tous les mots cités par les internautes, comme un écho aux mots proposés par la cinéaste. Au centre, les mots les plus cités, et en périphérie, les commentaires singuliers. Chaque mot donne accès à une liste de séquences permettant une lecture transversale de la matière première de la réalisatrice. A vous de choisir votre porte d'entrée dans ces 4h30 de séquences. A vous de les commenter afin de créer vos propres playlists et d'influer sur l'expérience. En choisissant un mot déjà cité, vous renforcez la présence de ce mot dans l'écran d'accueil.</p> |
|
101 <p>Un espace transitoire vous permet de naviguer entre ces différents niveaux.</p> |
|
102 <br> |
|
103 <p>Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. Préférez les navigateurs Safari ou Chrome.</p> |
|
104 </div> |
|
105 </div> |
|
106 </div> |
|
107 <div id="blanket" style="display:none;"></div> |
|
108 |
79 <!-- JavaScript --> |
109 <!-- JavaScript --> |
80 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
110 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
81 <script src="static/res/js/jquery.cookie.js"></script> |
111 <script src="static/res/js/jquery.cookie.js"></script> |
82 <script src="static/res/js/popcorn-complete.js"></script> |
112 <script src="static/res/js/popcorn-complete.js"></script> |
83 <script src="static/res/js/popcorn.sequence.js"></script> |
113 <script src="static/res/js/popcorn.sequence.js"></script> |
|
114 <script src="static/res/js/incdetectmobile.js"></script> |
84 <script src="static/res/js/incplayer.js"></script> |
115 <script src="static/res/js/incplayer.js"></script> |
85 <script src="static/res/js/incchoice.js"></script> |
116 <script src="static/res/js/incchoice.js"></script> |
|
117 <script src="static/res/js/popUp.js"></script> |
|
118 <script src="static/res/js/incresize.js"></script> |
|
119 <script src="static/res/js/inchidebar.js"></script> |
86 <script> |
120 <script> |
87 $(function() { |
121 $(function() { |
|
122 |
88 // Init the video player |
123 // Init the video player |
89 if (incPlayer.init("video", "btnPlayPause", "current", "duration", "static/res/json/sequences.json", true)) { |
124 if (incPlayer.init("transition.html", "video", "btnPlayPause", "btnSDHD", "current", "duration", "stateBar", "progressBar", "static/res/json/sequences.json")) { |
90 incPlayer.createPopSequence(incChoice.getChoosenWords()); |
125 incPlayer.createPopSequence(incChoice.getChoosenWords(), incChoice.getChosenVideos()); |
91 |
126 |
92 // Add class on all videos |
127 // Add class on all videos |
93 $("#video").children().addClass("small_video"); |
128 $("#video").children().addClass("small_video"); |
94 } |
129 } |
|
130 |
|
131 // Init the resize object |
|
132 incResize.init("content", "topEmpty", "video", "bottomEmpty", "controlContainer", 50, 1353/571, true, [resizePopup]); |
|
133 incResize.resizeElements(); |
|
134 |
|
135 // Manage the hinding of the bar and of the pointer |
|
136 incHideBar.init(); |
95 }); |
137 }); |
|
138 |
|
139 var resizePopup = function() { |
|
140 popupPosition('popUpDiv', 'content'); |
|
141 } |
96 </script> |
142 </script> |
97 </body> |
143 </body> |
98 </html> |
144 </html> |