|
0
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="fr"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8" /> |
|
|
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|
|
6 |
|
|
|
7 |
<title>Festival d’Art Lyrique d'Aix en Provence › Webdoc player</title> |
|
|
8 |
|
|
|
9 |
<link rel="stylesheet" type="text/css" href="css/styles.css" /> |
|
2
|
10 |
|
|
|
11 |
<script type="text/javascript" src="lib/jquery.min.js"></script> |
|
|
12 |
<script type="text/javascript" src="lib/underscore-min.js"></script> |
|
14
|
13 |
<script type="text/javascript" src="js/metadataplayer-core.js"></script> |
|
|
14 |
<script type="text/javascript" src="js/ldt-serializer.js"></script> |
|
2
|
15 |
<script type="text/javascript" src="js/player.js"></script> |
|
14
|
16 |
<script type="text/javascript"> |
|
|
17 |
$(function() { |
|
74
|
18 |
IriSP.player("data/rigoletto.json"); |
|
14
|
19 |
}); |
|
|
20 |
</script> |
|
0
|
21 |
</head> |
|
|
22 |
|
|
|
23 |
<body> |
|
|
24 |
<div class="top-bar"> |
|
|
25 |
<div class="tags"> |
|
74
|
26 |
<div class="tags-title-wrap"> |
|
|
27 |
<h3 class="tags-title">Mots-clés</h3> |
|
|
28 |
</div> |
|
3
|
29 |
<ul class="tags-list"></ul> |
|
0
|
30 |
</div> |
|
18
|
31 |
<span class="topright-buttons"> |
|
|
32 |
<a class="full-screen" href="#"></a> |
|
|
33 |
<a class="about" href="#"></a> |
|
|
34 |
</span> |
|
3
|
35 |
<h1 class="project-title"></h1> |
|
0
|
36 |
</div> |
|
18
|
37 |
<div class="main-video"> |
|
3
|
38 |
<div class="video-container"></div> |
|
5
|
39 |
<ul class="pictolist"></ul> |
|
|
40 |
</div> |
|
|
41 |
<div class="bottom-bar"> |
|
|
42 |
<div class="play-button"> |
|
|
43 |
<a href="#"></a> |
|
|
44 |
</div> |
|
18
|
45 |
<div class="timelines"> |
|
|
46 |
<div class="timeline"> |
|
55
|
47 |
<div class="media-duration">00:00</div> |
|
|
48 |
<div class="elapsed"> |
|
|
49 |
<div class="media-position">00:00</div> |
|
|
50 |
</div> |
|
18
|
51 |
<div class="progress-indicator"></div> |
|
55
|
52 |
<div class="mouse-progress-indicator"> |
|
|
53 |
<div class="time-at-mouse">00:00</div> |
|
|
54 |
</div> |
|
18
|
55 |
</div> |
|
|
56 |
<div class="chapters-bar"> |
|
|
57 |
<ul class="chapters-list"></ul> |
|
|
58 |
<ul class="chips-list"></ul> |
|
|
59 |
<div class="left-hiding-block"></div> |
|
|
60 |
<div class="right-hiding-block"></div> |
|
|
61 |
<div class="progress-indicator"></div> |
|
|
62 |
</div> |
|
5
|
63 |
</div> |
|
|
64 |
<div class="chapter-nav"> |
|
|
65 |
<div class="prev-chapter inactive"></div> |
|
|
66 |
<div class="next-chapter"></div> |
|
|
67 |
</div> |
|
|
68 |
</div> |
|
|
69 |
<div class="annotation-templates"> |
|
2
|
70 |
<div class="annotations"> |
|
|
71 |
|
|
18
|
72 |
<div class="annotation about-box white-annotation"> |
|
|
73 |
<a href="#" class="close-annotation"></a> |
|
|
74 |
<h2 class="annotation-title">À propos des Webdocs</h2> |
|
80
|
75 |
<div class="about-contents"> |
|
|
76 |
<div class="about-text"> |
|
|
77 |
<p>En 2013, le site internet du Festival d’Aix-en-Provence introduit un nouvel outil de vulgarisation et d’introduction au monde de l’opéra sous la forme de documentaires cliquables.</p> |
|
|
78 |
<p>Ce nouveau dispositif, réalisé en partenariat avec l’Institut de Recherche et d’Innovation du Centre Pompidou (IRI), permet d’enrichir une vidéo avec des contenus multimédia (texte, image, audio, vidéo) et de la publier dans un environnement éditorial.</p> |
|
|
79 |
<p>Les éditeurs du Festival alimenteront les documentaires de contenus supplémentaires au fur et à mesure de la vie du Festival (interviews d’artistes, répétitions du chef d’orchestre, extraits d’une représentation).</p> |
|
|
80 |
</div> |
|
|
81 |
<h3 class="about-partners">Partenaires :</h3> |
|
|
82 |
<ul class="about-collaboration"> |
|
|
83 |
<li class="about-partner"> |
|
|
84 |
<img src="img/logo-aix.png" alt="Logo du Festival d’Art Lyrique d’Aix-en-Provence" /> |
|
|
85 |
<h4>Festival d’Art Lyrique d’Aix-en-Provence</h4> |
|
|
86 |
</li> |
|
|
87 |
<li class="about-partner"> |
|
|
88 |
<img src="img/logo-iri.png" alt="Logo de l’Institut de Recherche et d’Innovation" /> |
|
|
89 |
<h4>Institut de Recherche et d’Innovation</h4> |
|
|
90 |
</li> |
|
|
91 |
</ul> |
|
|
92 |
<ul class="about-collaboration"> |
|
|
93 |
<li class="about-partner"> |
|
|
94 |
<h3>Crédits Festival d’Aix :</h3> |
|
|
95 |
<ul> |
|
|
96 |
<li><em>Directrice de la communication :</em> Catherine Roques</li> |
|
|
97 |
<li><em>Conseiller artistique et dramaturge :</em> Alain Perroux</li> |
|
|
98 |
<li><em>Réalisation :</em> Maxime Giacometti, Nicolas Capus (Mars Production)</li> |
|
|
99 |
<li>Contact : <a href="mailto:catherine.roques@festival-aix.com">catherine.roques@festival-aix.com</a></li> |
|
|
100 |
</ul> |
|
|
101 |
</li> |
|
|
102 |
<li class="about-partner"> |
|
|
103 |
<h3>Crédits IRI :</h3> |
|
|
104 |
<ul> |
|
|
105 |
<li><em>Directeur exécutif :</em> Vincent Puig</li> |
|
|
106 |
<li><em>Directeur technique :</em> Yves-Marie Haussonne</li> |
|
|
107 |
<li><em>Responsable projets média :</em> Nicolas Sauret</li> |
|
|
108 |
<li><em>Designer :</em> Camille Baudelaire</li> |
|
|
109 |
<li><em>Développeur interface utilisateur :</em> Raphaël Velt</li> |
|
|
110 |
<li><em>Développeur interface éditeur :</em> Thibaut Cavalié et Anthony Ly</li> |
|
|
111 |
<li><em>Éditeur :</em> Simon Lincelles</li> |
|
|
112 |
<li>Contact : <a href="mailto:nicolas.sauret@iri.centrepompidou.fr">nicolas.sauret@iri.centrepompidou.fr</a></li> |
|
|
113 |
</ul> |
|
|
114 |
</li> |
|
|
115 |
</ul> |
|
|
116 |
</div> |
|
18
|
117 |
</div> |
|
|
118 |
|
|
71
|
119 |
<div class="annotation text-annotation white-annotation"> |
|
9
|
120 |
<a href="#" class="close-annotation"></a> |
|
6
|
121 |
<h2 class="annotation-title"></h2> |
|
|
122 |
<div class="text-contents"></div> |
|
|
123 |
</div> |
|
|
124 |
|
|
71
|
125 |
<div class="annotation link-annotation white-annotation"> |
|
9
|
126 |
<a href="#" class="close-annotation"></a> |
|
6
|
127 |
<h2 class="annotation-title"></h2> |
|
|
128 |
<div class="link-contents"> |
|
|
129 |
|
|
2
|
130 |
</div> |
|
|
131 |
</div> |
|
3
|
132 |
|
|
8
|
133 |
<div class="annotation slideshow-annotation black-annotation"> |
|
9
|
134 |
<a href="#" class="close-annotation"></a> |
|
5
|
135 |
<h2 class="annotation-title"></h2> |
|
8
|
136 |
<div class="annotation-main"> |
|
2
|
137 |
<div class="slideshow-frame"> |
|
3
|
138 |
<img class="slideshow-image" /> |
|
9
|
139 |
<div class="slideshow-arrow slideshow-previous"> |
|
|
140 |
<a href="#"></a> |
|
|
141 |
</div> |
|
|
142 |
<div class="slideshow-arrow slideshow-next"> |
|
|
143 |
<a href="#"></a> |
|
|
144 |
</div> |
|
2
|
145 |
</div> |
|
|
146 |
<div class="slideshow-description"> |
|
|
147 |
</div> |
|
|
148 |
</div> |
|
|
149 |
<div class="slideshow-bottom"> |
|
|
150 |
<div class="slideshow-play-pause"> |
|
|
151 |
<a href="#"></a> |
|
|
152 |
</div> |
|
3
|
153 |
<div class="slideshow-title"></div> |
|
2
|
154 |
</div> |
|
|
155 |
</div> |
|
7
|
156 |
|
|
71
|
157 |
<div class="annotation audio-annotation black-annotation"> |
|
9
|
158 |
<a href="#" class="close-annotation"></a> |
|
7
|
159 |
<h2 class="annotation-title"></h2> |
|
8
|
160 |
<div class="annotation-main"> |
|
|
161 |
<div class="media-frame"></div> |
|
|
162 |
<div class="media-description"></div> |
|
|
163 |
</div> |
|
7
|
164 |
</div> |
|
6
|
165 |
|
|
8
|
166 |
<div class="annotation video-annotation black-annotation"> |
|
9
|
167 |
<a href="#" class="close-annotation"></a> |
|
6
|
168 |
<h2 class="annotation-title"></h2> |
|
8
|
169 |
<div class="annotation-main"> |
|
71
|
170 |
<div class="media-description"> |
|
6
|
171 |
</div> |
|
71
|
172 |
<div class="media-frame"> |
|
6
|
173 |
</div> |
|
|
174 |
</div> |
|
|
175 |
</div> |
|
|
176 |
|
|
2
|
177 |
</div> |
|
0
|
178 |
</div> |
|
|
179 |
</body> |
|
|
180 |
</html> |