|
0
|
1 |
<!doctype html> |
|
|
2 |
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fr"> <![endif]--> |
|
|
3 |
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="fr"> <![endif]--> |
|
|
4 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="fr"> <![endif]--> |
|
|
5 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]--> |
|
|
6 |
<head> |
|
|
7 |
<meta charset="utf-8"> |
|
|
8 |
<title>Digital Studies - Home</title> |
|
|
9 |
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css"> |
|
|
10 |
<link rel="stylesheet" href="./css/ds.css"> |
|
|
11 |
</head> |
|
|
12 |
<body> |
|
|
13 |
<div id="wrapper"> |
|
|
14 |
<header class="navbar navbar-inverse" role="banner"> |
|
|
15 |
<div class="container"> |
|
|
16 |
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> |
|
|
17 |
<ul class="nav navbar-nav"> |
|
|
18 |
<li> |
|
|
19 |
<a href="#"><img src="./img/logodsrose2" alt="Logo Digital Studies" /></a> |
|
|
20 |
</li> |
|
|
21 |
</ul> |
|
|
22 |
<ul class="nav navbar-nav" style="float:right;"> |
|
|
23 |
<li><a href="#">Lien 1</a></li> |
|
|
24 |
<li><a href="#">Lien 2</a></li> |
|
|
25 |
<li><a href="#">Lien 3</a></li> |
|
|
26 |
<li><a href="#">Lien 4</a></li> |
|
|
27 |
</ul> |
|
|
28 |
</nav> |
|
|
29 |
</div> |
|
|
30 |
</header> |
|
|
31 |
<div class="container"> |
|
|
32 |
<div class="row divctn"> |
|
|
33 |
<div class="col-md-4"> |
|
|
34 |
<div class="videotitle"> |
|
|
35 |
<p><a class="videolink" data-videoid="0">Vidéo chapitrée du résumé</a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p> |
|
|
36 |
<div id="abstract" class="collapse"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> |
|
|
37 |
</p> |
|
|
38 |
</div> |
|
|
39 |
<div class="videotitle"> |
|
|
40 |
<p><a class="videolink" data-videoid="1">Chapitre 1 : L'état et le numérique</a></p> |
|
|
41 |
</div> |
|
|
42 |
<div class="videotitle"> |
|
|
43 |
<p><a class="videolink" data-videoid="2">Chapitre 2 : Technologies, savoirs et sociétés</a></p> |
|
|
44 |
</div> |
|
|
45 |
<div class="videotitle"> |
|
|
46 |
<p><a class="videolink" data-videoid="3">Chapitre 3 : Qui pour guider une politique du numérique : le marché ? ou la recherche académique ?</a></p> |
|
|
47 |
</div> |
|
|
48 |
<div class="videotitle"> |
|
|
49 |
<p><a class="videolink" data-videoid="4">Chapitre 4 : La polémique, mère de tous savoirs</a></p> |
|
|
50 |
</div> |
|
|
51 |
<div class="videotitle"> |
|
|
52 |
<p><a class="videolink" data-videoid="5">Chapitre 5 : La catégorisation contributive</a></p> |
|
|
53 |
</div> |
|
|
54 |
<div class="videotitle"> |
|
|
55 |
<p><a class="videolink" data-videoid="6">Chapitre 6 : Sur l'industrie éditoriale numérisée</a></p> |
|
|
56 |
</div> |
|
|
57 |
<div class="videotitle"> |
|
|
58 |
<p><a class="videolink" data-videoid="7">Chapitre 7 : Propositions pour France Université Numérique</a></p> |
|
|
59 |
</div> |
|
|
60 |
<div class="videotitle"> |
|
|
61 |
<p><a class="videolink" data-videoid="full">Vidéo complète chapitrée</a></p> |
|
|
62 |
</div> |
|
|
63 |
</div> |
|
|
64 |
<div class="col-md-8" id="videocontainer">Pour commencer, cliquez sur "Vidéo chapitrée du résumé" ou "Vidéo complète chapitrée"</div> |
|
|
65 |
</div> |
|
|
66 |
</div> |
|
|
67 |
<footer> |
|
|
68 |
<div class="container row"> |
|
|
69 |
<div class="footer-img col-md-6"> |
|
|
70 |
<a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="./img/logo_IRI_footer.png" alt="Logo IRI" /></a> |
|
|
71 |
<a href="http://arsindustrialis.org/" target="_blank"><img src="./img/logoarsindustrialis.jpg" alt="Logo ars" /></a> |
|
|
72 |
<a href="http://pharmakon.fr/" target="_blank"><img src="./img/logo_pharmakon.png" alt="Logo Pharmakon" /></a> |
|
|
73 |
</div> |
|
|
74 |
<div class="col-md-6"> |
|
|
75 |
<div class="text-right" id="copyright-version">©2013 <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a></div> |
|
|
76 |
</div> |
|
|
77 |
</div> |
|
|
78 |
</footer> |
|
|
79 |
</div> |
|
|
80 |
<script type="text/javascript" src="./lib/jquery-1.9.1.js"></script> |
|
|
81 |
<script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script> |
|
|
82 |
<script type="text/javascript"> |
|
|
83 |
|
|
|
84 |
var iframes = { |
|
|
85 |
"0" : "<iframe src='http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/embediframe/?content_id=53574ae4-49e9-11e2-b4ad-00145ea4a2be&project_id=a94ee060-49e9-11e2-b4ad-00145ea4a2be&createannotation=True&tag_titles=&polemic=all&annotations_list=True&autostart=True&annotation=True' width='570' height='1300' seamless='seamless'></iframe>", |
|
|
86 |
"1" : "<p>iframe à venir, vidéo n°1</p>", |
|
|
87 |
"2" : "<p>iframe à venir, vidéo n°2</p>", |
|
|
88 |
"3" : "<p>iframe à venir, vidéo n°3</p>", |
|
|
89 |
"4" : "<p>iframe à venir, vidéo n°4</p>", |
|
|
90 |
"5" : "<p>iframe à venir, vidéo n°5</p>", |
|
|
91 |
"6" : "<p>iframe à venir, vidéo n°6</p>", |
|
|
92 |
"7" : "<p>iframe à venir, vidéo n°7</p>", |
|
|
93 |
"full" : "<iframe src='http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/embediframe/?content_id=62083f72-363c-11e3-8068-00145ea4a2be&project_id=032aebaa-37de-11e3-a863-00145ea4a2be&createannotation=True&tag_titles=&polemic=all&annotations_list=True&autostart=True&annotation=True' width='570' height='1300' seamless='seamless'></iframe>", |
|
|
94 |
}; |
|
|
95 |
|
|
|
96 |
$(function() { |
|
|
97 |
$(".videolink").click(function(e){ |
|
|
98 |
playVideo($(this).attr("data-videoid")); |
|
|
99 |
}); |
|
|
100 |
}); |
|
|
101 |
|
|
|
102 |
function displayIframe(n){ |
|
|
103 |
console.log("displayIframe " + n); |
|
|
104 |
$("#videocontainer").html(iframes[n]); |
|
|
105 |
} |
|
|
106 |
|
|
|
107 |
function playVideo(n){ |
|
|
108 |
if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7") { |
|
|
109 |
$("#videocontainer").html("<p>à venir, vidéo n°" + n + "</p>"); |
|
|
110 |
} |
|
|
111 |
else{ |
|
|
112 |
var s = '' |
|
|
113 |
+ '<p class="text-right"><a href="#" onclick="displayIframe(\'__NUM_JSON__\');return false;">Ajouter votre commentaire sur cette vidéo</a></p>' |
|
|
114 |
+ '<div>' |
|
|
115 |
+ '<div style="float:left; width:550px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be"><div>' |
|
|
116 |
+ '<div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>' |
|
|
117 |
+ '<script type="text/javascript" src="./lib/metadataplayer/LdtPlayer-core.js"><\/script>' |
|
|
118 |
+ '<script type="text/javascript">' |
|
|
119 |
+ 'if (typeof jQuery == "undefined") {' |
|
|
120 |
+ ' jQuery = IriSP.jQuery;' |
|
|
121 |
+ ' }' |
|
|
122 |
+ ' var metadatas = {metadata: {url: "./json/data__NUM_JSON__.json"}};' |
|
|
123 |
+ ' var metadata_key = "metadata";' |
|
|
124 |
+ ' IriSP.libFiles.defaultDir = "./js";' |
|
|
125 |
+ ' IriSP.libFiles.locations.jwPlayerSWF = "./player.swf";' |
|
|
126 |
+ ' IriSP.libFiles.locations.cssjQueryUI = "./css/jquery-ui.css";' |
|
|
127 |
+ ' IriSP.language = "fr-fr";' |
|
|
128 |
+ ' IriSP.widgetsDir = "./lib/metadataplayer";' |
|
|
129 |
+ ' var _metadata = {' |
|
|
130 |
+ ' url: metadatas[metadata_key].url,' |
|
|
131 |
+ ' format: "ldt"' |
|
|
132 |
+ ' };' |
|
|
133 |
+ ' var _config = {' |
|
|
134 |
+ ' width: "550",' |
|
|
135 |
+ ' container: "player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed",' |
|
|
136 |
+ ' css: "./lib/metadataplayer/LdtPlayer-core.css",' |
|
|
137 |
+ ' default_options: {' |
|
|
138 |
+ ' metadata: _metadata' |
|
|
139 |
+ ' },' |
|
|
140 |
+ ' widgets: [' |
|
|
141 |
+ ' {' |
|
|
142 |
+ ' type: "AutoPlayer",' |
|
|
143 |
+ ' height: "300",' |
|
|
144 |
+ ' autostart: true,' |
|
|
145 |
+ ' url_transform: function(url) { if(url.substr(url.length - 4).toLowerCase()==".flv"){ return url.replace("/ddc_player/video/","/ddc_player/flv:video/"); } return url.replace("/ddc_player/video/","/ddc_player/mp4:video/"); }' |
|
|
146 |
+ ' },' |
|
|
147 |
+ ' {' |
|
|
148 |
+ ' type: "Polemic",' |
|
|
149 |
+ ' annotation_type: false,' |
|
|
150 |
+ ' defaultcolor: "#585858",' |
|
|
151 |
+ ' foundcolor: "#fc00ff",' |
|
|
152 |
+ ' polemics : [' |
|
|
153 |
+ ' {' |
|
|
154 |
+ ' "name" : "OK",' |
|
|
155 |
+ ' "keywords" : [ "++" ],' |
|
|
156 |
+ ' "color" : "#1d973d"' |
|
|
157 |
+ ' },' |
|
|
158 |
+ ' {' |
|
|
159 |
+ ' "name" : "KO",' |
|
|
160 |
+ ' "keywords" : [ "--" ],' |
|
|
161 |
+ ' "color" : "#ce0a15"' |
|
|
162 |
+ ' },' |
|
|
163 |
+ ' {' |
|
|
164 |
+ ' "name" : "REF",' |
|
|
165 |
+ ' "keywords" : [ "==", "http://" ],' |
|
|
166 |
+ ' "color" : "#c5a62d" ' |
|
|
167 |
+ ' },' |
|
|
168 |
+ ' {' |
|
|
169 |
+ ' "name" : "Q",' |
|
|
170 |
+ ' "keywords" : [ "?" ],' |
|
|
171 |
+ ' "color" : "#036aae"' |
|
|
172 |
+ ' }' |
|
|
173 |
+ ' ]' |
|
|
174 |
+ ' }' |
|
|
175 |
+ ' ,{' |
|
|
176 |
+ ' type: "Slider"' |
|
|
177 |
+ ' }' |
|
|
178 |
/*+ ' ,{' |
|
|
179 |
+ ' type: "AnnotationsList",' |
|
|
180 |
+ ' container: "AnnotationsList_ext",' |
|
|
181 |
+ ' ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",' |
|
|
182 |
+ ' ajax_granularity : 300000,' |
|
|
183 |
+ ' default_thumbnail : "./css/imgs/video_sequence.png",' |
|
|
184 |
+ ' show_audio: true,' |
|
|
185 |
+ ' rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"' |
|
|
186 |
+ ' }'*/ |
|
|
187 |
+ ' ,{' |
|
|
188 |
+ ' type: "Controller"' |
|
|
189 |
+ ' }' |
|
|
190 |
+ ' ,{' |
|
|
191 |
+ ' type: "Segments",' |
|
|
192 |
+ ' annotation_type: ["chap","découpage"]' |
|
|
193 |
+ ' }' |
|
|
194 |
+ ' ,{' |
|
|
195 |
+ ' type: "Annotation"' |
|
|
196 |
+ ' }' |
|
|
197 |
+ ' ,{' |
|
|
198 |
+ ' type: "Mediafragment"' |
|
|
199 |
+ ' }' |
|
|
200 |
+ ' ]' |
|
|
201 |
+ ' };' |
|
|
202 |
+ ' _myPlayer = new IriSP.Metadataplayer(_config);' |
|
|
203 |
+ ' <\/script>' |
|
|
204 |
+ ' </div>' |
|
|
205 |
+ '</div>' |
|
|
206 |
+ '<div style="float:left; width:400px;" id="AnnotationsList_ext"></div>' |
|
|
207 |
+ '</div>'; |
|
|
208 |
|
|
|
209 |
$("#videocontainer").html(s.replace(/__NUM_JSON__/g, n)); |
|
|
210 |
} |
|
|
211 |
} |
|
|
212 |
</script> |
|
|
213 |
</body> |
|
|
214 |
</html> |