test/videojs.html
changeset 1073 687133dc13cf
child 1076 510fd2a482f4
equal deleted inserted replaced
1072:ac1eacb3aa33 1073:687133dc13cf
       
     1 <!DOCTYPE html>
       
     2 <html>
       
     3   <head>
       
     4     <meta
       
     5     http-equiv="Content-type"
       
     6     content="text/html; charset=utf-8"
       
     7   >
       
     8     <title>Metadataplayer test with JwPlayer</title>
       
     9     <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
       
    10 -->
       
    11     <link href='test.css' rel='stylesheet' type='text/css'>
       
    12     <link href="/src/main.module.css" rel="stylesheet" type="text/css">
       
    13   </head>
       
    14   <body>
       
    15     <h1>Metadataplayer test with JwPlayer</h1>
       
    16     <div id="LdtPlayer"></div>
       
    17     <div id="AnnotationsListContainer"></div>
       
    18     <div id="SlideShareContainer"></div>
       
    19     <script type="module">
       
    20       import LdtPlayerCore from "/src/main.js";
       
    21     IriSP.language = 'fr';
       
    22     var _metadata = {
       
    23 //        url: 'json/ldt-jwplayer.json',
       
    24           url: 'https://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/e2f36e5c-8b26-11e2-a28d-00145ea4a2be',
       
    25 //        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
       
    26 //        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
       
    27         format: 'ldt'
       
    28     };
       
    29     var _config = {
       
    30         width : 550,
       
    31         container : 'LdtPlayer',
       
    32         default_options: {
       
    33             metadata: _metadata
       
    34         },
       
    35         widgets: [
       
    36             {
       
    37                 type: "VideojsPlayer",
       
    38                 autostart: true,
       
    39                 url_transform: function(url) {
       
    40                     return url.replace('/ddc_player/video/','/ddc_player/mp4:video/');
       
    41                 }
       
    42             },
       
    43             { type: "Slider" },
       
    44             { type: "Controller" },
       
    45             {
       
    46                 type: "Polemic",
       
    47                 max_elements: 20,
       
    48                 annotation_type: false
       
    49             },
       
    50             { type: "Sparkline" },
       
    51             { type: "MultiSegments" },
       
    52             {
       
    53                 type: "CreateAnnotation",
       
    54                 api_endpoint_template: "post-test.php",
       
    55                 creator_name: "Metadataplayer",
       
    56                 creator_avatar: "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
       
    57                 tag_titles: ["amateur", "digital-humanities"],
       
    58                 //show_title_field: false,
       
    59                 //show_creator_field: false,
       
    60                 show_slice: false
       
    61             },
       
    62             {
       
    63                 type: "Tweet"
       
    64             },
       
    65             {
       
    66                 type: "Tagcloud"
       
    67             },
       
    68             {
       
    69                 type: "AnnotationsList",
       
    70                 container: "AnnotationsListContainer",
       
    71                 default_thumbnail : "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
       
    72                 //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
       
    73                 //ajax_granularity : 300000
       
    74             },
       
    75             // {
       
    76             //     type: "Slideshare",
       
    77             //     container: "SlideShareContainer"
       
    78             // },
       
    79             { type: "Mediafragment"},
       
    80 //            { type: "Trace",
       
    81 //            js_console: true }
       
    82         ]
       
    83     };
       
    84     
       
    85     var _myPlayer = new IriSP.Metadataplayer(_config);
       
    86     </script>
       
    87   </body>
       
    88 </html>