web/index.html
changeset 3 cca75fee01f1
parent 2 128bc58ed2e8
child 4 678402f3f5cd
equal deleted inserted replaced
2:128bc58ed2e8 3:cca75fee01f1
    31 	<div class="container">
    31 	<div class="container">
    32     <div class="row divctn">
    32     <div class="row divctn">
    33       <div class="col-md-4">
    33       <div class="col-md-4">
    34         <div class="videotitle">
    34         <div class="videotitle">
    35           <p><a class="videolink" data-videoid="0">Vidéo chapitrée du résumé</a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p>
    35           <p><a class="videolink" data-videoid="0">Vidéo chapitrée du résumé</a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p>
    36           <div id="abstract" class="collapse"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
    36           <div id="abstract" class="collapse">
    37           </p>
    37             <p>Avec l’apparition du web, c’est la nature même des savoirs sous toutes leurs formes qui a changé tandis que l’écriture réticulaire devenait accessible aux publics les plus divers. Ceux-ci ont redéfini les conditions de la parité et de ce fait l’université est entrée dans un nouvel âge. C’est ce fait majeur, massif et à bien des égards stupéfiant qui requiert le développement des digital studies prôné par la ministre de l’enseignement supérieur et de la recherche.</p>
    38         </div>
    38             <p>L’enjeu majeur représenté par les enseignements numériques vient rationnellement après celui de la recherche et des études numériques. Il s’agit d’impulser une dynamique qui repense les rapports des savoirs à leurs supports (dont les MOOCs) avec les universités et les institutions académiques, et qui, par la recherche, redéfinisse leur rôle dans ce nouveau contexte.</p>
    39         <div class="videotitle">
    39             <p>La technologie du vidéolivre est un support nouveau pour un réseau de lecteurs constituant une communauté plurielle d’interprétations. Ce n’est là qu’un exemple de ces nouveaux dispositifs du débat public auxquels il est fondamental d’initier et d’associer le plus tôt possible les étudiants.</p>
    40           <p>Chapitre 1&nbsp;: L'état et le numérique<br/><a class="videolink" data-videoid="1">vidéo complète</a> ou <a class="videolink" data-videoid="1r">résumé</a></p>
    40           </div>
    41         </div>
    41         </div>
    42         <div class="videotitle">
    42         <div class="videotitle">
    43           <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink" data-videoid="2">vidéo complète</a> ou <a class="videolink" data-videoid="2r">résumé</a></p>
    43           <p>Chapitre 1&nbsp;: L'état et le numérique<br/><a class="videolink" data-videoid="1r">résumé</a> ou <a class="videolink" data-videoid="1">vidéo complète</a></p>
    44         </div>
    44         </div>
    45         <div class="videotitle">
    45         <div class="videotitle">
    46           <p>Chapitre 3&nbsp;: Qui pour guider une politique du numérique&nbsp;: le marché ? ou la recherche académique ?<br/><a class="videolink" data-videoid="3">vidéo complète</a> ou <a class="videolink" data-videoid="3r">résumé</a></p>
    46           <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink" data-videoid="2r">résumé</a> ou <a class="videolink" data-videoid="2">vidéo complète</a></p>
    47         </div>
    47         </div>
    48         <div class="videotitle">
    48         <div class="videotitle">
    49           <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink" data-videoid="4">vidéo complète</a> ou <a class="videolink" data-videoid="4r">résumé</a></p>
    49           <p>Chapitre 3&nbsp;: Qui pour guider une politique du numérique&nbsp;: le marché ? ou la recherche académique ?<br/><a class="videolink" data-videoid="3r">résumé</a> ou <a class="videolink" data-videoid="3">vidéo complète</a></p>
    50         </div>
    50         </div>
    51         <div class="videotitle">
    51         <div class="videotitle">
    52           <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink" data-videoid="5">vidéo complète</a> ou <a class="videolink" data-videoid="5r">résumé</a></p>
    52           <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink" data-videoid="4r">résumé</a> ou <a class="videolink" data-videoid="4">vidéo complète</a></p>
    53         </div>
    53         </div>
    54         <div class="videotitle">
    54   vidéo complète<div class="videotitle">
    55           <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink" data-videoid="6">vidéo complète</a> ou <a class="videolink" data-videoid="6r">résumé</a></p>
    55           <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink" data-videoid="5r">résumé</a> ou <a class="videolink" data-videoid="5">vidéo complète</a></p>
    56         </div>
    56         </div>
    57         <div class="videotitle">
    57         <div class="videotitle">
    58           <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink" data-videoid="7">vidéo complète</a> ou <a class="videolink" data-videoid="7r">résumé</a></p>
    58           <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink" data-videoid="6r">résumé</a> ou <a class="videolink" data-videoid="6">vidéo complète</a></p>
       
    59         </div>
       
    60         <div class="videotitle">
       
    61           <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink" data-videoid="7r">résumé</a> ou <a class="videolink" data-videoid="7">vidéo complète</a></p>
    59         </div>
    62         </div>
    60         <div class="videotitle">
    63         <div class="videotitle">
    61           <p><a class="videolink" data-videoid="full">Vidéo complète chapitrée</a></p>
    64           <p><a class="videolink" data-videoid="full">Vidéo complète chapitrée</a></p>
    62         </div>
    65         </div>
    63       </div>
    66       </div>
    95 
    98 
    96     $(function() {
    99     $(function() {
    97       $(".videolink").click(function(e){
   100       $(".videolink").click(function(e){
    98         playVideo($(this).attr("data-videoid"));
   101         playVideo($(this).attr("data-videoid"));
    99       });
   102       });
       
   103       // load first video
       
   104       playVideo("full");
   100     });
   105     });
   101 
   106 
   102     function displayIframe(n){
   107     function displayIframe(n){
   103       $("#videocontainer").html(iframes[n]);
   108       $("#videocontainer").html(iframes[n]);
   104     }
   109     }
   107       if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7" || n=="1r" || n=="2r" || n=="3r" || n=="4r" || n=="5r" || n=="6r" || n=="7r"){
   112       if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7" || n=="1r" || n=="2r" || n=="3r" || n=="4r" || n=="5r" || n=="6r" || n=="7r"){
   108         $("#videocontainer").html("<p>à venir, vidéo n°" + n + "</p>");
   113         $("#videocontainer").html("<p>à venir, vidéo n°" + n + "</p>");
   109       }
   114       }
   110       else{
   115       else{
   111         var s = ''
   116         var s = ''
   112  + '<p class="text-right"><a href="#" onclick="displayIframe(\'__NUM_JSON__\');return false;">Ajouter votre commentaire sur cette vidéo</a></p>'
       
   113  + '<div>'
   117  + '<div>'
   114  + '<div style="float:left; width:550px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be"><div>'
   118  + '  <div style="float:left; width:550px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be">'
   115  + '<div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>'
   119  + '    <div>'
   116  + '<script type="text/javascript" src="./lib/metadataplayer/LdtPlayer-core.js"><\/script>'
   120  + '      <div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>'
   117  + '<script type="text/javascript">'
   121  + '      <script type="text/javascript" src="./lib/metadataplayer/LdtPlayer-core.js"><\/script>'
       
   122  + '      <script type="text/javascript">'
   118  + 'if (typeof jQuery == "undefined") {'
   123  + 'if (typeof jQuery == "undefined") {'
   119  + '    jQuery = IriSP.jQuery;'
   124  + '    jQuery = IriSP.jQuery;'
   120  + '   }'
   125  + '   }'
   121  + '    var metadatas = {metadata: {url: "./json/data__NUM_JSON__.json"}};'
   126  + '    var metadatas = {metadata: {url: "./json/data__NUM_JSON__.json"}};'
   122  + '    var metadata_key = "metadata";'
   127  + '    var metadata_key = "metadata";'
   197  + '              type: "Mediafragment"'
   202  + '              type: "Mediafragment"'
   198  + '          }'
   203  + '          }'
   199  + '      ]'
   204  + '      ]'
   200  + '  };'
   205  + '  };'
   201  + '  _myPlayer = new IriSP.Metadataplayer(_config);'
   206  + '  _myPlayer = new IriSP.Metadataplayer(_config);'
   202  + '  <\/script>'
   207  + '      <\/script>'
       
   208  + '    </div>'
   203  + '  </div>'
   209  + '  </div>'
       
   210  + '  <div style="float:left; width:400px;" id="AnnotationsList_ext"></div>'
   204  + '</div>'
   211  + '</div>'
   205  + '<div style="float:left; width:400px;" id="AnnotationsList_ext"></div>'
   212  + '<div><p class="text-right"><a style="margin-top: 10px;" class="btn btn-info" href="#" onclick="displayIframe(\'__NUM_JSON__\');return false;"><i class="glyphicon glyphicon-comment"></i> Ajouter votre commentaire sur cette vidéo</a></p></div>';
   206  + '</div>';
       
   207       
   213       
   208         $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
   214         $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
   209       }
   215       }
   210     }
   216     }
   211   </script>
   217   </script>