using jquery ui draggable changes the state of an element from absolute to relative
positioning, which breaks the way our seek button expands itself, so we need to
force absolute positioning, quite uglily, using jquery.
<!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>Test d'intégration du widget Polemic Tweet</title>
</head>
<body>
<div style="width:650px;font-family: 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';">
<h1>MetaDataPlayer </h1>
Test d'intégration du widget polemic tweet.
</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_fr.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:'youtube', // player type
// the rest is player-dependent configuration options.
video: "http://www.youtube.com/watch?v=rrkrvAUbU9Y",
height: 300,
width: 640,
}
};
IriSP.loadLibs(IriSP.lib, config.gui.css, "polemic_fr.json",
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>