|
1 <!DOCTYPE html> |
|
2 <html lang="fr" |
|
3 xmlns:og="http://ogp.me/ns#" |
|
4 xmlns:fb="https://www.facebook.com/2008/fbml"> |
|
5 <head> |
|
6 <meta charset="utf-8"> |
|
7 <title>The End, etc.</title> |
|
8 |
|
9 <meta name="description" content="Géraldine Michelon présente The End, etc. Un projet écrit et réalisé par Laetitia Masson. Une coproduction France Télévisions - Memo Prod avec la participation du Centre national du cinéma et de l'image animée, Incandescence et Institut de recherche et de l'innovation du Centre Georges Pompidou, en association avec France Inter."> |
|
10 <link rel="icon" href="static/res/img/favicon.ico" /> |
|
11 |
|
12 <!-- Mobile Specific Metas --> |
|
13 <meta name="viewport" content="user-scalable=no"> |
|
14 <!-- |
|
15 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> |
|
16 --> |
|
17 <!-- Site Optimization for Facebook --> |
|
18 <meta property="og:title" content="The End, etc." /> |
|
19 <meta property="og:type" content="website" /> |
|
20 <meta property="og:url" content="http://www.the-end.nouvelles-ecritures.francetv.fr/index.html" /> |
|
21 <meta property="og:image" content="https://www.the-end.nouvelles-ecritures.francetv.fr/theend_fb.jpg" /> |
|
22 <meta property="og:site_name" content="The End, etc." /> |
|
23 <meta property="og:description" content="The End, etc. Mise en ligne le 13 Février 2013"/> |
|
24 |
|
25 <!-- Test Smartphone --> |
|
26 <script src="static/res/js/incdetectmobile.js"></script> |
|
27 <script> |
|
28 if (IsSmartphone()) { location.href = "mindex.html"; } |
|
29 </script> |
|
30 <!-- Metanav FranceTV --> |
|
31 <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script> |
|
32 |
|
33 <link rel="stylesheet" href="static/res/css/style_1024.css" /> |
|
34 |
|
35 </head> |
|
36 <body> |
|
37 <!-- div content - site takes the full height of browser --> |
|
38 <div id="content" class="full_hightScreen"> |
|
39 <div id="topEmpty"></div> |
|
40 <section id="main"> |
|
41 <video id="video" loop autoplay poster="static/res/img/poster_ba1.jpg"> |
|
42 <source src="http://dvvsyrlsr21oz.cloudfront.net/THEEND-BA-0213_new.mp4" type="video/mp4" /> |
|
43 <source src="http://dvvsyrlsr21oz.cloudfront.net/THEEND-BA-0213_new.webm" type="video/webm" /> |
|
44 |
|
45 <p>Votre navigateur ne gère pas l'élément video</p> |
|
46 </video> |
|
47 </section> |
|
48 <div id="bottomEmpty"></div> |
|
49 </div> |
|
50 |
|
51 <!-- JavaScript --> |
|
52 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
|
53 <script src="static/res/js/incresize.js"></script> |
|
54 <script> |
|
55 $(function() { |
|
56 var ipad = IsIpad(); |
|
57 if (ipad) { |
|
58 var footerHtmlCode = "<footer id='controlContainer'><section id='controlbarPlay'><div class='container_hcentering'><button id='btnPlayPause' class='btn txt_hidden' title='play' onClick='playVideo();'>Play/Pause</button> </div></section></footer>"; |
|
59 $("#content").append(footerHtmlCode); |
|
60 } |
|
61 |
|
62 // Init the resize object |
|
63 incResize.init("content", "topEmpty", "video", "bottomEmpty", ipad ? "controlContainer" : null, 40, 1280/720, true); |
|
64 incResize.resizeElements(); |
|
65 |
|
66 if (ipad) { |
|
67 document.onmousemove = function() { |
|
68 showBarPointerOnAction(4000); |
|
69 }; |
|
70 |
|
71 document.ontouch = function() { |
|
72 showBarPointerOnAction(8000); |
|
73 }; |
|
74 |
|
75 document.ontouchmove = function(e) { |
|
76 e.preventDefault(); |
|
77 }; |
|
78 } |
|
79 }); |
|
80 |
|
81 var timeoutBarPointer; |
|
82 var goUp = false; |
|
83 var canShowCursor = false; |
|
84 |
|
85 var showBarPointer = function(state) { |
|
86 if (state) { |
|
87 // Bar |
|
88 goUp = true; |
|
89 $("#controlbarPlay").stop(true); |
|
90 $("#controlbarPlay").animate({bottom: 0}, 500, function() {goUp = false;}) |
|
91 |
|
92 // Pointer |
|
93 document.body.style.cursor = "default"; |
|
94 canShowCursor = false; |
|
95 |
|
96 } else { |
|
97 // Bar |
|
98 $("#controlbarPlay").animate({bottom: -70}, 2000, function() {}); |
|
99 |
|
100 // Pointer |
|
101 document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer"; |
|
102 setTimeout(function() {canShowCursor = true;}, 300); |
|
103 } |
|
104 } |
|
105 |
|
106 var hideBarPointerTimeout = function(time) { |
|
107 timeoutBarPointer = setTimeout(function() { |
|
108 showBarPointer(false); |
|
109 }, time); |
|
110 }; |
|
111 |
|
112 var showBarPointerOnAction = function(hideTime) { |
|
113 // Controls |
|
114 if (!goUp && canShowCursor) { |
|
115 showBarPointer(true); |
|
116 if (timeoutBarPointer) { |
|
117 window.clearTimeout(timeoutBarPointer); |
|
118 } |
|
119 hideBarPointerTimeout(hideTime); |
|
120 } |
|
121 }; |
|
122 |
|
123 var hideBarAtPlay = true; |
|
124 var playVideo = function() { |
|
125 var video = $('#video').get(0); |
|
126 if (video.paused) { |
|
127 video.play(); |
|
128 |
|
129 if (hideBarAtPlay) { |
|
130 // Hide bar and pointer in seconds |
|
131 hideBarPointerTimeout(4000); |
|
132 hideBarAtPlay = false; |
|
133 } |
|
134 } else { |
|
135 video.pause(); |
|
136 } |
|
137 $('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'}); |
|
138 } |
|
139 </script> |
|
140 </body> |
|
141 </html> |