<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- <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
# custom CSS citizen :
- EEEEEE tr�s clair
- 8d8d8d Gris clair
- 393939 Gris Fon��s
- 11100F presque noir
-->
<!-- ***************************************************************** -->
<!-- EXTERNAL JAVASCRIPT / JQUERY -->
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!-- <script type="text/javascript" src="js/transBG.jquery.plugin.js"></script> -->
<script type="text/javascript" src="js/swfobject.js"></script>
<!-- INITIALISE JQUERY WITH NO CONFLICT VERSION -->
<script>
var $jIRI = jQuery.noConflict();
</script>
<!-- ***************************************************************** -->
<!-- CSS QUERY -->
<link type="text/css" href="css/jq-css/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="css/jq-css/demos.css" rel="stylesheet" />
<!-- ***************************************************************** -->
<!-- Slider CSS NEEDED Range -->
<style type="text/css">
#demo-frame > div.demo { padding: 5px !important; };
</style>
<!-- ***************************************************************** -->
<!-- CSS CUSTOM -->
<style type="text/css">
.iri-chapter{
padding-top:10px;
padding-bottom:5px;
border-left:solid 1px #aaaaaa;
border-right:solid 1px #aaaaaa;'
}
.tooltip {
display:none;
background:transparent url(css/jq-css/tooltip/white_arrow.png);
font-size:12px;
height:100px;
width:180px;
padding:10px;
padding-left:15px;
padding-right:15px;
color:#000;
}
#Annotations{
padding-left:5px;
width:470px;
float:left;
}
#ldtSaTitle{
padding-top:2px;
padding-bottom:5px;
font-size:18px;
color:#FFF;
height:22p;
}
#ldtSaDescription{
font-size:12px;
color:#FFF;
}
#ShowAnnotation{
position:absolute;
z-index: 999;
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-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,
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
});
});
}
</script>
<!-- CREER JW PLAYER creation + listener -->
<script type="text/javascript">
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);
}
// 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");
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) {
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: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("swf/player.swf", "ldtPlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes);
}
</script>
<!-- LOAD JSON AND PARSE IT -->
<script type="text/javascript">
var MyLdt;
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");
}
</script>
<!-- INIT player LDT -->
<script type="text/javascript">
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);
}
</script>
<!-- API player -->
<script type="text/javascript">
function APIplayer (){
}
</script>
<!-- Class Media -->
<script type="text/javascript">
/*
"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){
createPlayer(width,height,this.url,this.duration);
createInterface(width,height,this.duration);
}
function updatePlayerMedia(){
}
function getMediaDuration(){
return (this.duration);
}
function getMediaTitle(){
return (this.title);
}
</script>
<!-- Class Ligne (annotationType) -->
<script type="text/javascript">
/*
"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"
*/
function Ligne (){
this.id = id;
this.title = title;
this.description = description;
this.annotations = new Array();
this.addAnnotation = addAnnotationligne;
this.clickAnnotation= onClickLigneAnnotation;
this.checkTime = checkTimeLigne;
}
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.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,this.duration);
this.annotations.push(myAnnotation);
trace("LIGNE ","add annotation ");
}
function onClickLigneAnnotation(id){
player.sendEvent('SEEK', this.start);
}
function searchLigneAnnotation(id){
/*for (){
}*/
}
function listAnnotations(){
}
function checkTimeLigne(time){
var annotationTempo;
for (var i=0; i < this.annotations.length; ++i){
var annotationTempo = this.annotations[i];
//trace("check... ",time+" = "+annotationTempo.begin+" -- "+annotationTempo.end);
//if (time>annotationTempo.begin){
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);
break;
}
}
}
</script>
<!-- CLASSE Annotation -->
<script type="text/javascript">
/*
"begin":"767",
"end":"785",
"id":"dp_1_sp_3",
"media":"kia_closeup",
"content": {
"mimetype":"application/x-ldt-structured",
"title":"mon titre",
"description":"ma description en <b>gras</b> .",
"color":"16763904",
"audio":{"src":"","mimetype":"audio/mp3","href":""}
},
"meta":
{
"id-ref":"dp_1",
"dc:creator":"tcavalie",
"dc:created":"2010-04-04T19:09:44",
"dc:contributor":"perso",
"dc:modified":"9/10/2007"
}
*/
function Annotation (){
this.id = null;
this.begin = null;
this.end = null;
this.media = null;
this.description = null;
this.title = null;
this.color = null;
this.onRollOver = onRollOverAnnotation;
this.onClick = onClickAnnotation;
this.toolTip = rollOverAnnotation;
this.draw = drawAnnotation;
trace("annotation ","r�ussi")
}
function Annotation (id,begin,end,media,title,description,color,duration){
this.id = id;
this.begin = begin;
this.end = end;
this.media = media;
this.description = description;
this.title = title;
this.color = title;
this.duration = duration;
//
this.onRollOver = onRollOverAnnotation;
//this.onClick = onClickAnnotation;
this.toolTip = tootTipAnnotation;
this.draw = drawAnnotation;
//this.show = showAnnotationNotice;
// draw it
this.draw();
//
trace("Annotation created : ",id);
}
function drawAnnotation (){
//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> ";
$toolTipTemplate = "<div class='tooltip'>"
+"<div class='title'>"+this.title+"</div>"
+"<div class='time'>"+this.begin+" : "+this.end+"</div>"
+"<div class='description'>"+this.description+"</div>"
+"</div>";
$jIRI("<div>"+$AnnotationTemplate+"</div>").appendTo("#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(){
}
</script>
</head>
<!-- createPlayer -->
<body >
<div id="playerLdt"></div>
<script type="text/javascript">
//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>
<br/><br/><br/><br/><br/>
<br/>
<!-- DEBUG TESTS ET AUTRES -->
<div id="output" class="demo"></div>
</body>
</html>