--- a/client/player/index-player6.html Tue Jun 15 14:04:01 2010 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,637 +0,0 @@
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
- <title> Augmented Media Player v 0.06 | with JWplayer</title>
-
- <!--
- - bouton play pause /
- - bouton next / before
- - bouton son
- - cliquer sur annotation affiche le contenu
- - quand sur ségment afficher l'annotation correspondante pendant x seconde
- - controleur
-
-
- # custom CSS citizen :
- - EEEEEE très clair
- - 8d8d8d Gris clair
- - 393939 Gris Fonçés
- - 11100F presque noir
-
- -->
-
-<!-- ***************************************************************** -->
-<!-- EXTERNAL JAVASCRIPT / JQUERY -->
-<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
-<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
-<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
-<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
-<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>
-<script type="text/javascript" src="js/ui/jquery.ui.button.js"></script>
-<script type="text/javascript" src="js/jquery.tools.min.js"></script>
-<!-- <script type="text/javascript" src="js/transBG.jquery.plugin.js"></script> -->
-<script type="text/javascript" src="js/swfobject.js"></script>
-<!-- INITIALISE JQUERY WITH NO CONFLICT VERSION -->
-<script>
- var $jIRI = jQuery.noConflict();
-</script>
-
-<!-- ***************************************************************** -->
-<!-- CSS QUERY -->
-<link type="text/css" href="css/jq-css/themes/base/jquery.ui.all.css" rel="stylesheet" />
-<link type="text/css" href="css/jq-css/demos.css" rel="stylesheet" />
-
-<!-- ***************************************************************** -->
-<!-- Slider CSS NEEDED Range -->
-<style type="text/css">
- #demo-frame > div.demo { padding: 5px !important; };
-</style>
-
-<!-- ***************************************************************** -->
-<!-- CSS CUSTOM -->
-<style type="text/css">
- .iri-chapter{
- padding-top:10px;
- padding-bottom:5px;
- border-left:solid 1px #aaaaaa;
- border-right:solid 1px #aaaaaa;'
- }
-
- .tooltip {
- display:none;
- background:transparent url(css/jq-css/tooltip/white_arrow.png);
- font-size:12px;
- height:100px;
- width:180px;
- padding:10px;
- padding-left:15px;
- padding-right:15px;
- color:#000;
- }
-
- #Annotations{
- padding-left:5px;
- width:470px;
- float:left;
- }
- #ldtSaTitle{
- padding-top:2px;
- padding-bottom:5px;
- font-size:18px;
- color:#FFF;
- height:22p;
- }
- #ldtSaDescription{
- font-size:12px;
- color:#FFF;
- }
- #ShowAnnotation{
- position:absolute;
- z-index: 999;
- padding:5px;
- background:url(css/custom/images/transBlack.png);
- }
-
- #ldtPlaceHolder{
- position:absolue;
- float:none;
- }
- .ldtControl1{
- width:70px;
- float:left;
- }
- .ldtControl2{
- padding-left:10px;
- width:70px;
- float:left;
- }
-</style>
-
-<!-- INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON () -->
-<script type="text/javascript">
-
- function createInterface (width,height,duration){
- $jIRI(function() {
-
- $jIRI("#Annotations").width(width-(78*2));
- $jIRI("#ShowAnnotation").width(width-10);
- $jIRI("#controlerLdt").width(width);
- $jIRI("#Ldtplayer1").attr("z-index","100");
-
- $jIRI("#ShowAnnotation").click(function () {
- $jIRI(this).slideUp();
- });
-
- var LdtpPlayerY = $jIRI("#ldtPlaceHolder").attr("top");
- var LdtpPlayerX = $jIRI("#ldtPlaceHolder").attr("left");
-
- //alert(LdtpPlayerY+" | "+LdtpPlayerX);
- <!--PB possible sur IE 7 et 6 pour show annotation -->
- //$jIRI("#ShowAnnotation").attr("position","absolute");
- /*$jIRI("#ShowAnnotation").attr("top",0);
- $jIRI("#ShowAnnotation").attr("left",0);*/
-
- //$jIRI("#slider-range-min").roll
- $jIRI("#slider-range-min").slider({ //range: "min",
- value: 0,
- min: 1,
- max: duration/1000,//1:54:52.66 = 3600+3240+
- step: 0.1,
- slide: function(event, ui) {
-
- //$jIRI("#amount").val(ui.value+" s");
- player.sendEvent('SEEK', ui.value)
- //player.sendEvent('PAUSE')
- }
- });
- $jIRI("#amount").val($jIRI("#slider-range-min").slider("value")+" s");
-
- $jIRI(".ldtControl1 button:first").button({
- icons: {
- primary: 'ui-icon-play'
- },
- text: false
- }).next().button({
- icons: {
- primary: 'ui-icon-seek-next'
- },
- text: false
- });
-
- $jIRI(".ldtControl2 button:first").button({
- icons: {
- primary: 'ui-icon-newwin'//,
- //secondary: 'ui-icon-volume-off'
- },
- text: false
- }).next().button({
- icons: {
- primary: 'ui-icon-volume-on'
- },
- text: false
- });
-
- });
- }
-</script>
-
-<!-- CREER JW PLAYER creation + listener -->
-<script type="text/javascript">
-
- var currentPosition = 0;
- var currentVolume = 50;
- var player = null;
-
- function playerReady(thePlayer) {
- //alert("ready");
- player = window.document[thePlayer.id];
- addListeners();
- }
-
- function addListeners() {
- if (player) {
- player.addModelListener("TIME", "positionListener");
- player.addControllerListener("VOLUME", "volumeListener");
- player.addPlayPauseListener("PLAY", "state");
- } else {
- setTimeout("addListeners()",100);
- }
-
- // et changer les boutons
- }
-
- //function
-
- function addPlayPauseListener(obj) {
- if(obj){
- $jIRI(".control1 button:first").button({
- icons: {
- primary: 'ui-icon-pause'
- },
- text: false
- });
- }else{
- $jIRI(".control1 button:first").button({
- icons: {
- primary: 'ui-icon-play'
- },
- text: false
- });
- }
- }
-
- function positionListener(obj) {
- currentPosition = obj.position;
- var tmp = document.getElementById("posit");
- if (tmp) { tmp.innerHTML = "position: " + currentPosition; }
- $jIRI("#slider-range-min").slider("value", obj.position);
- $jIRI("#amount").val(obj.position+" s");
- // afficher annotation
-
- MyLdt.checkTime(currentPosition);
- }
-
- function volumeListener(obj) {
- currentVolume = obj.percentage;
- var tmp = document.getElementById("vol");
- if (tmp) { tmp.innerHTML = "volume: " + currentVolume; }
- }
-
- function createPlayer(width,height,url) {
-
- myUrlFragment = url.split("/");
- //
- file = myUrlFragment[myUrlFragment.length-3]+"/"+myUrlFragment[myUrlFragment.length-2]+"/"+myUrlFragment[myUrlFragment.length-1];
- indexofff = url.lastIndexOf(file);
- streamer = url.substr(0,indexofff);
- alert(url+"="+streamer+" - "+file);
-
- var flashvars = {
- streamer:streamer,
- file:file,
- //live:"true",
- autostart:"true",
- controlbar:"none"
- }
-
- var params = {
- allowfullscreen:"true",
- allowscriptaccess:"always",
- wmode:"transparent"
- }
-
- var attributes = {
- id:"Ldtplayer1",
- name:"Ldtplayer1"
- }
-
- swfobject.embedSWF("swf/player.swf", "ldtPlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes);
- }
-
-
-
-
-</script>
-
-<!-- LOAD JSON AND PARSE IT -->
-<script type="text/javascript">
-
-
- var MyLdt;
- var Durration;
- var playerLdtWidth;
- var playerLdtHeight;
-
- function loadJson (width,height,urlJson){
-
- playerLdtWidth=width;
- playerLdtHeight=height;
-
- $jIRI.ajax({
- dataType: 'jsonp',
- url:urlJson,
- success: function(json){
-
- //alert("success !");
-
-
- }
- ,error: function(data){
- alert("ERROR : "+data);
- }
- });
- }
-
- function callbackLdts(json){
- /* START PARSING ----------------------- */
- /* metas , medias , annotation-types , annotations , lists , tags , views */
- /* # fonction avec 1 seul media et 1 seul annotation type code a cleaner */
- /* # créer le player */
- //$jIRI.each(json.medias, function(i,item) {
- //});
- $jIRI("<div></div>").appendTo("#output");
- MyMedia = new Media(json.medias[0].id,json.medias[0].url,json.medias[0]["dc:duration"],json.medias[0]['dc:title'],json.medias[0]['dc:description']);
- MyMedia.createPlayer(playerLdtWidth,playerLdtHeight);
-
- /* # créer lignes */
- /*$jIRI.each(json['annotation-types'], function(i,item) {
- });*/
- MyLdt = new Ligne (json['annotation-types'][0].id,json['annotation-types'][0]['dc:title'],json['annotation-types'][0]['dc:description'],json.medias[0]["dc:duration"]);
- //alert("duration : "+json.medias[0]["dc:duration"]);
-
- /* # créer les annotations */
- $jIRI.each(json.annotations, function(i,item) {
-
- MyLdt.addAnnotation(
- item.id,
- item.begin,
- item.end,
- item.media,
- item.content.title,
- item.content.description,
- item.content.color);
-
- });
- $jIRI.each(json.lists, function(i,item) {
- trace("lists","");
- });
- $jIRI.each(json.tags, function(i,item) {
- trace("tags","");
- });
- $jIRI.each(json.views, function(i,item) {
- trace("views","");
- });
- /* END PARSING ----------------------- */
-
- }
-
- function trace (msg,value){
- $jIRI("<div>"+msg+" : "+value+"</div>").appendTo("#output");
- }
-
-</script>
-
-<!-- INIT player LDT -->
-<script type="text/javascript">
-
- function playerLdt (width,height,file,divId){
-
- //$jIRI("#playerLdt").append("<div id=\"div1\">hello</div>");
-
-
- $jIRI("#"+divId).append("<div id=\"ldtShow\">\n <div id=\"ShowAnnotation\" class=\"demo\" >\n <div id=\"ldtSaTitle\"></div>\n <div id=\"ldtSaDescription\"></div>\n </div> <div id=\"ldtPlaceHolder\">\n <a href=\"http://www.adobe.com/go/getflashplayer\">Get flash</a> to see this player \n </div>\n </div>\n <div id=\"controlerLdt\" class=\"demo\">\n <div class=\"ldtControl1\" >\n <button id=\"ldtCtrlPlay\" onclick=\"player.sendEvent('PLAY')\">Play</button>\n <button id=\"ldtCtrlNext\" onclick=\"player.sendEvent('SEEK', currentPosition+10)\">next</button>\n </div>\n <div id=\"Annotations\" class=\"ui-slider\">\n <div id=\"slider-range-min\"></div>\n </div>\n <div class=\"ldtControl2\">\n <button id=\"ldtCtrlScreen\" onclick=\"player.fullscreen('true')\">Enlarge</button>\n <button id=\"ldtCtrlSound\" onclick=\"player.sendEvent('MUTE')\">Sound</button>\n </div>\n </div>");
- loadJson(width,height,file);
- }
-
-
-
-</script>
-
-<!-- API player -->
-<script type="text/javascript">
-
- function APIplayer (){
-
- }
-
-</script>
-
-<!-- Class Media -->
-<script type="text/javascript">
- /*
- "http://advene.liris.cnrs.fr/ns/frame_of_reference/ms":"o=0",
- "id":"kia_closeup",
- "url":"D:/Thibaut/Outils_techno/IRI-LignesDeTemps/media/video/kia_closeup_BQ.flv",
- "dc:creator":"tcavalie",
- "dc:created":"2010-05-04T00:00:00",
- "dc:contributor":"tcavalie",
- "dc:modified":"2010-05-04T00:00:00",
- "dc:creator.contents":"Abbas Kiarostami",
- "dc:created.contents":"1990",
- "dc:title":"Close Up is a very very long title",
- "dc:description":"Analyse de Close Up",
- "dc:duration":"689266"
- */
- function Media (id,url,duration,title,description){
- this.id = id;
- this.url = url;
- this.title = title;
- this.description = description;
- this.duration = duration;
-
- this.lignes = new Array();
- this.updatePlayer = updatePlayerMedia;
- this.getDuration = getMediaDuration;
- this.createPlayer = createPlayerMedia;
-
- trace("Media ID :",id);
- trace("Media URL :",this.url);
- trace("- content : color",url);
- trace("- content : audio",title);
- }
- function createPlayerMedia(width,height){
- createPlayer(width,height,this.url,this.duration);
- createInterface(width,height,this.duration);
- }
- function updatePlayerMedia(){
-
- }
- function getMediaDuration(){
- return (this.duration);
- }
- function getMediaTitle(){
- return (this.title);
- }
-
-</script>
-
-<!-- Class Ligne (annotationType) -->
-<script type="text/javascript">
- /*
- "id":"dp_1",
- "dc:creator":"tcavalie",
- "dc:created":"2010-04-04T19:09:44",
- "dc:contributor":"perso",
- "dc:modified":"15/2/2008",
- "dc:title":"dqsdkljfh qklsdhf very very very long",
- "dc:description":"sdfg sdfg sdfg sdfg"
- */
- function Ligne (){
- this.id = id;
- this.title = title;
- this.description = description;
- this.annotations = new Array();
- this.addAnnotation = addAnnotationligne;
- this.clickAnnotation= onClickLigneAnnotation;
- this.checkTime = checkTimeLigne;
- }
-
- function Ligne (id,title,description,duration){
- this.id = id;
- this.title = title;
- this.description = description;
- //
- this.annotations = new Array();
- this.addAnnotation = addLigneAnnotation;
- this.checkTime = checkTimeLigne;
- this.duration = duration;
- trace("LIGNE ","créer ");
- }
-
- function addLigneAnnotation(id,begin,end,media,title,description,color){
- var myAnnotation = new Annotation(id,begin,end,media,title,description,color,this.duration);
- this.annotations.push(myAnnotation);
- trace("LIGNE ","add annotation ");
- }
-
- function onClickLigneAnnotation(id){
- player.sendEvent('SEEK', this.start);
- }
-
- function searchLigneAnnotation(id){
- /*for (){
- }*/
- }
-
- function listAnnotations(){
-
- }
-
- function checkTimeLigne(time){
- var annotationTempo;
- for (var i=0; i < this.annotations.length; ++i){
- var annotationTempo = this.annotations[i];
- //trace("check... ",time+" = "+annotationTempo.begin+" -- "+annotationTempo.end);
- //if (time>annotationTempo.begin){
- if (time>annotationTempo.begin/1000 && time<annotationTempo.end/1000){
- //trace("check ",annotationTempo.begin+" "+annotationTempo.end +" "+annotationTempo.title);
- $jIRI("#ldtSaTitle").text(annotationTempo.title);
- $jIRI("#ldtSaDescription").text(annotationTempo.description);
- break;
- }
- }
- }
-
-</script>
-
-<!-- CLASSE Annotation -->
-<script type="text/javascript">
- /*
- "begin":"767",
- "end":"785",
- "id":"dp_1_sp_3",
- "media":"kia_closeup",
- "content": {
- "mimetype":"application/x-ldt-structured",
- "title":"mon titre",
- "description":"ma description en <b>gras</b> .",
- "color":"16763904",
- "audio":{"src":"","mimetype":"audio/mp3","href":""}
- },
- "meta":
- {
- "id-ref":"dp_1",
- "dc:creator":"tcavalie",
- "dc:created":"2010-04-04T19:09:44",
- "dc:contributor":"perso",
- "dc:modified":"9/10/2007"
- }
- */
-
- function Annotation (){
- this.id = null;
- this.begin = null;
- this.end = null;
- this.media = null;
- this.description = null;
- this.title = null;
- this.color = null;
- this.onRollOver = onRollOverAnnotation;
- this.onClick = onClickAnnotation;
- this.toolTip = rollOverAnnotation;
- this.draw = drawAnnotation;
- trace("annotation ","réussi")
- }
-
- function Annotation (id,begin,end,media,title,description,color,duration){
- this.id = id;
- this.begin = begin;
- this.end = end;
- this.media = media;
- this.description = description;
- this.title = title;
- this.color = title;
- this.duration = duration;
- //
- this.onRollOver = onRollOverAnnotation;
- //this.onClick = onClickAnnotation;
- this.toolTip = tootTipAnnotation;
- this.draw = drawAnnotation;
- //this.show = showAnnotationNotice;
- // draw it
- this.draw();
-
- //
- trace("Annotation created : ",id);
- }
-
- function drawAnnotation (){
- //alert (this.duration);
- startPourcent = timeToPourcent(this.begin,this.duration); // temps du média
- endPourcent = timeToPourcent(this.end,this.duration)-startPourcent;
-
- $AnnotationTemplate = "<div title='"+this.title+"' id='"+this.id+"' class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' width='100%' style='left:"+startPourcent+"%; width:"+endPourcent+"%; padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa;' onclick=\"player.sendEvent('SEEK', '"+Math.round(this.begin/1000)+"');$jIRI('#ShowAnnotation').slideDown().delay(5000).slideUp();\" ></div> ";
-
-
-
- $toolTipTemplate = "<div class='tooltip'>"
- +"<div class='title'>"+this.title+"</div>"
- +"<div class='time'>"+this.begin+" : "+this.end+"</div>"
- +"<div class='description'>"+this.description+"</div>"
- +"</div>";
-
-
- $jIRI("<div>"+$AnnotationTemplate+"</div>").appendTo("#Annotations");
- $jIRI("#"+this.id).tooltip({ effect: 'slide'});
-
- trace(" ### ","ADD ANOTATION : "+this.begin+" "+this.end+" "+this.title+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration);
- }
-
- function tootTipAnnotation() {
- // 1 chercher le div correspondant
- // 2 y mettre les information
- return this.color + ' ' + this.type + ' apple';
- }
-
- function onRollOverAnnotation(){
- this.tootTip();
- }
-
- function timeToPourcent(time,timetotal){
- return (parseInt(Math.round(time/timetotal*100)));
- }
-
- <!-- ***************************************************************** -->
- <!-- Class tracess -->
-
- function Tracer (){
-
- }
-
- function addTrace(){
-
- }
-
-
-
-</script>
-
-
-</head>
-
-
-<!-- createPlayer -->
-
-<body >
-
-
-
-
-
-<div id="playerLdt"></div>
-<script type="text/javascript">
- //playerLdt(550,310, "js/cinelabModel_Peter.js","playerLdt");
- playerLdt(550,310, "http://dev.prototype-w.com/wu.mu/cinelabModel_Peter.js","playerLdt");
- //playerLdt(550,310, "http://dev.prototype-w.com/wu.mu/cinelabModelB.js","playerLdt");
-</script>
-
-
-<br/><br/><br/><br/><br/>
-
- <br/>
- <!-- DEBUG TESTS ET AUTRES -->
- <div id="output" class="demo"></div>
-
-</body>
-</html>
\ No newline at end of file