--- a/web/prologue.html Tue Jan 15 17:17:14 2013 +0100
+++ b/web/prologue.html Wed Jan 16 08:26:00 2013 +0100
@@ -5,44 +5,139 @@
<title>The End - @todo</title>
<meta name="description" content="@todo">
-
- <!-- Mobile Specific Metas -->
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-
- <link rel="stylesheet" href="static/res/css/style_1024.css" />
- <!-- stylesheet for ipad 3
- <link rel="stylesheet" href="static/res/css/style_2048.css" />
+ <link rel="icon" href="static/res/img/favicon.ico" />
+
+ <!-- Mobile Specific Metas -->
+ <meta name="viewport" content="user-scalable=no">
+ <!--
+ <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
-->
-
+
+ <!-- Test Smartphone -->
+ <script src="static/res/js/incdetectmobile.js"></script>
+ <script>
+ if (IsSmartphone()) { location.href = "mindex.html"; }
+ </script>
+ <!-- Metanav FranceTV -->
+ <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
+
+ <link rel="stylesheet" href="static/res/css/style_1024.css" />
+
</head>
<body>
<!-- div content - site takes the full height of browser -->
- <div id="content" class="full_screen">
-
- <!--this div empty allows the element content_vcentering to be vertically aligned -->
- <div class="strut"></div><!--
- this comment corrects the white-space (display: inline);
- --><section class="fullScreen_vcentering">
- <video class="small_video" autoplay poster="/">
- <!--<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-HD.mp4" type="video/mp4" />-->
- <source src="static/res/video/boucle/FOND1.mp4" type="video/mp4" />
- <source src="/"type="video/webm" />
- <p>Votre navigateur ne gère pas l'élément video @todo</p>
- </video>
- </section>
+ <div id="content" class="full_hightScreen pointer">
+ <!-- div content_top - the elements takes the full height of "content_top" -->
+ <div id="content_top" onClick="gotoInterChoice();">
+ <div id="topEmpty"></div>
+ <section id="main">
+ <video id="video" autoplay poster="static/res/img/poster_prologue.jpg">
+ <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.mp4" type="video/mp4" />
+ <source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.webmsd.webm" type="video/webm" />
+
+ <p>Votre navigateur ne gère pas l'élément video @todo</p>
+ </video>
+ </section>
+ <div id="bottomEmpty"></div>
+ </div>
+ <!-- /div content_top -->
</div>
- <!-- Metanav FranceTV -->
- <script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
<!-- JavaScript -->
<script src="static/res/js/jquery-1.8.2.min.js"></script>
+ <script src="static/res/js/incresize.js"></script>
<script>
$(function() {
$("video").bind("ended", function() {
- location.href = "inter_choix.html";
+ gotoInterChoice();
});
+
+ var ipad = IsIpad();
+ if (ipad) {
+ 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>";
+ $("#content").append(footerHtmlCode);
+ }
+
+ // Init the resize object
+ incResize.init("content", "topEmpty", "video", "bottomEmpty", ipad ? "controlContainer" : null, 40, 1388/586, true);
+ incResize.resizeElements();
+
+ if (ipad) {
+ document.onmousemove = function() {
+ showBarPointerOnAction(4000);
+ };
+
+ document.ontouch = function() {
+ showBarPointerOnAction(8000);
+ };
+
+ document.ontouchmove = function(e) {
+ e.preventDefault();
+ };
+ }
});
+
+ var timeoutBarPointer;
+ var goUp = false;
+ var canShowCursor = false;
+
+ var showBarPointer = function(state) {
+ if (state) {
+ // Bar
+ goUp = true;
+ $("#controlbarPlay").stop(true);
+ $("#controlbarPlay").animate({bottom: 0}, 500, function() {goUp = false;})
+
+ // Pointer
+ document.body.style.cursor = "default";
+ canShowCursor = false;
+
+ } else {
+ // Bar
+ $("#controlbarPlay").animate({bottom: -70}, 2000, function() {});
+
+ // Pointer
+ document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer";
+ setTimeout(function() {canShowCursor = true;}, 300);
+ }
+ }
+
+ var hideBarPointerTimeout = function(time) {
+ timeoutBarPointer = setTimeout(function() {
+ showBarPointer(false);
+ }, time);
+ };
+
+ var showBarPointerOnAction = function(hideTime) {
+ // Controls
+ if (!goUp && canShowCursor) {
+ showBarPointer(true);
+ if (timeoutBarPointer) {
+ window.clearTimeout(timeoutBarPointer);
+ }
+ hideBarPointerTimeout(hideTime);
+ }
+ };
+
+ var hideBarAtPlay = true;
+ var playVideo = function() {
+ var video = $('#video').get(0);
+ if (video.paused) {
+ video.play();
+
+ if (hideBarAtPlay) {
+ // Hide bar and pointer in seconds
+ hideBarPointerTimeout(4000);
+ hideBarAtPlay = false;
+ }
+ } else {
+ video.pause();
+ }
+ $('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'});
+ }
+ var gotoInterChoice = function() {
+ location.href = "inter_choix.html";
+ }
</script>
-
</body>
</html>
\ No newline at end of file