--- a/crea/integration/player.html Mon May 28 20:17:21 2012 +0200
+++ b/crea/integration/player.html Thu May 31 14:45:36 2012 +0200
@@ -4,37 +4,8 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Musitag - Futur en Seine 2012</title>
- <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.base.css" />
- <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" href="css/musitag.css" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
- <script type="text/javascript">
- $(function() {
- $('.player-slider').slider({
- range: "min",
- min: 0,
- max: 2000,
- change: function(_evt,_ui) {
- var _x = $(_ui.handle).position().left;
- $(".et-toi").css({
- left: Math.max(-90,Math.min(640, _x - 130)) + "px"
- });
- $(".annotate").css({
- left: Math.max(-90,Math.min(70, _x - 400)) + "px"
- });
- $(".position-bar").css({
- left: _x
- })
- }
- });
- $('.et-toi').click(function() {
- $('.et-toi').hide();
- $('.annotate').show();
- $('.position-bar').removeClass('position-bar-player').addClass('position-bar-annotation');
- });
- });
- </script>
+ <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js"></script>
</head>
<body>
<div class="big-container">
@@ -49,356 +20,69 @@
<img src="media/wari-190.jpg" />
<h2>Au Clair de la Lune</h2>
<h3>Steve Waring</h3>
+ <div id="player-elements"></div>
</div>
</div>
<div class="player-timeline">
- <div class="player-playpause status-play"></div>
- <div class="player-slider"></div>
+ <div id="controller-widget"></div>
+ <div id="slider-widget"></div>
</div>
<div class="player-belowtl">
- <div class="player-annotations">
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-unhappy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-unhappy"></div>
- </div>
- <div class="tag-container-50 player-tag tag-crowded">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag tag-crowded">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag tag-crowded">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag tag-crowded">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </div>
- <div class="player-annotation-column">
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-50 player-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- </div>
- </div>
- <div class="position-bar position-bar-player"></div>
- <div class="et-toi">
- <div class="tag-container-50 et-toi-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green crossfade anim-6s cf-3"></div>
- <div class="tag-color tag-yellow crossfade anim-6s cf-2"></div>
- <div class="tag-color tag-red crossfade anim-6s cf-1"></div>
- <div class="tag-color tag-blue crossfade anim-6s"></div>
- <div class="tag-emoticon tag-laughing crossfade anim-8s"></div>
- <div class="tag-emoticon tag-happy crossfade anim-8s cf-1"></div>
- <div class="tag-emoticon tag-unhappy crossfade anim-8s cf-2"></div>
- <div class="tag-emoticon tag-surprised crossfade anim-8s cf-3"></div>
- </div>
- </div>
- <div class="annotate">
- <div class="annotate-section">
- <h2>1</h2>
- <h3>Choisis<br />une couleur</h3>
- <div class="tag-selector">
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-red"></div>
- </div>
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-yellow"></div>
- </div>
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-green"></div>
- </div>
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color tag-blue"></div>
- </div>
- </div>
- </div>
- <div class="annotate-separator"></div>
- <div class="annotate-section">
- <h2>2</h2>
- <h3>Choisis<br />une émotion</h3>
- <div class="tag-selector">
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-happy"></div>
- </div>
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-unhappy"></div>
- </div>
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-laughing"></div>
- </div>
- <div class="tag-container-80 selector-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color"></div>
- <div class="tag-emoticon tag-surprised"></div>
- </div>
- </div>
- </div>
- <div class="annotate-separator"></div>
- <div class="annotate-section">
- <h2>3</h2>
- <h3>Enregistre<br />ta voix</h3>
- <div class="record"></div>
- </div>
- <div class="annotate-separator"></div>
- <div class="annotate-section">
- <h2>4</h2>
- <h3>Envoie<br />ton Musitag</h3>
- <div class="note-envoi">
- <div class="tag-container-80 envoi-tag">
- <div class="tag-shadow"></div>
- <div class="tag-color"></div>
- <div class="tag-emoticon"></div>
- </div>
- </div>
- </div>
- </div>
+ <div id="player-annotations"></div>
+ <div id="player-andyou"></div>
+ <div id="player-annotator"></div>
</div>
</div>
+ <script type="text/javascript">
+ IriSP.jwplayer_swf_path = "player.swf";
+ IriSP.libFiles.defaultDir = "libs/";
+ IriSP.widgetsDir = "metadataplayer";
+ var _metadata = {
+ url: 'data/au-clair-de-la-lune.json',
+ format: 'ldt'
+ };
+ var _config = {
+ gui: {
+ width : 1,
+ height : 1,
+ container : 'player-elements',
+ default_options: {
+ metadata: _metadata
+ },
+ css : 'metadataplayer/LdtPlayer-core.css',
+ widgets: [
+ {
+ type: "Controller",
+ container: "controller-widget"
+ },
+ {
+ type: "Slider",
+ container: "slider-widget",
+ minimize_timeout: false
+ },
+ {
+ type: "MusitagAnnotations",
+ container: "player-annotations"
+ },
+ {
+ type: "MusitagAndYou",
+ container: "player-andyou"
+ },
+ {
+ type: "MusitagAnnotator",
+ container: "player-annotator"
+ }
+ ]
+ },
+ player:{
+ type: 'jwplayer',
+ height: 1,
+ width: 1
+ }
+ };
+ var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
+ </script>
</body>
</html>