--- a/integration/edition.html	Thu May 16 13:08:20 2013 +0200
+++ b/integration/edition.html	Thu May 16 15:01:43 2013 +0200
@@ -56,7 +56,7 @@
 				</div>
 				<div class="row">
 					<div class="span6">
-						<img src="img/460x345.gif" alt="">
+						<div class="main-video"></div>
 						<div class="timeline-annotation-widget">
 							<div class="annotation" style="left:20%"></div>
 						</div>
@@ -440,7 +440,43 @@
 	<script src="lib/cleditor/jquery.cleditor.min.js"></script>
 	<script src="lib/tag-it/js/tag-it.min.js"></script>
 	<script src="lib/mustache.js"></script>
-
-	<script src="js/edition.js"></script>
+    <script src="lib/underscore-min.js"></script>
+    
+    <script src="js/metadataplayer-core.js"></script>
+    <script src="js/ldt-serializer.js"></script>
+    <script src="js/edition.js"></script>
+    <script>
+    /* Initialisation du metadataplayer avec un projet vide */
+    
+    var myDir = new IriSP.Model.Directory(),
+        myProject = myDir.remoteSource({
+                url: "data/empty-project.json",
+                serializer: IriSP.serializers.ldt
+            });
+    
+    myProject.onLoad(function() {
+        
+        $(".project-title").text(myProject.title);
+        
+        var myMedia = myProject.getCurrentMedia();
+        
+        IriSP.htmlPlayer(
+            myMedia,
+            $(".main-video"),
+            {
+                width: 460,
+                height: 345,
+                controls: true,
+                autostart: true
+            }
+        );
+        
+        myMedia.on("timeupdate", function(t) {
+            var pos = $(".chapitre-cut-wrap").width() * t / myMedia.duration;
+            $(".indicateur-chapter").css("left",pos);
+        });
+        
+    });
+    </script>
 </body>
 </html>
\ No newline at end of file