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({'width':this.pc.pp.width, 'height':this.pc.pp.height, 'overflow':"hidden"});
 134                 //@@todo support more smil animation layout stuff:
 135
 136                 //wrap output in videoPlayer_ div:
 137                 $j(this).html('<div id="videoPlayer_'+ this.id+'">'+this.getThumbnailHTML()+'</div>');
 138         },
 139         getThumbnailHTML:function( opt ){
 140                 var out='';
 141                 if(!opt)
 142                         opt = {};
 143                 var height = (opt.height)?opt.height:this.pc.pp.height;
 144                 var width = (opt.width)?opt.width: this.pc.pp.width;
 145                 js_log('1req '+ opt.height + ' but got: ' + height);
 146                 if( this.pc.type =='image/jpeg'){
 147                         js_log('should put src: '+this.pc.src);
 148                         out = '<img style="width:'+width+'px;height:'+height+'px" src="'+this.pc.src+'">';
 149                 }else{
 150                         out = this.pc.wholeText;
 151                 }
 152                 //js_log('f:getThumbnailHTML: got thumb: '+out);
 153                 return out;
 154         },
 155         doThumbnailHTML:function(){
 156                 js_log('f:htmlEmbed:doThumbnailHTML');
 157                 this.getEmbedHTML();
 158         },
 159         /* since its just html display get the "embed" right away */
 160         getHTML:function(){
 161                 js_log('getHTML: htmlEmbed');
 162                 this.getEmbedHTML();
 163         },
 164         getDuration:function(){
 165                 if(this.pc.dur)
 166                         return this.pc.dur;
 167                 //return default value:
 168                 return pcHtmlEmbedDefaults.dur;
 169         },
 170         updateVideoTime:function(start_ntp, end_ntp){
 171                 //since we don't really have timeline for html elements just take the delta and set it as the duration
 172                 this.pc.dur = npt2seconds(end_ntp) - npt2seconds(start_ntp);
 173         },
 174         //gives a chance to make any nesseary external requests
 175         //@@todo we can "start loading images" if we want
 176         on_dom_swap:function(){
 177                 this.loading_external_data=false
 178                 this.ready_to_play=true;
 179                 return ;
 180         }
 181 };