Augmented Media Player v 0.09

\n \n "+LdtShareTool+"\n \n

"); } - - var params = { - allowfullscreen:"true", - allowscriptaccess:"always", - wmode:"transparent" - } - - var attributes = { - id:"Ldtplayer1", - name:"Ldtplayer1" - } - - swfobject.embedSWF(MySwfPath, "ldtPlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes); + loadJson(width,height,file,MySwfPath); } - - /* ---------------------------------------------------------------- ---------------------------------------------------------------- - -LOAD JSON AND PARSE IT -*/ - + LOAD JSON AND PARSE IT */ var MyLdt; var Durration; var playerLdtWidth; var playerLdtHeight; - + function loadJson (width,height,urlJson,MySwfPath){ playerLdtWidth=width; @@ -201,30 +83,17 @@ $jIRI.ajax({ dataType: 'jsonp', - url:urlJson,//+"?callback=callbackLdts", - //jsonpCallback:callbackLdts, + url:urlJson, success: function(json){ - - //eval(json); - //alert("callback LDTS"); - /* 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("

").appendTo("#output"); MyMedia = new Media(json.medias[0].id,json.medias[0].href,json.medias[0]["meta"]["dc:duration"],json.medias[0]['dc:title'],json.medias[0]['dc:description']); - //alert(" MySwfPath : "+MySwfPath); - MyMedia.createPlayer(playerLdtWidth,playerLdtHeight,json.medias[0]["meta"]["item"]["value"],MySwfPath); - //alert("success loading ! "+json.medias[0]["meta"]["dc:duration"]+ " | " +json.medias[0]["meta"]["item"]["value"]); - + MyMedia.createPlayer(playerLdtWidth,playerLdtHeight,json.medias[0]["meta"]["item"]["value"],MySwfPath); /* # 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]["meta"]["dc:duration"]); - //alert("duration : "+json.medias[0]["dc:duration"]); - + MyLdt = new Ligne (json['annotation-types'][0].id,json['annotation-types'][0]['dc:title'],json['annotation-types'][0]['dc:description'],json.medias[0]["meta"]["dc:duration"]); /* # créer les annotations */ $jIRI.each(json.annotations, function(i,item) { @@ -256,48 +125,24 @@ } }); } - function callbackLdts(json){ - } - + } function trace (msg,value){ $jIRI("

"+msg+" : "+value+"

").appendTo("#output"); } - - -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- -INIT player LDT -*/ + - function playerLdt (width,height,file,divId,MySwfPath){ - - $jIRI("#"+divId).append("

\n Get flash to see this player \n

\n \n \n

"); - loadJson(width,height,file,MySwfPath); - } - - - + + /* ---------------------------------------------------------------- ---------------------------------------------------------------- - API player */ - - - function APIplayer (){ - - } - - - -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- - Class Media - + Class Media */ +/* "http://advene.liris.cnrs.fr/ns/frame_of_reference/ms":"o=0", "id":"kia_closeup", @@ -319,9 +164,9 @@ this.description = description; this.duration = duration; - this.lignes = new Array(); + this.lignes = new Array(); this.updatePlayer = updatePlayerMedia; - this.getDuration = getMediaDuration; + this.getDuration = getMediaDuration; this.createPlayer = createPlayerMedia; trace("Media ID :",id); @@ -330,9 +175,8 @@ trace("- content : audio",title); } function createPlayerMedia(width,height,MyStreamer,MySwfPath){ - //alert("create swfpath : "+MySwfPath+" my streame : "+MyStreamer); - createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); - createInterface(width,height,this.duration); + LdtApiPlayer = new APIplayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); + //createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); } function updatePlayerMedia(){ @@ -343,12 +187,377 @@ function getMediaTitle(){ return (this.title); } + + + + + + + + + + +/* ---------------------------------------------------------------- + ---------------------------------------------------------------- + INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON () */ + function createInterface (width,height,duration){ + trace("CREATE INTERFACE ",width+","+height+","+duration+","); + $jIRI(function() { + + $jIRI("#Ldt-Annotations").width(width-(78*2)); + $jIRI("#Ldt-ShowAnnotation").width(width-10); + $jIRI("#Ldt-controler ").width(width); + $jIRI("#Ldt-Control").attr("z-index","100"); + + $jIRI("#Ldt-ShowAnnotation").click(function () { + //$jIRI(this).slideUp(); + }); + + var LdtpPlayerY = $jIRI("#Ldt-PlaceHolder").attr("top"); + var LdtpPlayerX = $jIRI("#Ldt-PlaceHolder").attr("left"); + + $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) + LdtApiPlayer.seek(ui.value); + //changePageUrlOffset(ui.value); + //player.sendEvent('PAUSE') + } + }); + $jIRI("#amount").val($jIRI("#slider-range-min").slider("value")+" s"); + + $jIRI(".Ldt-Control1 button:first").button({ + icons: { + primary: 'ui-icon-play' + }, + text: false + }).next().button({ + icons: { + primary: 'ui-icon-seek-next' + }, + text: false + }); + + $jIRI(".Ldt-Control2 button:first").button({ + icons: { + primary: 'ui-icon-transferthick-e-w'//, + //secondary: 'ui-icon-volume-off' + }, + text: false + }).next().button({ + icons: { + primary: 'ui-icon-volume-on' + }, + text: false + }); + + }); + } + + + + + + + +/* ---------------------------------------------------------------- + ---------------------------------------------------------------- + Conversion de couleur Decimal vers HexaDecimal || 000 si fff */ + function DEC_HEXA_COLOR(dec) + { + var hexa='0123456789ABCDEF',hex='' + while (dec>15) + { + tmp = dec-(Math.floor(dec/16))*16; + hex = hexa.charAt(tmp)+hex; + dec = Math.floor(dec/16); + } + hex = hexa.charAt(dec)+hex; + if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ } + return(hex); + } + + + + + + + + /* ---------------------------------------------------------------- ---------------------------------------------------------------- - Class Ligne (annotationType) + API player - work in progress */ + function APIplayer (width,height,url,duration,streamerPath,MySwfPath){ + + this.player = null; + this.hashchangeUpdate = null; + + this.width = width; + this.height = height; + this.url = url; + this.duration = duration; + this.streamerPath = streamerPath; + this.MySwfPath = MySwfPath; + + this.pause = APIpPause; + this.ready = APIpReady; + this.play = APIpPlay; + this.seek = APIpSeek; + this.update = APIpUpdate; + this.mute = APIpMute; + this.share = APIpShare; + MyApiPlayer = this; + + createPlayer(width,height,this.url,this.duration,this.streamerPath,this.MySwfPath); + + } + + function APIpCreate(){ + + } + function APIpReady(player){ + //alert("ready"); + createInterface(this.width,this.height,this.duration); + this.player = player; + + // hashchange EVENT + if (window.addEventListener){ + // pour FIREFOX hashchange EVENT + window.addEventListener("hashchange", function() { + var url = location.href; + var time = retrieveTimeFragment(url); + trace("hashchange",time); + if(LdtApiPlayer.hashchangeUpdate==null){ + LdtApiPlayer.seek(time); + }else{ + LdtApiPlayer.hashchangeUpdate=null; + } + }, false); + + } + else if (window.attachEvent){ + // FOR IE hashchange EVENT + window.attachEvent("onhashchange", function() { + trace("hashchange",time); + var url = location.href; + var time = retrieveTimeFragment(url); + if(LdtApiPlayer.hashchangeUpdate==null){ + LdtApiPlayer.seek(time); + }else{ + LdtApiPlayer.hashchangeUpdate=null; + } + }, false); + } + + } + function APIpPause(){ + this.hashchangeUpdate = true; + this.player.sendEvent('PAUSE'); + } + function APIpPlay(){ + this.hashchangeUpdate = true; + this.player.sendEvent('PLAY'); + } + function APIpMute(){ + this.player.sendEvent('MUTE'); + } + function APIpShare(network){ + + MyMessage = "Je regarde :"; + MyURLNow = window.location.href; + //alert(network+" : "+MyURLNow); + + if(network == "facebook"){ + + //window.title = + + shareURL = "http://www.facebook.com/share.php?u="; + //http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.addthis.com%2F%3Fsms_ss%3Dfacebook + + }else if(network == "twitter"){ + + shareURL = "http://twitter.com/home?status="+MyMessage; + + }else if(network == "myspace"){ + shareURL ="http://www.myspace.com/Modules/PostTo/Pages/?u="; + + }else if(network == "delicious"){ + shareURL = "http://delicious.com/save?url="; + + }else if(network == "JamesPot"){ + alert(network+" non actif pour l'instant : "+MyURLNow); + + } + + window.location.href = shareURL+encodeURIComponent(MyURLNow); + } + function APIpSeek(time){ + this.player.sendEvent('SEEK', time); + changePageUrlOffset(time); + } + function APIpUpdate(time){ + this.hashchangeUpdate = true; + this.player.sendEvent('SEEK', time); + } + + function changePageUrlOffset(time) { + trace("changeURL",time); + // update page url + location.hash = "#t=" + time; + //document.displayurl.offseturl.value = location.href; + window.location.href = location.href; + } + + +/* ---------------------------------------------------------------- + ---------------------------------------------------------------- + CREER JW PLAYER creation + listener */ + + var currentPosition = 0; + var currentVolume = 50; + var player = null; + var startPosition = null; + + function playerReady(thePlayer) { + + player = window.document[thePlayer.id]; + LdtApiPlayer.ready(player); + trace("PLAYER READY ",""); + var url = location.href; + var time = retrieveTimeFragment(url); + trace("PLAYER READY SEEK IF NEEDED",time); + startPosition = time; + addListeners(); + } + function addListeners() { + if (player) { + player.addModelListener("TIME", "positionListener"); + player.addControllerListener("VOLUME", "volumeListener"); + player.addModelListener('STATE', 'stateMonitor'); + //http://developer.longtailvideo.com/trac/wiki/Player5Events + } else { + setTimeout("addListeners()",100); + } + + // et changer les boutons + } + function stateMonitor(obj) { + + if(obj.newstate == 'PAUSED') + { + trace("PAUSE : ",""); + changePageUrlOffset(currentPosition); + + } else if (obj.newstate == 'PLAYING'){ + // une fois la video prete a lire la déplacer au bon timecode + if(startPosition!=null){ + LdtApiPlayer.update(startPosition); + startPosition = null; + } + } else if (obj.newstate == 'BUFFERING'){ + trace("BUFFERING : ",""); + //changePageUrlOffset(currentPosition); + } + + } + 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,duration,streamerPath,MySwfPath) { + + myUrlFragment = url.split(streamerPath); + file = myUrlFragment[1]; + streamer = streamerPath; + + 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(MySwfPath, "Ldt-PlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes); + } + + + + + + + +/* ---------------------------------------------------------------- + ---------------------------------------------------------------- + MEDIA FRAGMENT FUNCTION*/ + + // when the hash on the window changes, also do an offset + // jump to time offset action + function jumpToTimeoffset(form) { + var time = form.time.value; + changePageUrlOffset(time); + } + + // parse the time hash out of the given url + function retrieveTimeFragment(url) { + var pageoffset = 0; + var offsettime = 0; + + if (url.split("#")[1] != null) { + pageoffset = url.split("#")[1]; + if (pageoffset.substring(2) != null) { + offsettime = pageoffset.substring(2); + } + } + return offsettime; + } + + function ignoreTimeFragment(url){ + if (url.split("#")[1] != null) { + pageurl= url.split("#")[0]; + } + return pageurl; + } + + + + + + +/* ---------------------------------------------------------------- + ---------------------------------------------------------------- + Class Ligne (annotationType) */ +/* "id":"dp_1", "dc:creator":"tcavalie", "dc:created":"2010-04-04T19:09:44", @@ -357,16 +566,19 @@ "dc:title":"dqsdkljfh qklsdhf very very very long", "dc:description":"sdfg sdfg sdfg sdfg" */ + + var LDTligne = null; function Ligne (){ this.id = id; this.title = title; this.description = description; this.annotations = new Array(); + this.annotationOldRead = ""; this.addAnnotation = addAnnotationligne; this.clickAnnotation= onClickLigneAnnotation; this.checkTime = checkTimeLigne; + this.nextAnnotation = onClickNextAnnotation; } - function Ligne (id,title,description,duration){ this.id = id; this.title = title; @@ -375,50 +587,120 @@ this.annotations = new Array(); this.addAnnotation = addLigneAnnotation; this.checkTime = checkTimeLigne; + this.nextAnnotation = onClickNextAnnotation; + this.numAnnotation = numAnnotationTimeLine; this.duration = duration; - trace("LIGNE ","créer "); - } - + LDTligne = this; + trace("LIGNE ","créer "+LDTligne); + } 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); + //changePageUrlOffset(currentPosition); + //player.sendEvent('SEEK', this.start); + //trace("SEEK",this.start); } - function searchLigneAnnotation(id){ /*for (){ }*/ } - - function listAnnotations(){ + function listAnnotations (){ } - + function onClickNextAnnotation(){ + var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1; + var annotationCible = this.annotations[annotationCibleNumber]; + + if(annotationCibleNumberannotationTempo.begin){ - if (time>annotationTempo.begin/1000 && timethis.annotations[i].begin/1000 && time