--- a/client/player/index-player6.html Wed Jun 09 16:48:35 2010 +0200
+++ b/client/player/index-player6.html Thu Jun 10 19:15:21 2010 +0200
@@ -1,23 +1,25 @@
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
-<title> Augmented Media Player v 0.06 | with JWplayer</title>
+<!-- <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
+ <!--
+ - 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
+ # custom CSS citizen :
+ - EEEEEE très clair
+ - 8d8d8d Gris clair
+ - 393939 Gris Fonçés
+ - 11100F presque noir
--->
+ -->
<!-- ***************************************************************** -->
<!-- EXTERNAL JAVASCRIPT / JQUERY -->
@@ -58,7 +60,7 @@
.tooltip {
display:none;
- background:transparent url(css/tooltip/white_arrow.png);
+ background:transparent url(css/jq-css/tooltip/white_arrow.png);
font-size:12px;
height:100px;
width:180px;
@@ -68,10 +70,14 @@
color:#000;
}
- .annotations{
+ #Annotations{
+ padding-left:5px;
+ width:470px;
+ float:left;
}
#ldtSaTitle{
padding-top:2px;
+ padding-bottom:5px;
font-size:18px;
color:#FFF;
height:22p;
@@ -81,24 +87,51 @@
color:#FFF;
}
#ShowAnnotation{
- position: absolute;
+ position:absolute;
z-index: 999;
padding:5px;
- background:url(css/custom-theme/images/trans.png);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);
- //$jIRI("#ShowAnnotation").width(width);
- $jIRI("ldtSaTitle").width(width);
- $jIRI("ldtSaDescription").width(width);
+ $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,
@@ -113,9 +146,8 @@
}
});
$jIRI("#amount").val($jIRI("#slider-range-min").slider("value")+" s");
- //var htmlStr = $jIRI("#slider-range-min").html();
- $jIRI(".control1 button:first").button({
+ $jIRI(".ldtControl1 button:first").button({
icons: {
primary: 'ui-icon-play'
},
@@ -127,7 +159,7 @@
text: false
});
- $jIRI(".control2 button:first").button({
+ $jIRI(".ldtControl2 button:first").button({
icons: {
primary: 'ui-icon-newwin'//,
//secondary: 'ui-icon-volume-off'
@@ -139,6 +171,7 @@
},
text: false
});
+
});
}
</script>
@@ -160,18 +193,34 @@
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");
@@ -190,9 +239,18 @@
}
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:"rtmp://media.iri.centrepompidou.fr/ddc_player/",
- file:"video/stephenfrears_lesliaisonsdangereuses.flv",
+ streamer:streamer,
+ file:file,
+ //live:"true",
autostart:"true",
controlbar:"none"
}
@@ -211,13 +269,7 @@
swfobject.embedSWF("swf/player.swf", "ldtPlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes);
}
- function streamOrNot(){
-
- }
- function timeToPourcent(time,timetotal){
- return (Math.round(time/timetotal*100));
- }
</script>
@@ -225,63 +277,75 @@
<!-- LOAD JSON AND PARSE IT -->
<script type="text/javascript">
+
var MyLdt;
- function loadJson (width,height,url){
-
- $jIRI.getJSON(url,
- function(json){
- /* START PARSING ----------------------- */
- /* metas , medias , annotation-types , annotations , lists , tags , views */
- /* # fonction avec 1 seul media et 1 seul annotation type code a cleaner */
- //var MyLigne;
-
- /* # créer le player */
- $jIRI.each(json.medias, function(i,item) {
- $jIRI("<div></div>").appendTo("#output");
- MyMedia = new Media(item.id,item.url,item["dc:duration"],item['dc:title'],item['dc:description']);
- MyMedia.createPlayer(width,height);
- });
-
- /* # créer la ligne */
- $jIRI.each(json['annotation-types'], function(i,item) {
-
- MyLdt = new Ligne (item.id,item['dc:title'],item['dc:description']);
-
- });
-
- /* # 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 ----------------------- */
- });
-
+ 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");
}
@@ -291,8 +355,13 @@
<!-- INIT player LDT -->
<script type="text/javascript">
- function playerLdt (width,height,file){
- loadJson(width,height,"js/cinelabModelV1.js");
+ 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);
}
@@ -378,7 +447,7 @@
this.checkTime = checkTimeLigne;
}
- function Ligne (id,title,description){
+ function Ligne (id,title,description,duration){
this.id = id;
this.title = title;
this.description = description;
@@ -386,11 +455,14 @@
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);
+ var myAnnotation = new Annotation(id,begin,end,media,title,description,color,this.duration);
this.annotations.push(myAnnotation);
+ trace("LIGNE ","add annotation ");
}
function onClickLigneAnnotation(id){
@@ -412,7 +484,7 @@
var annotationTempo = this.annotations[i];
//trace("check... ",time+" = "+annotationTempo.begin+" -- "+annotationTempo.end);
//if (time>annotationTempo.begin){
- if (time>annotationTempo.begin && time<annotationTempo.end){
+ 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);
@@ -462,7 +534,7 @@
trace("annotation ","réussi")
}
- function Annotation (id,begin,end,media,title,description,color){
+ function Annotation (id,begin,end,media,title,description,color,duration){
this.id = id;
this.begin = begin;
this.end = end;
@@ -470,6 +542,7 @@
this.description = description;
this.title = title;
this.color = title;
+ this.duration = duration;
//
this.onRollOver = onRollOverAnnotation;
//this.onClick = onClickAnnotation;
@@ -484,12 +557,11 @@
}
function drawAnnotation (){
- startPourcent = timeToPourcent(this.begin,6892.66); // temps du média
- endPourcent = timeToPourcent(this.end,6892.66)-startPourcent;
- trace(" ### START : ",startPourcent);
- trace(" ### END : ",endPourcent);
-
- $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', '"+this.begin+"');\" ></div>";
+ //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> ";
@@ -503,7 +575,7 @@
$jIRI("<div>"+$AnnotationTemplate+"</div>").appendTo("#Annotations");
$jIRI("#"+this.id).tooltip({ effect: 'slide'});
- trace(" ### ","ADD ANOTATION : "+this.begin+" "+this.end+" "+this.title);
+ trace(" ### ","ADD ANOTATION : "+this.begin+" "+this.end+" "+this.title+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration);
}
function tootTipAnnotation() {
@@ -516,6 +588,10 @@
this.tootTip();
}
+ function timeToPourcent(time,timetotal){
+ return (parseInt(Math.round(time/timetotal*100)));
+ }
+
<!-- ***************************************************************** -->
<!-- Class tracess -->
@@ -527,31 +603,7 @@
}
-</script>
-
-<!-- TEST -->
-<script type="text/javascript">
-/*
- var MyMedia = new Media("kia_closeup",
- "rtmp://media.iri.centrepompidou.fr/ddc_player/video/stephenfrears_lesliaisonsdangereuses.flv",
- "689266",
- "Liaison Dangereuse",
- "Blobal bla bla bla bla bla bla bla bla bla bla ");
- var MyLigne = new Ligne ("dp_1","titre ligne","description");
-
- function addAnnotation(){
- MyLigne.addAnnotation("test",
- 5000,
- 6500,
- "kia_closeup",
- "mon annotation",
- "ma description bla bla bla bla",
- "color");
- //(id,begin,end,media,title,description,color)
- }
-
-*/
</script>
@@ -565,61 +617,21 @@
+
+
+<div id="playerLdt"></div>
<script type="text/javascript">
- playerLdt(550,310,"http://www.cybunk.com/iritest/player-iri/js/cinelabModelV1.php");
+ //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>
-<div id="playerLdt">
- <!-- VIDEO PLAYER -->
- <div id="ldtShow">
- <!-- Zone Affichage annotation -->
- <div id="ShowAnnotation" class="demo" >
- <div id="ldtSaTitle">Test</div>
- <div id="ldtSaDescription">le journaliste et M. Ahankhah passent le portail et se dirigent vers la
- </div>
- <div id="ldtSaBoutons"> <a> Fermer </a></div>
- </div>
- <!-- Zone Player -->
- <div id="ldtPlaceHolder">
- <a href="http://www.adobe.com/go/getflashplayer">Get flash</a> to see this player
- </div>
- </div>
- <!-- CONTROLER -->
- <div id="controlerLdt" class="demo">
- <div class="control1" style="width:70px;float:left;">
- <button id="ldtCtrlPlay" onclick="player.sendEvent('PLAY')">Play</button>
- <button id="ldtCtrlNext" onclick="player.sendEvent('SEEK', currentPosition+10)">next</button>
- </div>
- <div id="Annotations" class="ui-slider" style="padding-left:5px;width:470px;float:left;">
- <div id="slider-range-min"></div>
- </div>
- <div class="control2" style="padding-left:10px;width:70px;float:left;">
- <button id="ldtCtrlScreen" onclick="player.fullscreen('true')">Enlarge</button>
- <button id="ldtCtrlSound" onclick="player.sendEvent('MUTE')">Sound</button>
- </div>
- </div>
+<br/><br/><br/><br/><br/>
+
<br/>
- <!-- DEBUG -->
+ <!-- DEBUG TESTS ET AUTRES -->
<div id="output" class="demo"></div>
-
-</div>
-<br/><br/><br/><br/><br/>
-
-<div>
- <!-- TESTS ET AUTRES -->
- <a href="#" onclick="player.sendEvent('PLAY')">play/pause toggle</a><br>
- <a href="#" onclick="player.sendEvent('STOP')">stop playing and buffering</a><br>
- <a href="#" onclick="player.sendEvent('SEEK', currentPosition+10)">seek current position +10 seconds</a><br>
- <a href="#" onclick="player.sendEvent('SEEK', currentPosition-10)">seek current position -10 seconds</a><br>
- <a href="#" onclick="player.sendEvent('VOLUME', currentVolume+10)">set current volume +10%</a><br>
- <a href="#" onclick="player.sendEvent('VOLUME', currentVolume-10)">set current volume -10%</a><br>
- <a href="#" onclick="slider.max=100">update slider </a><br>
- <div id="vol">vol</div>
- <div id="posit">posit</div>
- <div id="amount"></div>
-</div>
-
</body>
</html>
\ No newline at end of file