test/mashup/moon.htm
changeset 1076 510fd2a482f4
parent 988 eefd336335f9
--- a/test/mashup/moon.htm	Sat Oct 19 01:34:55 2024 +0200
+++ b/test/mashup/moon.htm	Tue Oct 22 07:03:54 2024 +0200
@@ -1,107 +1,110 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-    <head>
-        <title>Preuve de concept Mashup</title>
-        <link rel="stylesheet" type="text/css" href="style.css" />
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-        <script type="text/javascript" src="../metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
-    </head>
-    <body>
-        <div class="main-container">
-            <div class="header">
-                <h1>Hash Cut #</h1>
-            </div>
-            <div class="steps">
-                <h2>Créer un Hash-cut en 3 étapes&nbsp;:</h2>
-                <div class="steps-frame">
-                    <div class="step">
-                        <div class="step-icon step-1"></div>
-                        <div class="step-title">S'inscrire et<br />créer un projet</div>
-                    </div>
-                    <div class="step-separator"></div>
-                    <div class="step">
-                        <div class="step-icon step-2"></div>
-                        <div class="step-title">Découper et<br />Assembler</div>
-                    </div>
-                    <div class="step-separator"></div>
-                    <div class="step active">
-                        <div class="step-icon step-3"></div>
-                        <div class="step-title">Partager et<br />regarder&nbsp;!</div>
-                    </div>
-                </div>
-            </div>
-            <div class="colgauche">
-                <h2>Mon HashCut</h2>
-                <hr />
-                <div id="LdtPlayer"></div>
-            </div>
-            <div class="coldroite">
-                <div id="mediaList"></div>
-                <h2>Annotations</h2>
-                <hr />
-                <div id="AnnotationsListContainer"></div>
-            </div>
-            <div class="footer">
-                <hr />
-                <p style="text-align: right;">&copy; IRI 2012</p>
-            </div>
+  <head>
+    <title>Preuve de concept Mashup</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <script
+      type="text/javascript"
+      src="../metadataplayer/LdtPlayer-core.js"
+      type="text/javascript"
+    ></script>
+  </head>
+  <body>
+    <div class="main-container">
+      <div class="header">
+        <h1>Hash Cut #</h1>
+      </div>
+      <div class="steps">
+        <h2>Créer un Hash-cut en 3 étapes&nbsp;:</h2>
+        <div class="steps-frame">
+          <div class="step">
+            <div class="step-icon step-1"></div>
+            <div class="step-title">S'inscrire et<br />créer un projet</div>
+          </div>
+          <div class="step-separator"></div>
+          <div class="step">
+            <div class="step-icon step-2"></div>
+            <div class="step-title">Découper et<br />Assembler</div>
+          </div>
+          <div class="step-separator"></div>
+          <div class="step active">
+            <div class="step-icon step-3"></div>
+            <div class="step-title">Partager et<br />regarder&nbsp;!</div>
+          </div>
         </div>
+      </div>
+      <div class="colgauche">
+        <h2>Mon HashCut</h2>
+        <hr />
+        <div id="LdtPlayer"></div>
+      </div>
+      <div class="coldroite">
+        <div id="mediaList"></div>
+        <h2>Annotations</h2>
+        <hr />
+        <div id="AnnotationsListContainer"></div>
+      </div>
+      <div class="footer">
+        <hr />
+        <p style="text-align: right">&copy; IRI 2012</p>
+      </div>
+    </div>
     <script type="text/javascript">
-
-IriSP.libFiles.defaultDir = "../libs/";
-IriSP.widgetsDir = "../metadataplayer";
-IriSP.language = 'fr';
-var _metadata = {
-    url: 'moon/moon.json',
-    format: 'ldt'
-};
-var _canPlayMp4 = document.createElement('video').canPlayType('video/mp4');
-var _config = {
-    width : 630,
-    container : 'LdtPlayer',
-    default_options: {
-        metadata: _metadata
-    },
-    css : '../metadataplayer/LdtPlayer-core.css',
-    widgets: [
-        {
+      IriSP.widgetsDir = "../metadataplayer";
+      IriSP.language = "fr";
+      var _metadata = {
+        url: "moon/moon.json",
+        format: "ldt",
+      };
+      var _canPlayMp4 = document
+        .createElement("video")
+        .canPlayType("video/mp4");
+      var _config = {
+        width: 630,
+        container: "LdtPlayer",
+        default_options: {
+          metadata: _metadata,
+        },
+        css: "../metadataplayer/LdtPlayer-core.css",
+        widgets: [
+          {
             type: "HtmlMashupPlayer",
-//            split_screen: true,
-            url_transform: function(_url) {
-                if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") {
-                    return _url.replace(/\.webm$/i,'.mp4');
-                } else {
-                    return _url.replace(/\.mp4$/i,'.webm');
-                }
-                
-            }
-        },
-        { type: "Slider" },
-        { type: "Controller" },
-        {
+            //            split_screen: true,
+            url_transform: function (_url) {
+              if (_canPlayMp4 == "maybe" || _canPlayMp4 == "probably") {
+                return _url.replace(/\.webm$/i, ".mp4");
+              } else {
+                return _url.replace(/\.mp4$/i, ".webm");
+              }
+            },
+          },
+          { type: "Slider" },
+          { type: "Controller" },
+          {
             type: "Segments",
-            annotation_type: false
-        },
-        {
+            annotation_type: false,
+          },
+          {
             type: "Annotation",
-            annotation_type: false
-        },
-        {
+            annotation_type: false,
+          },
+          {
             type: "MediaList",
-            container: "mediaList"
-        },
-        {
+            container: "mediaList",
+          },
+          {
             type: "AnnotationsList",
             container: "AnnotationsListContainer",
-            default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png"
-        },
-        { type: "Mediafragment" }
-    ]
-};
+            default_thumbnail:
+              "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+          },
+          { type: "Mediafragment" },
+        ],
+      };
 
-_myPlayer = new IriSP.Metadataplayer(_config);
-
+      _myPlayer = new IriSP.Metadataplayer(_config);
     </script>
-    </body>
-</html>
\ No newline at end of file
+  </body>
+</html>