theend: web/prologue-the-end-etc.html@72be7f52c743 (annotated)

37 1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	1	<!DOCTYPE html>
1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	2	<html lang="fr">
1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	3	<head>
103 be6c1f9cc258 resync Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 101 diff changeset	4	<meta charset="UTF-8">
be6c1f9cc258 resync Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 101 diff changeset	5	<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
37 1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	6
105 7a033d177687 resync Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 103 diff changeset	7	<meta name="description" content="MEMO PROD présente THE END, ETC. Une coproduction FRANCE TÉLÉVISIONS - MEMO PROD avec la participation du CENTRE NATIONAL DU CINÉMA ET DE L’IMAGE ANIMÉE. Un projet écrit et réalisé par LAETITIA MASSON">
103 be6c1f9cc258 resync Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 101 diff changeset	8
be6c1f9cc258 resync Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 101 diff changeset	9
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	10	<link rel="icon" href="static/res/img/favicon.ico" />
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	11
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	12	<!-- Mobile Specific Metas -->
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	13	<meta name="viewport" content="user-scalable=no">
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	14	<!--
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	15	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
37 1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	16	-->
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	17
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	18	<!-- Test Smartphone -->
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	19	<script src="static/res/js/incdetectmobile.js"></script>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	20	<script>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	21	if (IsSmartphone()) { location.href = "mindex.html"; }
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	22	</script>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	23	<!-- Metanav FranceTV -->
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	24	<script src="http://static.francetv.fr/js/jquery.metanav-min.js" charset="utf-8"></script>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	25
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	26	<link rel="stylesheet" href="static/res/css/style_1024.css" />
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	27
37 1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	28	</head>
1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	29	<body>
1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	30	<!-- div content - site takes the full height of browser -->
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	31	<div id="content" class="full_hightScreen pointer">
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	32	<!-- div content_top - the elements takes the full height of "content_top" -->
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	33	<div id="content_top" onClick="gotoInterChoice();">
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	34	<div id="topEmpty"></div>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	35	<section id="main">
94 873b0e9ff7f6 update html Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 92 diff changeset	36	<video id="video" autoplay poster="static/res/img/poster_prologue.png">
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	37	<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.mp4" type="video/mp4" />
101 537400166ebe tweak prologue Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 94 diff changeset	38	<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.webm" type="video/webm" />
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	39
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	40	<p>Votre navigateur ne gère pas l'élément video @todo</p>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	41	</video>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	42	</section>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	43	<div id="bottomEmpty"></div>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	44	</div>
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	45	<!-- /div content_top -->
37 1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	46	</div>
1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	47
42 01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	48	<!-- JavaScript -->
01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	49	<script src="static/res/js/jquery-1.8.2.min.js"></script>
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	50	<script src="static/res/js/incresize.js"></script>
42 01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	51	<script>
01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	52	$(function() {
01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	53	$("video").bind("ended", function() {
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	54	gotoInterChoice();
42 01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	55	});
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	56
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	57	var ipad = IsIpad();
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	58	if (ipad) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	59	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>";
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	60	$("#content").append(footerHtmlCode);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	61	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	62
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	63	// Init the resize object
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	64	incResize.init("content", "topEmpty", "video", "bottomEmpty", ipad ? "controlContainer" : null, 40, 1388/586, true);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	65	incResize.resizeElements();
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	66
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	67	if (ipad) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	68	document.onmousemove = function() {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	69	showBarPointerOnAction(4000);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	70	};
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	71
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	72	document.ontouch = function() {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	73	showBarPointerOnAction(8000);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	74	};
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	75
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	76	document.ontouchmove = function(e) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	77	e.preventDefault();
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	78	};
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	79	}
42 01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	80	});
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	81
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	82	var timeoutBarPointer;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	83	var goUp = false;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	84	var canShowCursor = false;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	85
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	86	var showBarPointer = function(state) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	87	if (state) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	88	// Bar
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	89	goUp = true;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	90	$("#controlbarPlay").stop(true);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	91	$("#controlbarPlay").animate({bottom: 0}, 500, function() {goUp = false;})
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	92
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	93	// Pointer
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	94	document.body.style.cursor = "default";
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	95	canShowCursor = false;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	96
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	97	} else {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	98	// Bar
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	99	$("#controlbarPlay").animate({bottom: -70}, 2000, function() {});
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	100
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	101	// Pointer
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	102	document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer";
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	103	setTimeout(function() {canShowCursor = true;}, 300);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	104	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	105	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	106
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	107	var hideBarPointerTimeout = function(time) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	108	timeoutBarPointer = setTimeout(function() {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	109	showBarPointer(false);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	110	}, time);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	111	};
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	112
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	113	var showBarPointerOnAction = function(hideTime) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	114	// Controls
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	115	if (!goUp && canShowCursor) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	116	showBarPointer(true);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	117	if (timeoutBarPointer) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	118	window.clearTimeout(timeoutBarPointer);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	119	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	120	hideBarPointerTimeout(hideTime);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	121	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	122	};
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	123
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	124	var hideBarAtPlay = true;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	125	var playVideo = function() {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	126	var video = $('#video').get(0);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	127	if (video.paused) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	128	video.play();
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	129
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	130	if (hideBarAtPlay) {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	131	// Hide bar and pointer in seconds
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	132	hideBarPointerTimeout(4000);
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	133	hideBarAtPlay = false;
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	134	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	135	} else {
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	136	video.pause();
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	137	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	138	$('#btnPlayPause').css({"background-position" : video.paused ? '-77px 0' : '-77px -17px'});
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	139	}
8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	140	var gotoInterChoice = function() {
94 873b0e9ff7f6 update html Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 92 diff changeset	141	location.href = "instructions-the-end-etc.html";
78 8c3f0b94d056 big commit after problems Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 47 diff changeset	142	}
42 01415303372e écran choix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: 41 diff changeset	143	</script>
37 1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	144	</body>
1f10a9688c1b interchoix Edwin Razafimahatratra <edwin@robotalismsoft.com> parents: diff changeset	145	</html>

author	ymh <ymh.work@gmail.com>
	Thu, 07 Feb 2013 13:52:53 +0100
changeset 120	72be7f52c743
parent 105	7a033d177687
child 124	8d2376eb825c
permissions	-rw-r--r--