changed the json file with a less-buggy version.
<!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 = {
metadata:{
format:'cinelab',
src:'test.json',
load:'json'},
gui:{
width:650,
height:64,
mode:'radio',
container:'LdtPlayer',
debug:true,
css:'../../src/css/LdtPlayer.css'},
player:{
type:'jwplayer',
src:'../res/swf/player.swf'}
};
IriSP.loadLibs(IriSP.lib, config.gui.css, function() {});
templ = "width: {{width}}px; height: {{height}}px; margin-bottom: 5px;";
var str = Mustache.to_html(templ, {width: config.gui.width, height: config.gui.height});
// Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div.
IriSP.jQuery("#Ldt-PlaceHolder").attr("style", str);
var pop = Popcorn.youtube("#Ldt-PlaceHolder", "http://www.youtube.com/watch?v=lFtNG1wZ4zU", {controls: 0});
var dt = new IriSP.DataLoader();
var ser = new IriSP.JSONSerializer(dt, "../test.json");
var player = new IriSP.PlayerWidget(pop, config, ser);
var annotationWidget = new IriSP.AnnotationsWidget(pop, config, ser);
var segmentsWidget = new IriSP.SegmentsWidget(pop, config, ser);
ser.sync(function() { player.draw(); annotationWidget.draw(); segmentsWidget.draw();});
});
</script>
<div id='Ldt-Root'>
<div id='Ldt-PlaceHolder'>
</div>
</div>
<!-- END ################ ###################################### -->
</body>
</html>