<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>THE END, ETC. UNE EXPÉRIENCE WEB DE LAETITIA MASSON</title>
<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">
<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.png">
<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.mp4" type="video/mp4" />
<source src="http://dvvsyrlsr21oz.cloudfront.net/PROLOGUE-SD.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 = "instructions-the-end-etc.html";
}
</script>
</body>
</html>