--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/player/index-player6.html Sat Jun 12 04:25:05 2010 +0200
@@ -0,0 +1,637 @@
+ <!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>
\ No newline at end of file