test/mashup/player-html.htm
author ymh <ymh.work@gmail.com>
Tue, 22 Oct 2024 09:54:34 +0200
changeset 1080 2b513bcb710a
parent 1076 510fd2a482f4
permissions -rw-r--r--
increment version

<!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" />
    <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 (ne fonctionne pas avec Firefox)</h2>
        <hr />
        <div id="LdtPlayer"></div>
      </div>
      <div class="coldroite">
        <div id="mediaList"></div>
        <h2>Annotations</h2>
        <hr />
        <div id="annotationList"></div>
      </div>
      <div class="footer">
        <hr />
        <p style="text-align: right">&copy; IRI 2012</p>
      </div>
    </div>
    <script type="text/javascript">
      function url_transform_func(_url) {
        //_url = "rtmp://media.iri.centrepompidou.fr/ddc_player/mp4:video/ldtplatform/rsln_clay_shirky";
        // We change the streamer if needed
        var _transformed = _url.replace(
          /^rtmp:\/\/media.iri.centrepompidou.fr\/ddc_player\/(mp4:)?video\//i,
          "http://media.iri.centrepompidou.fr/video/"
        );
        // Get the file name (= remove extension if necessary)
        ext = _transformed
          .substr(_transformed.lastIndexOf(".") + 1)
          .toLowerCase();
        if (
          ext == "mp4" ||
          ext == "f4v" ||
          ext == "flv" ||
          ext == "mov" ||
          ext == "webm" ||
          ext == "mpg4" ||
          ext == "ogv" ||
          ext == "ogg" ||
          ext == "avi"
        ) {
          _transformed = _transformed.substr(0, _transformed.lastIndexOf("."));
        }
        // now that the file name is clean, we add all the extension and mimetype
        srcTypeArray = [
          { src: _transformed + ".mp4", type: "video/mp4" },
          { src: _transformed + ".ogv", type: "video/ogg" },
          { src: _transformed + ".webm", type: "video/webm" },
        ];
        console.log("_transformed = " + srcTypeArray[0]["src"]);
        return srcTypeArray;
      }

      IriSP.widgetsDir = "../metadataplayer";
      IriSP.language = "fr";
      var _metadata = {
        url: "bab_files/mashup.json",
        //    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/b2754186-a0c9-11e0-b8bd-00145ea49a02?callback=?',
        //    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5afd8bbe-9b75-11e1-9e5d-00145ea4a2be?callback=?',
        //	  url: 'http://localhost/pf/ldtplatform/ldt/mashupbytag/?tag=projection',
        //    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/mashupbytag/?tag=mashuptag&callback=?',
        //    url: 'http://localhost/pf/ldtplatform/ldt/mashupbytag/?tag=mashuptag&in=240000&out=1860000',
        format: "ldt",
      };
      var _config = {
        width: 630,
        container: "LdtPlayer",
        default_options: {
          metadata: _metadata,
        },
        css: "../metadataplayer/LdtPlayer-core.css",
        widgets: [
          {
            type: "MashupPlayer",
            url_transform: url_transform_func,
          },
          { type: "Slider" },
          { type: "Controller" },
          {
            type: "Segments",
            annotation_type: false,
          },
          {
            type: "Annotation",
            annotation_type: false,
          },
          {
            type: "Tagger",
            api_endpoint: "../post-test.php",
            tags: [
              "actif",
              "amour",
              "bonheur",
              "captif",
              "charité",
              "désir",
              "dieu",
              "doute",
              "famille",
              "idéal",
              "internationale",
              "passif",
              "patrie",
              "peur",
              "politique",
              "président",
              "spleen",
              "travail",
            ],
          },
          {
            type: "MediaList",
            container: "mediaList",
          },
          {
            type: "AnnotationsList",
            container: "annotationList",
            //ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
            //ajax_granularity: 30000,
            //limit_count: 3
          },
          { type: "Mediafragment" },
        ],
      };

      _myPlayer = new IriSP.Metadataplayer(_config);
    </script>
  </body>
</html>