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>
</head>
<body>
<div style="width:650px;font-family: 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';">
<h1>MetaDataPlayer </h1>
Test d'intégration du widget du player avec Popcorn (Youtube).
</div>
<!-- START Integration ###################################### -->
<!-- SIMPLE PLAYER EXPERIMENTATION -->
<script type="text/javascript" src="../../build/LdtPlayer-release.js"></script>
<script src="../../res/js/jquery.min.js"></script>
<script src="../../res/js/jquery.tools.min.js"></script>
<script src="../../res/js/jquery-ui.min.js"></script>
<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: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
mode: "radio",
metadata:{
format:'cinelab',
src:'../test.json',
type:'json'}
},
{type: "SliderWidget",
metadata:{
format:'cinelab',
src:'../test.json',
type:'json'}
},
{type: "SegmentsWidget", // please note that type refers directly to the constructor of the widget.
mode: "radio",
metadata:{
format:'cinelab',
src:'../test.json',
type:'json'}
},
{type: "AnnotationsWidget", // please note that type refers directly to the constructor of the widget.
mode: "radio",
metadata:{
format:'cinelab',
src:'../test.json',
type:'json'}
},
]
},
player:{
type:'youtube', // player type
// the rest is player-dependent configuration options.
video: "http://www.youtube.com/watch?v=rrkrvAUbU9Y",
height: 400,
width: 640,
provider: "rtmp"
}
};
IriSP.loadLibs(IriSP.lib, config.gui.css, '../test.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>
<div id='Ldt-Root'>
<div id='Ldt-PlaceHolder'>
</div>
</div>
<!-- END ################ ###################################### -->
</body>
</html>