28 format:'cinelab', |
28 format:'cinelab', |
29 src:'test.json', |
29 src:'test.json', |
30 load:'json'}, |
30 load:'json'}, |
31 gui:{ |
31 gui:{ |
32 width:650, |
32 width:650, |
33 height:1, |
33 height:64, |
34 mode:'radio', |
34 mode:'radio', |
35 container:'LdtPlayer', |
35 container:'LdtPlayer', |
36 debug:true, |
36 debug:true, |
37 css:'../../src/css/LdtPlayer.css'}, |
37 css:'../../src/css/LdtPlayer.css'}, |
38 player:{ |
38 player:{ |
39 type:'jwplayer', |
39 type:'jwplayer', |
40 src:'../res/swf/player.swf'} |
40 src:'../res/swf/player.swf'} |
41 }; |
41 }; |
42 |
42 |
43 IriSP.loadLibs(IriSP.lib, config.gui.css, function() {}); |
43 IriSP.loadLibs(IriSP.lib, config.gui.css, function() {}); |
44 var pop = Popcorn.youtube("#LdtPlayer", "http://www.youtube.com/watch?v=lFtNG1wZ4zU", {controls: 0}); |
44 |
|
45 templ = "width: {{width}}px; height: {{height}}px; margin-bottom: 5px;"; |
|
46 var str = Mustache.to_html(templ, {width: config.gui.width, height: config.gui.height}); |
|
47 // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div. |
|
48 IriSP.jQuery("#Ldt-PlaceHolder").attr("style", str); |
|
49 |
|
50 var pop = Popcorn.youtube("#Ldt-PlaceHolder", "http://www.youtube.com/watch?v=lFtNG1wZ4zU", {controls: 0}); |
45 var dt = new IriSP.DataLoader(); |
51 var dt = new IriSP.DataLoader(); |
46 var ser = new IriSP.JSONSerializer(dt, "../test.json"); |
52 var ser = new IriSP.JSONSerializer(dt, "../test.json"); |
47 var player = new IriSP.PlayerWidget(pop, config, ser); |
53 var player = new IriSP.PlayerWidget(pop, config, ser); |
48 var annotationWidget = new IriSP.AnnotationsWidget(pop, config, ser); |
54 var annotationWidget = new IriSP.AnnotationsWidget(pop, config, ser); |
49 ser.sync(function() { player.draw(); annotationWidget.draw(); }); |
55 var segmentsWidget = new IriSP.SegmentsWidget(pop, config, ser); |
|
56 ser.sync(function() { player.draw(); annotationWidget.draw(); segmentsWidget.draw();}); |
50 |
57 |
51 }); |
58 }); |
52 </script> |
59 </script> |
53 |
60 <div id='Ldt-Root'> |
54 |
61 <div id='Ldt-PlaceHolder'> |
|
62 </div> |
|
63 </div> |
55 <!-- END ################ ###################################### --> |
64 <!-- END ################ ###################################### --> |
56 </body> |
65 </body> |
57 </html> |
66 </html> |