diff -r ec1d0e7dcb53 -r b5155384c914 client/player/js/LdtPlayer.js
--- a/client/player/js/LdtPlayer.js Mon Jul 12 12:03:31 2010 +0200
+++ b/client/player/js/LdtPlayer.js Mon Jul 12 18:12:51 2010 +0200
@@ -3,197 +3,79 @@
----------------------------------------------------------------
LDTPlayer is created by http://www.iri.centrepompidou.fr
- 2010-06-14 - version 0.07
+ 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
+
----------------------------------------------------------------
*/
-/* ----------------------------------------------------------------
- ----------------------------------------------------------------
- INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON () */
-
-
- 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);
- //$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
- });
-
- });
- }
/* ----------------------------------------------------------------
----------------------------------------------------------------
- CREER JW PLAYER creation + listener */
-
-
- 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);
- }
+ INIT player LDT */
- // 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
- });
- }
- }
+ //LdtShareTool = "\n
\n
\n
\n
\n
\n \n "+LdtShareTool+"\n \n
X
");
}
-
- 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
\n
\n \n \n
\n
\n
\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(annotationCibleNumber
annotationTempo.begin){
- if (time>annotationTempo.begin/1000 && timethis.annotations[i].begin/1000 && time ";
+ startPourcent = timeToPourcent(this.begin,this.duration); // temps du média
+ endPourcent = timeToPourcent(this.end,this.duration)-startPourcent;
+ $AnnotationTemplate = " ";
+ //alert(this.color+" : "+DEC_HEXA_COLOR(this.color));
-
-
- $toolTipTemplate = "