|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
2 <html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"> |
|
3 <?php $url = "http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/" . $_GET["stream"] ?> |
|
4 <head> |
|
5 <title>Metadataplayer - Demo</title> |
|
6 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'> |
|
7 <link href="style.css" rel="stylesheet" type="text/css"> |
|
8 <script src="LdtPlayer-release.js" type="text/javascript"></script> |
|
9 <script src="jquery.min.js" type="text/javascript"></script> |
|
10 <script src="jquery.tools.min.js" type="text/javascript"></script> |
|
11 <script src="jquery-ui.js" type="text/javascript"></script> |
|
12 |
|
13 </head> |
|
14 |
|
15 <body> |
|
16 <div id="outer_div"> |
|
17 <div id="banner"> |
|
18 <img src="imgs/cinecast.png" style="margin-left: 45px; float: left;"></img> |
|
19 <img src="imgs/iri.png" style="margin-right: 32px; float: right;"></img> |
|
20 <div style="clear: both;"></div> |
|
21 </div> |
|
22 |
|
23 <div id="inner_div"> |
|
24 <div id="intro_title"> |
|
25 Metadataplayer, un outil opensource pour le web |
|
26 </div> |
|
27 |
|
28 <table border=0 id="content"> |
|
29 <tr> |
|
30 <td id="left_pane"></td> |
|
31 <td id="right_pane"> |
|
32 <img src="imgs/technos.png" style="margin-top: 5px; margin-left: -3px;"></img> |
|
33 <div id="caption_text"> |
|
34 Le MetaData player est une librarie opensource conçue pour afficher, produire et partager des métadonnées associées |
|
35 à des segments de contenus audiovisuels diffusés sur le Web. |
|
36 Il tire parti des derniers standards technologiques (html5, W3C mediafragment, popcorn.js de la fondation Mozilla). |
|
37 Cette interface sera prochainement utilisée pour le festival cinecast. |
|
38 <br><br> |
|
39 <b>Application</b> |
|
40 Visualisation et navigation dans les annotations polémiques sur le film "entre les murs" de Laurent Cantet. |
|
41 <br> |
|
42 1500 annotations ont été produites par un groupe d'enseignants, de chercheurs, d'élèves et d'amateurs de cinéma sur |
|
43 la plateforme lignes de temps. |
|
44 </div> |
|
45 </td> |
|
46 </table> |
|
47 |
|
48 <div id="partners"> |
|
49 <h4 style="padding: 5px; margin: 0px;">Partenaires</h4> |
|
50 <img src="imgs/partners.png"></img> |
|
51 </div> |
|
52 |
|
53 <div id="footer"> |
|
54 <a href="http://www.iri.centrepompidou.fr">iri.centrepompidou.fr</a> |
|
55 </div> |
|
56 </div> |
|
57 |
|
58 </div> |
|
59 <div id="closing_div"></div> |
|
60 <script type="text/javascript"> |
|
61 $(document).ready(function() { |
|
62 var config = { |
|
63 gui:{ |
|
64 width:640, |
|
65 height:480, |
|
66 container:'left_pane', |
|
67 css:'LdtPlayer.css', |
|
68 widgets: [ |
|
69 {type: "PolemicWidget", |
|
70 width: 640, /* required for this widget */ |
|
71 height: 50, |
|
72 heightmax: 50, |
|
73 metadata:{ |
|
74 format:'cinelab', |
|
75 src:"<?php echo $url ?>", |
|
76 type:'json'}, |
|
77 |
|
78 requires: [{ |
|
79 type: "TooltipWidget", |
|
80 width: 180, |
|
81 height: 160, |
|
82 metadata : { |
|
83 format:'cinelab', |
|
84 src:"<?php echo $url ?>", |
|
85 type:'empty' |
|
86 } |
|
87 }], |
|
88 }, |
|
89 {type: "SliderWidget", |
|
90 width: 640, |
|
91 metadata:{ |
|
92 format:'cinelab', |
|
93 src:"<?php echo $url ?>", |
|
94 type:'json'} |
|
95 }, |
|
96 {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget. |
|
97 mode: "radio", |
|
98 width: 640, |
|
99 metadata:{ |
|
100 format:'cinelab', |
|
101 src:"<?php echo $url ?>", |
|
102 type:'json'} |
|
103 }, |
|
104 {type: "SegmentsWidget", |
|
105 width: 640, |
|
106 metadata:{ |
|
107 format:'cinelab', |
|
108 src:"<?php echo $url ?>", |
|
109 type:'json'}, |
|
110 requires: [{ |
|
111 type: "TooltipWidget", |
|
112 width: 180, |
|
113 height: 160, |
|
114 metadata : { |
|
115 type:'empty' |
|
116 } |
|
117 }], |
|
118 }, |
|
119 {type: "ArrowWidget", |
|
120 metadata:{ |
|
121 format:'cinelab', |
|
122 src:"<?php echo $url ?>", |
|
123 type:'json'} |
|
124 }, |
|
125 {type: "AnnotationsWidget", |
|
126 metadata:{ |
|
127 format:'cinelab', |
|
128 src:"<?php echo $url ?>", |
|
129 type:'json'} |
|
130 }, |
|
131 {type: "TweetsWidget", |
|
132 metadata:{ |
|
133 format:'cinelab', |
|
134 src:"<?php echo $url ?>", |
|
135 type:'json'} |
|
136 } |
|
137 ] |
|
138 }, |
|
139 player:{ |
|
140 type:'jwplayer', // player type |
|
141 flashplayer: 'player.swf', |
|
142 live: true, |
|
143 "controlbar.position" : "none", |
|
144 height: 300, |
|
145 width: 640, |
|
146 provider: "rtmp" |
|
147 }, |
|
148 modules: [ |
|
149 { type: "MediaFragment", |
|
150 metadata:{ |
|
151 format:'cinelab', |
|
152 src:"<?php echo $url ?>", |
|
153 type:'json'} |
|
154 }] |
|
155 |
|
156 }; |
|
157 |
|
158 IriSP.lib = { |
|
159 jQuery : "jquery.js", |
|
160 jQueryUI : "jquery-ui.js", |
|
161 jQueryToolTip : "jquery.tools.min.js", |
|
162 swfObject : "swfobject.js", |
|
163 cssjQueryUI : "jquery-ui.css", |
|
164 }; |
|
165 |
|
166 IriSP.loadLibs(IriSP.lib, config.gui.css, "<?php echo $url ?>", |
|
167 function() { |
|
168 var layoutManager = new IriSP.LayoutManager(config.gui); |
|
169 var pop = IriSP.configurePopcorn(layoutManager, config.player); |
|
170 |
|
171 var modules = IriSP.configureModules(pop, config.modules); |
|
172 var widgets = IriSP.configureWidgets(pop, layoutManager, config.gui); }); |
|
173 |
|
174 }); |
|
175 </script> |
|
176 |
|
177 </body> |
|
178 </html> |