web/index_ba.html
author veltr
Tue, 05 Feb 2013 18:41:29 +0100
changeset 118 124f7745a3d6
parent 78 8c3f0b94d056
permissions -rw-r--r--
Pause on lightbox and minor corrections

<!DOCTYPE html>
<html lang="fr"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
	<head>
		<meta charset="utf-8">
		<title>The End, etc.</title>
		
		<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.">
		<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" />
		-->
		<!-- Site Optimization for Facebook -->
        <meta property="og:title" content="The End, etc." />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://www.the-end.nouvelles-ecritures.francetv.fr/index.html" />
		<meta property="og:image" content="https://www.the-end.nouvelles-ecritures.francetv.fr/theend_fb.jpg" />
		<meta property="og:site_name" content="The End, etc." />
        <meta property="og:description" content="The End, etc. Mise en ligne le 13 Février 2013"/>

		<!-- 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">
			<div id="topEmpty"></div>
			<section id="main">
				<video id="video" loop autoplay poster="static/res/img/poster_ba1.jpg">
	           		<source src="http://dvvsyrlsr21oz.cloudfront.net/THEEND-BA-0213_new.mp4" type="video/mp4" />
	           		<source src="http://dvvsyrlsr21oz.cloudfront.net/THEEND-BA-0213_new.webm" type="video/webm" />

	  				<p>Votre navigateur ne gère pas l'élément video</p>
				</video>
			</section>
			<div id="bottomEmpty"></div>            
		</div>	

		<!-- JavaScript -->
        <script src="static/res/js/jquery-1.8.2.min.js"></script> 
        <script src="static/res/js/incresize.js"></script>
       <script>        
            $(function() {
				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, 1280/720, 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'});
            }
        </script>                   
	</body>
</html>