1 <!doctype html> |
1 <!DOCTYPE html> |
2 <html> |
2 <html> |
3 <head> |
3 <head> |
4 <title>Preuve de concept Mashup</title> |
4 <title>Preuve de concept Mashup</title> |
5 <link rel="stylesheet" type="text/css" href="style.css" /> |
5 <link rel="stylesheet" type="text/css" href="style.css" /> |
6 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> |
6 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> |
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
8 <script type="text/javascript" src="../metadataplayer/LdtPlayer-core.js" type="text/javascript"></script> |
8 <script |
9 </head> |
9 type="text/javascript" |
10 <body> |
10 src="../metadataplayer/LdtPlayer-core.js" |
11 <div class="main-container"> |
11 type="text/javascript" |
12 <div class="header"> |
12 ></script> |
13 <h1>Hash Cut #</h1> |
13 </head> |
14 </div> |
14 <body> |
15 <div class="steps"> |
15 <div class="main-container"> |
16 <h2>Créer un Hash-cut en 3 étapes :</h2> |
16 <div class="header"> |
17 <div class="steps-frame"> |
17 <h1>Hash Cut #</h1> |
18 <div class="step"> |
18 </div> |
19 <div class="step-icon step-1"></div> |
19 <div class="steps"> |
20 <div class="step-title">S'inscrire et<br />créer un projet</div> |
20 <h2>Créer un Hash-cut en 3 étapes :</h2> |
21 </div> |
21 <div class="steps-frame"> |
22 <div class="step-separator"></div> |
22 <div class="step"> |
23 <div class="step"> |
23 <div class="step-icon step-1"></div> |
24 <div class="step-icon step-2"></div> |
24 <div class="step-title">S'inscrire et<br />créer un projet</div> |
25 <div class="step-title">Découper et<br />Assembler</div> |
25 </div> |
26 </div> |
26 <div class="step-separator"></div> |
27 <div class="step-separator"></div> |
27 <div class="step"> |
28 <div class="step active"> |
28 <div class="step-icon step-2"></div> |
29 <div class="step-icon step-3"></div> |
29 <div class="step-title">Découper et<br />Assembler</div> |
30 <div class="step-title">Partager et<br />regarder !</div> |
30 </div> |
31 </div> |
31 <div class="step-separator"></div> |
32 </div> |
32 <div class="step active"> |
33 </div> |
33 <div class="step-icon step-3"></div> |
34 <div class="colgauche"> |
34 <div class="step-title">Partager et<br />regarder !</div> |
35 <h2>Mon HashCut</h2> |
35 </div> |
36 <hr /> |
|
37 <div id="LdtPlayer"></div> |
|
38 </div> |
|
39 <div class="coldroite"> |
|
40 <div id="mediaList"></div> |
|
41 <h2>Annotations</h2> |
|
42 <hr /> |
|
43 <div id="AnnotationsListContainer"></div> |
|
44 </div> |
|
45 <div class="footer"> |
|
46 <hr /> |
|
47 <p style="text-align: right;">© IRI 2012</p> |
|
48 </div> |
|
49 </div> |
36 </div> |
|
37 </div> |
|
38 <div class="colgauche"> |
|
39 <h2>Mon HashCut</h2> |
|
40 <hr /> |
|
41 <div id="LdtPlayer"></div> |
|
42 </div> |
|
43 <div class="coldroite"> |
|
44 <div id="mediaList"></div> |
|
45 <h2>Annotations</h2> |
|
46 <hr /> |
|
47 <div id="AnnotationsListContainer"></div> |
|
48 </div> |
|
49 <div class="footer"> |
|
50 <hr /> |
|
51 <p style="text-align: right">© IRI 2012</p> |
|
52 </div> |
|
53 </div> |
50 <script type="text/javascript"> |
54 <script type="text/javascript"> |
51 |
55 IriSP.widgetsDir = "../metadataplayer"; |
52 IriSP.libFiles.defaultDir = "../libs/"; |
56 IriSP.language = "fr"; |
53 IriSP.widgetsDir = "../metadataplayer"; |
57 var _metadata = { |
54 IriSP.language = 'fr'; |
58 url: "moon/moon.json", |
55 var _metadata = { |
59 format: "ldt", |
56 url: 'moon/moon.json', |
60 }; |
57 format: 'ldt' |
61 var _canPlayMp4 = document |
58 }; |
62 .createElement("video") |
59 var _canPlayMp4 = document.createElement('video').canPlayType('video/mp4'); |
63 .canPlayType("video/mp4"); |
60 var _config = { |
64 var _config = { |
61 width : 630, |
65 width: 630, |
62 container : 'LdtPlayer', |
66 container: "LdtPlayer", |
63 default_options: { |
67 default_options: { |
64 metadata: _metadata |
68 metadata: _metadata, |
65 }, |
69 }, |
66 css : '../metadataplayer/LdtPlayer-core.css', |
70 css: "../metadataplayer/LdtPlayer-core.css", |
67 widgets: [ |
71 widgets: [ |
68 { |
72 { |
69 type: "HtmlMashupPlayer", |
73 type: "HtmlMashupPlayer", |
70 // split_screen: true, |
74 // split_screen: true, |
71 url_transform: function(_url) { |
75 url_transform: function (_url) { |
72 if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") { |
76 if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") { |
73 return _url.replace(/\.webm$/i,'.mp4'); |
77 return _url.replace(/\.webm$/i, ".mp4"); |
74 } else { |
78 } else { |
75 return _url.replace(/\.mp4$/i,'.webm'); |
79 return _url.replace(/\.mp4$/i, ".webm"); |
76 } |
80 } |
77 |
81 }, |
78 } |
82 }, |
79 }, |
83 { type: "Slider" }, |
80 { type: "Slider" }, |
84 { type: "Controller" }, |
81 { type: "Controller" }, |
85 { |
82 { |
|
83 type: "Segments", |
86 type: "Segments", |
84 annotation_type: false |
87 annotation_type: false, |
85 }, |
88 }, |
86 { |
89 { |
87 type: "Annotation", |
90 type: "Annotation", |
88 annotation_type: false |
91 annotation_type: false, |
89 }, |
92 }, |
90 { |
93 { |
91 type: "MediaList", |
94 type: "MediaList", |
92 container: "mediaList" |
95 container: "mediaList", |
93 }, |
96 }, |
94 { |
97 { |
95 type: "AnnotationsList", |
98 type: "AnnotationsList", |
96 container: "AnnotationsListContainer", |
99 container: "AnnotationsListContainer", |
97 default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png" |
100 default_thumbnail: |
98 }, |
101 "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png", |
99 { type: "Mediafragment" } |
102 }, |
100 ] |
103 { type: "Mediafragment" }, |
101 }; |
104 ], |
|
105 }; |
102 |
106 |
103 _myPlayer = new IriSP.Metadataplayer(_config); |
107 _myPlayer = new IriSP.Metadataplayer(_config); |
104 |
|
105 </script> |
108 </script> |
106 </body> |
109 </body> |
107 </html> |
110 </html> |