web/fullrenkan.html
author ymh <ymh.work@gmail.com>
Fri, 25 Oct 2013 01:52:53 +0200
changeset 24 701af897de95
parent 23 a8a2b5d5421c
child 25 6477f4caeaae
permissions -rwxr-xr-x
update renkan and metadataplayer to stop zooming on scroll + small css correction

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fr"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="fr"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>Digital Studies - Home</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/ds.css">
</head>
<body>
 <div id="wrapper">
	<header class="navbar navbar-inverse" role="banner">
	  <div class="container">
	    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
	      <ul class="nav navbar-nav">
	        <li>
	          <a href="index.html"><img src="./img/newlogods2.png" alt="Logo Digital Studies" /></a>
	        </li>
	      </ul>
          <ul class="nav navbar-nav" style="float:right;">
              <li><a href="http://www.lemonde.fr" target="_blank" title="Article de Bernard Stiegler dans Le Monde">Le Monde</a></li>
              <li><a href="http://www.france-universite-numerique.fr/" target="_blank" title="France Université Numérique">FUN</a></li>
              <li><a href="http://pharmakon.fr/" target="_blank">Pharmakon</a></li>
              <li><a href="http://digital-studies.org/">Digital Studies</a></li>
          </ul>
	    </nav>
	  </div>
	</header>
	<div class="container">
      <div class="row" style="margin-top: -10px;">
        <h4 class="col-md-12" style="padding-bottom:10px;" id="titlerow"><a href="index.html#v=full" class="btn btn-info" style="margin-right: 15px;"><i class="glyphicon glyphicon-chevron-left"></i></a> </h4>
      </div>
      <div class="row">
        <div class="col-md-12" id="videocontainer" >Pour commencer, cliquez sur "Vidéo chapitrée du résumé" ou "Vidéo complète chapitrée"</div>
      </div>
      <div class="row" style="margin-top: 10px;">
        <div id='RenkanContainer' class='col-md-12 renkan_visible'></div>
      </div>
	</div>
    <footer>
      <div class="container row">
        <div class="footer-img col-md-6">
            <a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="./img/logo_IRI_footer.png" alt="Logo IRI" /></a>
            <a href="http://arsindustrialis.org/" target="_blank"><img src="./img/logoarsindustrialis.jpg" alt="Logo ars" /></a>
            <a href="http://pharmakon.fr/" target="_blank"><img src="./img/logo_pharmakon.png" alt="Logo Pharmakon" /></a>
        </div>
        <div class="col-md-6">
          <div class="text-right" id="copyright-version">©2013 <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a></div>
        </div>
      </div>
    </footer>
  </div>
  <script type="text/javascript" src="./lib/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="./lib/jquery.history.js"></script>
  <script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    
    var cur_vid = "";
    var display_renkan = true;
    
    function playVideo(n, segid, update_h){
      // test segid
      if(!(typeof segid !== 'undefined' && segid !== false)){
    	  segid = "";
      }
      
      var fire_hash_changed = false;
      
      if(cur_vid!=n){
	      if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7"){
	        $("#videocontainer").html("<p>à venir, vidéo n°" + n + "</p>");
	      }
	      else{
	        var s = ''
	 + '<div id="player_wrapper">'
	 + '  <div style="float:left; width:900px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be">'
	 + '    <div>'
	 + '      <div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>'
	 + '      <script type="text/javascript" src="./lib/metadataplayer/LdtPlayer-core.js"><\/script>'
	 + '      <script type="text/javascript">'
	 + 'if (typeof jQuery == "undefined") {'
	 + '    jQuery = IriSP.jQuery;'
	 + '   }'
	 + '    var metadatas = {metadata: {url: "./json/data__NUM_JSON__.json"}};'
	 + '    var metadata_key = "metadata";'
	 + '  IriSP.libFiles.defaultDir = "./js";'
	 + '  IriSP.libFiles.locations.jwPlayerSWF = "./player.swf";'
	 + '  IriSP.libFiles.locations.cssjQueryUI = "./css/jquery-ui.css";'
	 + '  IriSP.language = "fr-fr";'
	 + '  IriSP.widgetsDir = "./lib/metadataplayer";'
	 + '  var _metadata = {'
	 + '      url: metadatas[metadata_key].url,'
	 + '      format: "ldt"'
	 + '  };'
	 + '  var _config = {'
	 + '      width: "900",'
	 + '      container: "player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed",'
	 + '      css: "./lib/metadataplayer/LdtPlayer-core.css",'
	 + '      default_options: {'
	 + '          metadata: _metadata'
	 + '      },'
	 + '      widgets: ['
	 + '          {'
	 + '              type: "AutoPlayer",'
	 + '              height: "360",'
	 + '              autostart:  true,'
	 + '              url_transform: function(url) { var can_play_mp4 = !!document.createElement("video").canPlayType("video/mp4"); if(!can_play_mp4){ return url.replace(/\.mp4$/i,".webm"); }else{ return url; } }'
	 + '          }'
	 + '          ,{'
	 + '              type: "Polemic",'
	 + '              annotation_type: false,'
	 + '              defaultcolor: "#585858",'
	 + '              foundcolor: "#fc00ff",'
	 + '              polemics : ['
	 + '                      {'
	 + '                          "name" : "OK",'
	 + '                          "keywords" : [ "++" ],'
	 + '                          "color" : "#1d973d"'
	 + '                      },'
	 + '                      {'
	 + '                          "name" : "KO",'
	 + '                          "keywords" : [ "--" ],'
	 + '                          "color" : "#ce0a15"'
	 + '                      },'
	 + '                      {'
	 + '                          "name" : "REF",'
	 + '                          "keywords" : [ "==", "http://" ],'
	 + '                          "color" : "#c5a62d"  '
	 + '                      },'
	 + '                      {'
	 + '                          "name" : "Q",'
	 + '                          "keywords" : [ "?" ],'
	 + '                          "color" : "#036aae"'
	 + '                      }'
	 + '                  ]'
	 + '          }'
	 + '          ,{'
	 + '              type: "Slider"'
	 + '          }'
	 /*+ '          ,{'
	 + '              type: "AnnotationsList",'
	 + '              container: "AnnotationsList_ext",'
	 + '              ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",'
	 + '              ajax_granularity : 300000,'
	 + '              default_thumbnail : "./css/imgs/video_sequence.png",'
	 + '              show_audio: true,'
	 + '              rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"'
	 + '          }'*/
	 + '          ,{'
	 + '              type: "Controller"'
	 + '          }'
	 + '          ,{'
	// + '              type: "Segments",'
	// + '              annotation_type: ["chap","découpage"]'
	 + '              type: "MultiSegments"'
	 + '          }'
	// + '          ,{'
	// + '              type: "Annotation"'
	// + '          }'
	 + '          ,{'
	 + '              type: "Mediafragment"'
	 + '          }'
     + '          ,{'
     + '              type: "Tagcloud"'
     + '          }';
	 
	        if(display_renkan==true){
	        	var t = getURLParameter("type");
	        	if(t=="thema"){
	        		t = "bd79e8c3-3b12-11e3-8312-5fa5e5b09a85";
	        		$("#titlerow").append(" <strong>Vidéo complète avec carte d'annotation thématique.</strong> <a href='fullrenkan.html?type=chrono'>Voir la carte d'annotation chronologique</a>");
	        	}
	        	else{
	        		// Chrono
	        		t = "696e5544-3b44-11e3-8312-5fa5e5b09a85";
	        		$("#titlerow").append(" <strong>Vidéo complète avec carte d'annotation chronologique.</strong> <a href='fullrenkan.html?type=thema'>Voir la carte d'annotation thématique</a>");
	        	}
	        	s += ''
     + '          ,{'
     + '              type: "Renkan",'
     + '              container: "RenkanContainer",'
     + '              data: "http://renkan.iri-research.org/renkan/rest/projects/' + t + '?callback=?",'
     + '              renkan_options: {'
     + '                  zoom_on_scroll: false'
     + '              }'
	 + '          }';
	        }
	        s += ''
	 + '      ]'
	 + '  };'
	 + '  _myPlayer = new IriSP.Metadataplayer(_config);'
	 + '      <\/script>'
	 + '    </div>'
	 + '  </div>'
	 + '</div>';
	 
	      
	        $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
	      }
	      cur_vid = n;
      }
      else{
    	  fire_hash_changed = true;
      }
      
    }
    
    //Functions to manage history with parameters
    function getURLParameter(name) {
        return decodeURI(
            (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
        );
    }
    function update_history(s){
        History.replaceState(null, null, "#" + s);
    }
    
    
    // on load
    $(function() {
      playVideo("full");
    });
    
  </script>
  <script> 
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a ,m) 
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	  ga('create', 'UA-44960237-1', 'digital-studies.org'); 
	  ga('send', 'pageview');
</script>
</body>
</html>