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