diff -r cb1b83039bc1 -r 39b2dab4f939 web/static/js/LdtPlayer.js --- a/web/static/js/LdtPlayer.js Wed Sep 15 15:20:26 2010 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,811 +0,0 @@ -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- - ---------------------------------------------------------------- - - LDTPlayer is created by http://www.iri.centrepompidou.fr - 2010-06-14 - version 0.08 - - init By Samuel Huron < samuel.huron (at) cybunk (dot) com > - use JQUERY - - use TOOLTIP FOR JQ - - use JQUERY UI for theme management - - use JWPLAYER - - use HTML5 exeample by Silvia Pfeiffer - http://annodex.net/~silvia/itext/mediafrag.html - - - - TODO : //////////////////////////////////////// - - ok - afficher une annotation au fil de la lecture - ok - fermer la zonne d'annotation - ok - ne pas fermer la zone annotation si pas demander - ok - réduire la taille du tool tip - ok - ajouter la gestion de fragments via les ancres - - ajouter le share annotation - - ajouter le share embed - - ok - bouton next - - gestion créer une annotation simple - - bouton graphique design : pause / stop - - gestion de L'API PLAYER !!!!!! - - - creation du mode radio - - ---------------------------------------------------------------- -*/ - - - - - -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- - INIT player LDT */ - - //LdtShareTool = "\n
\nShare| \n \n \n \n \n
\n /n"; - - LdtShareTool = ""+ - "\n "+ - "\n  "+ - "\n  "+ - "\n  "+ - "\n  "; - - - function playerLdt (width,height,file,divId,MySwfPath,AudioVideo){ - - if (AudioVideo==true){ - $jIRI("#"+divId).append("
\n
\n
\n
\n
\n \n "+LdtShareTool+"\n \n
X
\n Get flash to see this player \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n \n \n
\n
 
"); - - } else { - $jIRI("#"+divId).append(" \n \n
\n
\n \n \n
\n
\n
\n
\n
\n \n \n
\n
 
\n
\n
\n
\n
\n \n "+LdtShareTool+"\n \n
X
"); - } - loadJson(width,height,file,MySwfPath); - } - - - - -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- - LOAD JSON AND PARSE IT */ - - var MyLdt; - var Durration; - var playerLdtWidth; - var playerLdtHeight; - - function loadJson (width,height,urlJson,MySwfPath){ - - playerLdtWidth=width; - playerLdtHeight=height; - - $jIRI.ajax({ - dataType: 'jsonp', - url:urlJson, - success: function(json){ - /* # fonction avec 1 seul media et 1 seul annotation type code a cleaner */ - /* # créer le player */ - $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']); - 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"]); - /* # 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 ----------------------- */ - - - } - ,error: function(data){ - alert("ERROR : "+data); - } - }); - } - function callbackLdts(json){ - - } - function trace (msg,value){ - $jIRI("
"+msg+" : "+value+"
").appendTo("#output"); - } - - - - - - - - -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- - Class Media */ -/* - - "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,MyStreamer,MySwfPath){ - LdtApiPlayer = new APIplayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); - //createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); - } - function updatePlayerMedia(){ - - } - function getMediaDuration(){ - return (this.duration); - } - 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); - } - - - - - - - - -/* ---------------------------------------------------------------- - ---------------------------------------------------------------- - 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", - "dc:contributor":"perso", - "dc:modified":"15/2/2008", - "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; - this.description = description; - // - this.annotations = new Array(); - this.addAnnotation = addLigneAnnotation; - this.checkTime = checkTimeLigne; - this.nextAnnotation = onClickNextAnnotation; - this.numAnnotation = numAnnotationTimeLine; - this.duration = duration; - 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){ - //changePageUrlOffset(currentPosition); - //player.sendEvent('SEEK', this.start); - //trace("SEEK",this.start); - } - function searchLigneAnnotation(id){ - /*for (){ - }*/ - } - function listAnnotations (){ - - } - function onClickNextAnnotation(){ - var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1; - var annotationCible = this.annotations[annotationCibleNumber]; - - if(annotationCibleNumberthis.annotations[i].begin/1000 && time
"; - //alert(this.color+" : "+DEC_HEXA_COLOR(this.color)); - - $toolTipTemplate = "
" - +"
"+this.title+"
" - +"
"+this.begin+" : "+this.end+"
" - +"
"+this.description+"
" - +"
"; - - - $jIRI("
"+$AnnotationTemplate+"
").appendTo("#Ldt-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(){ - - } - - - \ No newline at end of file