1 <!DOCTYPE html> |
|
2 <html lang="fr"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>The End - @todo</title> |
|
6 |
|
7 <meta name="description" content="@todo"> |
|
8 <link rel="icon" href="static/res/img/favicon.ico" /> |
|
9 |
|
10 <!-- Mobile Specific Metas --> |
|
11 <meta name="viewport" content="user-scalable=no"> |
|
12 <!-- |
|
13 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> |
|
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 |
|
26 </head> |
|
27 <body> |
|
28 <!-- div content - site takes the full height of browser --> |
|
29 <div id="content" class="full_hightScreen pointer"> |
|
30 <!-- div content_top - the elements takes the full height of "content_top" --> |
|
31 <div id="content_top" onClick="gotoInterChoice();"> |
|
32 <div id="topEmpty"></div> |
|
33 <section id="main"> |
|
34 <video id="video" autoplay poster="static/res/img/poster_prologue.jpg"> |
|
35 <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.mp4" type="video/mp4" /> |
|
36 <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.webmsd.webm" type="video/webm" /> |
|
37 |
|
38 <p>Votre navigateur ne gère pas l'élément video @todo</p> |
|
39 </video> |
|
40 </section> |
|
41 <div id="bottomEmpty"></div> |
|
42 </div> |
|
43 <!-- /div content_top --> |
|
44 </div> |
|
45 |
|
46 <!-- JavaScript --> |
|
47 <script src="static/res/js/jquery-1.8.2.min.js"></script> |
|
48 <script src="static/res/js/incresize.js"></script> |
|
49 <script> |
|
50 $(function() { |
|
51 $("video").bind("ended", function() { |
|
52 gotoInterChoice(); |
|
53 }); |
|
54 |
|
55 var ipad = IsIpad(); |
|
56 if (ipad) { |
|
57 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>"; |
|
58 $("#content").append(footerHtmlCode); |
|
59 } |
|
60 |
|
61 // Init the resize object |
|
62 incResize.init("content", "topEmpty", "video", "bottomEmpty", ipad ? "controlContainer" : null, 40, 1388/586, true); |
|
63 incResize.resizeElements(); |
|
64 |
|
65 if (ipad) { |
|
66 document.onmousemove = function() { |
|
67 showBarPointerOnAction(4000); |
|
68 }; |
|
69 |
|
70 document.ontouch = function() { |
|
71 showBarPointerOnAction(8000); |
|
72 }; |
|
73 |
|
74 document.ontouchmove = function(e) { |
|
75 e.preventDefault(); |
|
76 }; |
|
77 } |
|
78 }); |
|
79 |
|
80 var timeoutBarPointer; |
|
81 var goUp = false; |
|
82 var canShowCursor = false; |
|
83 |
|
84 var showBarPointer = function(state) { |
|
85 if (state) { |
|
86 // Bar |
|
87 goUp = true; |
|
88 $("#controlbarPlay").stop(true); |
|
89 $("#controlbarPlay").animate({bottom: 0}, 500, function() {goUp = false;}) |
|
90 |
|
91 // Pointer |
|
92 document.body.style.cursor = "default"; |
|
93 canShowCursor = false; |
|
94 |
|
95 } else { |
|
96 // Bar |
|
97 $("#controlbarPlay").animate({bottom: -70}, 2000, function() {}); |
|
98 |
|
99 // Pointer |
|
100 document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer"; |
|
101 setTimeout(function() {canShowCursor = true;}, 300); |
|
102 } |
|
103 } |
|
104 |
|
105 var hideBarPointerTimeout = function(time) { |
|
106 timeoutBarPointer = setTimeout(function() { |
|
107 showBarPointer(false); |
|
108 }, time); |
|
109 }; |
|
110 |
|
111 var showBarPointerOnAction = function(hideTime) { |
|
112 // Controls |
|
113 if (!goUp && canShowCursor) { |
|
114 showBarPointer(true); |
|
115 if (timeoutBarPointer) { |
|
116 window.clearTimeout(timeoutBarPointer); |
|
117 } |
|
118 hideBarPointerTimeout(hideTime); |
|
119 } |
|
120 }; |
|
121 |
|
122 var hideBarAtPlay = true; |
|
123 var playVideo = function() { |
|
124 var video = $('#video').get(0); |
|
125 if (video.paused) { |
|
126 video.play(); |
|
127 |
|
128 if (hideBarAtPlay) { |
|
129 // Hide bar and pointer in seconds |
|
130 hideBarPointerTimeout(4000); |
|
131 hideBarAtPlay = false; |
|
132 } |
|
133 } else { |
|
134 video.pause(); |
|
135 } |
|
136 $('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'}); |
|
137 } |
|
138 var gotoInterChoice = function() { |
|
139 location.href = "inter_choix.html"; |
|
140 } |
|
141 </script> |
|
142 </body> |
|
143 </html> |
|