rollover over the interface buttons now works as expected.
Also changed the width of the buttons to the correct size.
Resized the width and height of the sprites to be the same as the boxes we display
them in.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Metadataplayer - Polemic tweet integration test</title>
</head>
<body>
<div style="width:650px;font-family: 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';">
<h1>MetaDataPlayer</h1>
Polemic tweet integration test - using Popcorn, jwplayer and the <a href="http://polemictweet.com">PolemicTweet</a> widget.<br>
</div>
<!-- START Integration ###################################### -->
<!-- SIMPLE PLAYER EXPERIMENTATION -->
<script type="text/javascript" src="../../build/LdtPlayer-release.js" type="text/javascript"></script>
<script type="text/javascript" src="../../unittests/mockSerializer.js" type="text/javascript"></script>
<script src="../../res/js/jquery.min.js" type="text/javascript"></script>
<script src="../../res/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="../../res/js/jquery-ui.min.js" type="text/javascript"></script>
<div id="video"></div>
<div id="LdtPlayer"></div>
<script type="text/javascript">
$(document).ready(function() {
var config = {
gui:{
width:650,
height:2100,
container:'LdtPlayer',
css:'../../src/css/LdtPlayer.css',
widgets: [
{type: "PolemicWidget",
width: 640, /* required for this widget */
height: 50,
heightmax: 50,
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'},
requires: [{
type: "TooltipWidget",
width: 180,
heigh: 160,
metadata : {
format:'cinelab',
src:'polemic.json',
type:'empty'
}
}],
},
{type: "SliderWidget",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
},
{type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
mode: "radio",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
},
{type: "SegmentsWidget",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'},
requires: [{
type: "TooltipWidget",
width: 180,
heigh: 160,
metadata : {
type:'empty'
}
}],
},
{type: "ArrowWidget",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
},
{type: "AnnotationsWidget",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
},
{type: "TweetsWidget",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
}
]
},
player:{
type:'jwplayer', // player type
container: 'PopcornContainer',
// the rest is player-dependent configuration options.
file : "video/ldtplatform/museologie_inaugurale_20111018_flat.f4v",
streamer: "rtmp://media.iri.centrepompidou.fr/ddc_player/",
flashplayer : '../libs/player.swf',
live: true,
"controlbar.position" : "none",
height: 300,
width: 640,
provider: "rtmp"
}
};
IriSP.loadLibs(IriSP.lib, config.gui.css,
function() {
var layoutManager = new IriSP.LayoutManager(config.gui.container);
var pop = IriSP.configurePopcorn(layoutManager, config.player);
var widgets = IriSP.configureWidgets(pop, layoutManager, config.gui); });
});
</script>
</body>
<div id="PopcornContainer"></div>
</html>