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>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
flashplayer : '../libs/player.swf',
live: true,
"controlbar.position" : "none",
height: 300,
width: 640,
provider: "rtmp"
},
modules: [
{ type: "MediaFragment",
metadata:{
format:'cinelab',
src:'polemic_fr.json',
type:'json'}
}]
};
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);
var modules = IriSP.configureModules(pop, config.modules);
});
});
</script>
</body>
<div id="PopcornContainer"></div>
</html>