test/iri-ressources_embed.html
author ymh <ymh.work@gmail.com>
Wed, 04 Sep 2024 17:32:50 +0200
changeset 1072 ac1eacb3aa33
permissions -rw-r--r--
Migrate source and build to vite.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Metadataplayer test with iriressources</title>
    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
-->
    <link href="test.css" rel="stylesheet" type="text/css" />
    <link href="/src/main.module.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <h1>Metadataplayer test with iri ressources</h1>

    <div id="ld-video-embed">
      <div
        id="player_project_330760fc-a31f-11e5-8011-00145ea4a2be_embed"
        style="float: left; width: 550; margin-bottom: 20px; margin-top: 20px"
        class="iri_player_embed"
      ></div>
      <script type="module">
        import LdtPlayerCore from "/src/main.js";
        if (typeof jQuery == "undefined") {
          jQuery = IriSP.jQuery;
        }
        var metadatas = {
          metadata: {
            url: "https://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/1.0/contents/all/84762f8c-a31e-11e5-8011-00145ea4a2be/",
          },
        };
        var metadata_key = "metadata";
        IriSP.libFiles.defaultDir =
          "https://ldt.iri.centrepompidou.fr/static/site/ldt/js/";
        IriSP.libFiles.locations.jwPlayerSWF =
          "https://ldt.iri.centrepompidou.fr/static/site/ldt/swf/player.swf";
        IriSP.libFiles.locations.recordMicSwf =
          "https://ldt.iri.centrepompidou.fr/static/site/ldt/swf/record_mic.swf";
        IriSP.libFiles.locations.zeroClipboardSwf =
          "https://ldt.iri.centrepompidou.fr/static/site/ldt/swf/ZeroClipboard10.swf";
        IriSP.libFiles.locations.cssjQueryUI =
          "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/jq-css/themes/base/jquery-ui.css";
        IriSP.language = "fr-fr";

        IriSP.widgetsDir =
          "https://ldt.iri.centrepompidou.fr/static/site/ldt/metadataplayer";
        var _metadata = {
          url: metadatas[metadata_key].url,
          format: "ldt",
        };
        var _config = {
          width: "550",
          container:
            "player_project_330760fc-a31f-11e5-8011-00145ea4a2be_embed",
          css: "https://ldt.iri.centrepompidou.fr/static/site/ldt/metadataplayer/LdtPlayer-core.css",
          default_options: {
            metadata: _metadata,
          },
          widgets: [
            {
              type: "AutoPlayer",
              streamer: function (_url) {
                var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
                if (_matches) {
                  return _matches[0];
                } else {
                  return _url;
                }
              },
              url_transform: function (url) {
                // Adaptation to jwplayer 6
                if (url.substr(url.length - 4).toLowerCase() === ".flv") {
                  return url.replace(
                    "/ddc_player/video/",
                    "/ddc_player/flv:video/"
                  );
                }
                return url.replace(
                  "/ddc_player/video/",
                  "/ddc_player/mp4:video/"
                );
              },
              height: 300,
              autostart: true,
            },
            {
              type: "Slider",
            },
            {
              type: "Controller",
            },
            {
              type: "Mediafragment",
            },
            {
              type: "Polemic",
              annotation_type: ["tweet"],
              defaultcolor: "#585858",
              foundcolor: "#fc00ff",
              default_version: "3",
              max_elements: "50",
              polemics: {
                1: [
                  { keywords: ["++"], color: "#1D973D", name: "OK" },
                  { keywords: ["--"], color: "#CE0A15", name: "KO" },
                  {
                    keywords: ["==", "http://"],
                    color: "#C5A62D",
                    name: "REF",
                  },
                  { keywords: ["?"], color: "#036AAE", name: "Q" },
                ],
                3: [
                  { keywords: ["++"], color: "#196be6", name: "OK" },
                  { keywords: ["??"], color: "#e6b919", name: "KO" },
                  {
                    keywords: ["**", "http://", "https://"],
                    color: "#e619e6",
                    name: "REF",
                  },
                  { keywords: ["=="], color: "#42e619", name: "Q" },
                ],
                2: [
                  { keywords: ["++"], color: "#1D973D", name: "OK" },
                  { keywords: ["!!"], color: "#CE0A15", name: "KO" },
                  {
                    keywords: ["==", "http://"],
                    color: "#C5A62D",
                    name: "REF",
                  },
                  { keywords: ["?"], color: "#036AAE", name: "Q" },
                ],
              },
            },
            {
              type: "Polemic",
              annotation_type: ["chat"],
              defaultcolor: "#9b8864",
              foundcolor: "#fc00ff",
              default_version: "3",
              max_elements: "100",
              polemics: {
                1: [
                  { keywords: ["++"], color: "#1D973D", name: "OK" },
                  { keywords: ["--"], color: "#CE0A15", name: "KO" },
                  {
                    keywords: ["==", "http://"],
                    color: "#C5A62D",
                    name: "REF",
                  },
                  { keywords: ["?"], color: "#036AAE", name: "Q" },
                ],
                3: [
                  { keywords: ["++"], color: "#196be6", name: "OK" },
                  { keywords: ["??"], color: "#e6b919", name: "KO" },
                  {
                    keywords: ["**", "http://", "https://"],
                    color: "#e619e6",
                    name: "REF",
                  },
                  { keywords: ["=="], color: "#42e619", name: "Q" },
                ],
                2: [
                  { keywords: ["++"], color: "#1D973D", name: "OK" },
                  { keywords: ["!!"], color: "#CE0A15", name: "KO" },
                  {
                    keywords: ["==", "http://"],
                    color: "#C5A62D",
                    name: "REF",
                  },
                  { keywords: ["?"], color: "#036AAE", name: "Q" },
                ],
              },
            },
            {
              type: "Sparkline",
              lineColor: "#7492b4",
              fillColor: "#aeaeb8",
            },
            {
              type: "MultiSegments",
            },
            {
              type: "Annotation",
              start_minimized: true,
              site_name: "Lignes de Temps",
              annotation_type: ["chap", "découpage"],
            },
            {
              type: "Tweet",
              hide_timeout: 5000,
            },
            {
              type: "AnnotationsList",
              ajax_url:
                "https://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/1.0/segments/bytimecode///",
              container: "AnnotationsList_ext",
              ajax_granularity: 300000,
              default_thumbnail:
                "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
              show_audio: true,
              rtmp_streamer:
                "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/",
            },
          ],
        };

        const _myPlayer = new IriSP.Metadataplayer(_config);
      </script>
      <div
        id="AnnotationsList_ext"
        class="ext_widget Ldt-TraceMe Ldt-Widget"
        style="float: left; width: 400px; margin-bottom: 10px; margin-top: 10px"
        widget-type="AnnotationsList"
      ></div>
    </div>
  </body>
</html>