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
\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(annotationCibleNumber
this.annotations[i].begin/1000 && time ";
- //alert(this.color+" : "+DEC_HEXA_COLOR(this.color));
-
- $toolTipTemplate = "