js2/mwEmbed/libEmbedVideo/htmlEmbed.js

   1 /*
   2  * used to embed HTML as a movie clip
   3  * for use with mv_playlist SMIL additions
   4  * (we make assumptions about this.pc (parent clip) being available)
   5  */
   6 var pcHtmlEmbedDefaults={
   7         'dur':4 //default duration of 4 seconds
   8 }
   9 var htmlEmbed ={
  10          supports: {
  11                 'play_head':true,
  12                 'pause':true,
  13                 'fullscreen':false,
  14                 'time_display':true,
  15                 'volume_control':true,
  16
  17                 'overlays':true,
  18                 'playlist_swap_loader':true //if the object supports playlist functions
  19            },
  20            ready_to_play:true,
  21            pauseTime:0,
  22            currentTime:0,
  23            start_offset:0,
  24            monitorTimerId:false,
  25         play:function(){
  26                 //call the parent
  27                 this.parent_play();
  28
  29                 js_log('f:play: htmlEmbedWrapper');
  30                 var ct = new Date();
  31                 this.clockStartTime = ct.getTime();
  32
  33                 //start up monitor:
  34                 this.monitor();
  35         },
  36         stop:function(){
  37                 this.pause();
  38                 //window.clearInterval( this.monitorTimerId );
  39         },
  40         pause:function(){
  41                 js_log('f:pause: htmlEmbedWrapper');
  42                 var ct = new Date();
  43                 this.pauseTime = this.currentTime;
  44                 js_log('pause time: '+ this.pauseTime);
  45
  46                 window.clearInterval( this.monitorTimerId );
  47         },
  48         //monitor just needs to keep track of time (do it at frame rate time) .
  49         monitor:function(){
  50                 //js_log('html:monitor: '+ this.currentTime);
  51                 var ct = new Date();
  52                 this.currentTime =( ( ct.getTime() - this.clockStartTime )/1000 ) +this.pauseTime;
  53                 var ct = new Date();
  54                 //js_log('mvPlayList:monitor trueTime: '+ this.currentTime);
  55
  56                 if( ! this.monitorTimerId ){
  57                         if(document.getElementById(this.id)){
  58                                 if( !MV_ANIMATION_CB_RATE )
  59                                         var MV_ANIMATION_CB_RATE= 33;
  60                                 this.monitorTimerId = window.setInterval('$j(\'#'+this.id+'\').get(0).monitor()', 250);
  61                         }
  62                 }
  63         },
  64         //set up minimal media_element emulation:
  65         media_element:{
  66                 autoSelectSource:function(){
  67                         return true;
  68                 },
  69                 selectedPlayer:{
  70                         library:"html"
  71                 },
  72                 selected_source:{
  73                         URLTimeEncoding:false
  74                 },
  75                 timedTextSources:function(){
  76                         return false;
  77                 }
  78         },
  79         inheritEmbedObj:function(){
  80                 return true;
  81         },
  82         renderTimelineThumbnail:function( options ){
  83                 js_log("HTMLembed req w, height: " + options.width + ' ' + options.height);
  84                 //generate a scaled down version _that_ we can clone if nessisary
  85                 //add a not vissiable container to the body:
  86                 var do_refresh = (typeof options['refresh'] != 'undefined')?true:false;
  87
  88                 var thumb_render_id =   this.id +'_thumb_render_'+ options.height;
  89                 if( $j('#' + thumb_render_id ).length == 0  ||  do_refresh ){
  90                         //set the font scale down percentage: (kind of arbitrary)
  91                         var scale_perc = options.width / this.pc.pp.width;
  92                         js_log('scale_perc:'+options.width + ' / '+ $j(this).width()+ ' = '+scale_perc );
  93                         //min scale font percent of 70 (overflow is hidden)
  94                         var font_perc  = ( Math.round( scale_perc*100 ) < 80 ) ? 80 : Math.round( scale_perc*100 );
  95                         var thumb_class = (typeof options['thumb_class'] !='undefined')? options['thumb_class'] : '';
  96                         $j('body').append( '<div id="' + thumb_render_id + '" style="display:none">'+
  97                                                                         '<div class="' + thumb_class + '" '+
  98                                                                         'style="width:'+options.width+'px;height:'+options.height+'px;" >'+
  99                                                                                         this.getThumbnailHTML({
 100                                                                                                 'width':  options.width,
 101                                                                                                 'height': options.height
 102                                                                                         }) +
 103                                                                         '</div>' +
 104                                                                 '</div>'
 105                                                           );
 106                         //scale down the fonts:
 107                         $j('#' + thumb_render_id + ' *').filter('span,div,p,h,h1,h2,h3,h4,h5,h6').css('font-size',font_perc+'%')
 108
 109                         //replace out links:
 110                         $j('#' + thumb_render_id +' a').each(function(){
 111                                 $j(this).replaceWith("<span>" + $j(this).html() + "</span>");
 112                         });
 113
 114                         //scale images that have width or height:
 115                         $j('#' + thumb_render_id + ' img').filter('[width]').each(function(){
 116                                 $j(this).attr({
 117                                                 'width': Math.round( $j(this).attr('width') * scale_perc ),
 118                                                 'height': Math.round( $j(this).attr('height') * scale_perc )
 119                                          }
 120                                 );
 121                         });
 122                 }
 123                 return $j('#' + thumb_render_id ).html();
 124         },
 125         //nothing to update in static html display: (return a static representation)
 126         //@@todo render out a mini text "preview"
 127         updateThumbTime:function( float_time ){
 128                 return ;
 129         },
 130         getEmbedHTML:function(){
 131                 js_log('f:html:getEmbedHTML: ' + this.id);
 132                 //set up the css for our parent div:
 133                 $j(this).css({
 134                         'width':this.pc.pp.width,
 135                         'height':this.pc.pp.height,
 136                         'overflow':"hidden"
 137                 });
 138                 //@@todo support more smil animation layout stuff:
 139
 140                 //wrap output in videoPlayer_ div:
 141                 $j(this).html('<div id="videoPlayer_'+ this.id+'">'+this.getThumbnailHTML()+'</div>');
 142         },
 143         getThumbnailHTML:function( opt ){
 144                 var out='';
 145                 if(!opt)
 146                         opt = {};
 147                 var height = (opt.height)?opt.height:this.pc.pp.height;
 148                 var width = (opt.width)?opt.width: this.pc.pp.width;
 149                 js_log('1req '+ opt.height + ' but got: ' + height);
 150                 if( this.pc.type =='image/jpeg' ||  this.pc.type == 'image/png' ){
 151                         js_log('should put src: '+this.pc.src);
 152                         out = '<img style="width:'+width+'px;height:'+height+'px" src="'+this.pc.src+'">';
 153                 }else{
 154                         out = this.pc.wholeText;
 155                 }
 156                 //js_log('f:getThumbnailHTML: got thumb: '+out);
 157                 return out;
 158         },
 159         doThumbnailHTML:function(){
 160                 js_log('htmlEmbed:doThumbnailHTML()');
 161                 this.getEmbedHTML();
 162         },
 163         /* since its just html display get the "embed" right away */
 164         getHTML:function(){
 165                 js_log('htmlEmbed::getHTML() ' + this.id);
 166                 this.getEmbedHTML();
 167         },
 168         getDuration:function(){
 169                 if(this.pc.dur)
 170                         return this.pc.dur;
 171                 //return default value:
 172                 return pcHtmlEmbedDefaults.dur;
 173         },
 174         updateVideoTime:function(start_ntp, end_ntp){
 175                 //since we don't really have timeline for html elements just take the delta and set it as the duration
 176                 this.pc.dur = npt2seconds(end_ntp) - npt2seconds(start_ntp);
 177         },
 178         //gives a chance to make any nesseary external requests
 179         //@@todo we can "start loading images" if we want
 180         on_dom_swap:function(){
 181                 this.loading_external_data=false
 182                 this.ready_to_play=true;
 183                 return ;
 184         }
 185 };