web/prologue-the-end-etc.html
changeset 92 ab0871ca8819
parent 78 8c3f0b94d056
child 94 873b0e9ff7f6
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/prologue-the-end-etc.html	Mon Jan 21 21:00:24 2013 +0100
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="fr">
+	<head>
+		<meta charset="utf-8">
+		<title>The End - @todo</title>
+		
+		<meta name="description" content="@todo">
+		<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_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>	
+
+		<!-- 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() {
+					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