test/videojs-youtube.html
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>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Metadataplayer test with JwPlayer</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 JwPlayer</h1>
    <div id="LdtPlayer"></div>
    <div id="AnnotationsListContainer"></div>
    <div id="SlideShareContainer"></div>
    <script type="module">
      import LdtPlayerCore from "/src/main.js";
      IriSP.language = "fr";
      var _metadata = {
        url: "json/ldt-youtube.json",
        //url: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8f7e4b42-4838-11e2-ac61-00145ea4a2be",
        //        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
        //        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
        format: "ldt",
      };
      var _config = {
        width: 550,
        container: "LdtPlayer",
        default_options: {
          metadata: _metadata,
        },
        widgets: [
          {
            type: "VideojsPlayer",
            autostart: true,
            url_transform: function (url) {
              return url.replace(
                "/ddc_player/video/",
                "/ddc_player/mp4:video/"
              );
            },
          },
          { type: "Slider" },
          { type: "Controller" },
          {
            type: "Polemic",
            max_elements: 20,
            annotation_type: false,
          },
          { type: "Sparkline" },
          { type: "MultiSegments" },
          {
            type: "CreateAnnotation",
            api_endpoint_template: "post-test.php",
            creator_name: "Metadataplayer",
            creator_avatar: "https://via.placeholder.com/48",
            tag_titles: ["amateur", "digital-humanities"],
            //show_title_field: false,
            //show_creator_field: false,
            show_slice: false,
          },
          {
            type: "Tweet",
          },
          {
            type: "Tagcloud",
          },
          {
            type: "AnnotationsList",
            container: "AnnotationsListContainer",
            default_thumbnail:
              "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
            //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
            //ajax_granularity : 300000
          },
          // {
          //     type: "Slideshare",
          //     container: "SlideShareContainer"
          // },
          { type: "Mediafragment" },
          //            { type: "Trace",
          //            js_console: true }
        ],
      };

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