* added sequence render example
authorMichael Dale <dale@users.mediawiki.org>
Tue, 17 Nov 2009 14:33:18 +0000 (14:33 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Tue, 17 Nov 2009 14:33:18 +0000 (14:33 +0000)
* added kdp kaltrua player fallback support

js2/mwEmbed/binPlayers/kaltura-player/README [new file with mode: 0644]
js2/mwEmbed/binPlayers/kaltura-player/kdp.swf [new file with mode: 0755]
js2/mwEmbed/binPlayers/kaltura-player/wrapper.swf [new file with mode: 0755]
js2/mwEmbed/example_usage/Sequence_Render.html [new file with mode: 0644]
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/libEmbedVideo/kplayerEmbed.js
js2/mwEmbed/mv_embed.js

diff --git a/js2/mwEmbed/binPlayers/kaltura-player/README b/js2/mwEmbed/binPlayers/kaltura-player/README
new file mode 100644 (file)
index 0000000..3ec8757
--- /dev/null
@@ -0,0 +1,11 @@
+This Kaltura Dynamic Player +Playlist (KDP) is a sub package of the taken Kaltura Community Edition (CE) Built from Kaltura.org source.
+
+The full Kaltura Community Edition is licensed under the (GNU Affero General Public License v3)
+
+And the source code is available on the kaltura.org site:
+http://www.kaltura.org/project/kalturaCE
+
+More info about the KDP: 
+http://www.kaltura.org/kdp-dynamic-player-and-playlist-widget
+
+
diff --git a/js2/mwEmbed/binPlayers/kaltura-player/kdp.swf b/js2/mwEmbed/binPlayers/kaltura-player/kdp.swf
new file mode 100755 (executable)
index 0000000..c105546
Binary files /dev/null and b/js2/mwEmbed/binPlayers/kaltura-player/kdp.swf differ
diff --git a/js2/mwEmbed/binPlayers/kaltura-player/wrapper.swf b/js2/mwEmbed/binPlayers/kaltura-player/wrapper.swf
new file mode 100755 (executable)
index 0000000..812a32b
Binary files /dev/null and b/js2/mwEmbed/binPlayers/kaltura-player/wrapper.swf differ
diff --git a/js2/mwEmbed/example_usage/Sequence_Render.html b/js2/mwEmbed/example_usage/Sequence_Render.html
new file mode 100644 (file)
index 0000000..9d9c1f2
--- /dev/null
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+    <title>Seeking Render Example</title>
+         <script type="text/javascript" src="../mv_embed.js?debug=true"></script>      
+  <style>
+    #render_box {
+      position:absolute;
+      width:320px;
+      height:240px;
+    }    
+
+  </style>
+  <script>  
+mwAddOnloadHook(function(){
+
+       $j('#render_player').firefoggRender({
+               'render_options':{
+                       "framerate" : 30 
+               },
+               'target_startRender':'#buttonStart',
+               'target_stopRender': '#buttonStop',
+               'target_timeStatus': '#time_status'
+               
+       },function( foggRender ){
+               $j('#loading_text').hide();
+               if( foggRender.enabled ){
+                       $j('#info_control').show();
+               }else{
+                       $j('#info_control').html( 
+                               foggRender.myFogg.getTargetHtml('target_please_install')
+                       );
+                       if(!($j.browser.mozilla && $j.browser.version >= '1.9.1')) {
+                               $j('#info_control').html(
+                                       foggRender.myFogg.getTargetHtml('target_use_latest_fox')
+                               );                                      
+                       }
+               }
+       });
+       
+});
+  </script>
+</head>
+<body>
+<playlist id="render_player" src="media/sample_smil.xml" controls="false" width="320" height="240"></playlist>
+
+<!-- <video id="render_player"
+ durationHint="27" 
+ src="http://upload.wikimedia.org/wikipedia/commons/4/41/Panthera_tigris8.ogg" 
+ style="width:320px;height:240px;" 
+ controls="false"
+ poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Panthera_tigris8.ogg/mid-Panthera_tigris8.ogg.jpg">
+</video>
+-->
+
+
+<span id="loading_text" style="position:absolute; top:320px;">
+loading render system <blink>...</blink>
+</span>
+<div id="info_control" style="display:none;">
+       <button id="buttonStart">Do Render</button>
+       <button id="buttonStop">Stop</button>
+       Current Time: <input type="text" id="time_status" value="0.0" />
+       <span id="status"></span><br>
+</div>
+
+</body>
+</html>
index d193157..42caf4a 100644 (file)
@@ -41,6 +41,7 @@ loadGM( {
        "mwe-ogg-player-quicktime-activex" : "QuickTime ActiveX",
        "mwe-ogg-player-cortado" : "Java Cortado",
        "mwe-ogg-player-flowplayer" : "Flowplayer",
+       "mwe-ogg-player-kplayer" : "Kaltura player",
        "mwe-ogg-player-selected" : "(selected)",
        "mwe-ogg-player-omtkplayer" : "OMTK Flash Vorbis",
        "mwe-generic_missing_plugin" : "You browser does not appear to support the following playback type: <b>$1<\/b><br \/>Visit the <a href=\"http:\/\/commons.wikimedia.org\/wiki\/Commons:Media_help\">Playback Methods<\/a> page to download a player.<br \/>",
@@ -877,14 +878,9 @@ embedVideo.prototype = {
                this.duration = parseFloat( this.duration );
                js_log( "duration is: " +  this.duration );
                
-               // Get defaults         
-               var dwh = mw.conf['video_size'].split( 'x' );
-               this.width = element.style.width ? element.style.width : dwh[0];
-               if ( element.tagName == 'AUDIO' ) {
-                       this.height = element.style.height ? element.style.height : 0;
-               } else {
-                       this.height = element.style.height ? element.style.height : dwh[1];
-               }
+                                               
+               this.setDimSize( element, 'width' );
+               this.setDimSize( element, 'height' );                                                           
                
                // Set the plugin id
                this.pid = 'pid_' + this.id;
@@ -908,6 +904,17 @@ embedVideo.prototype = {
                // Load skin:
                loadExternalCss(  mv_embed_path +  'skins/' + this.skin_name + '/playerSkin.css' );
        },
+       // Function for set width height from attributes or by default value
+       setDimSize:function( element, dim ){                            
+               var dcss = parseInt( $j(element).css( dim ).replace( 'px' , '' ) );
+               var dattr = parseInt( $j(element).attr( dim ) );
+               this[ dim ] = ( dcss )? dcss : dattr;           
+               if(!this[ dim ]){
+                       // Grab width/height from default value
+                       var dwh = mw.conf['video_size'].split( 'x' );
+                       this[ dim ] = ( dim == 'width' )? dwh[0] : dwh[1];
+                }
+       },
        on_dom_swap: function() {
                js_log( 'f:on_dom_swap' );
                // Process the provided ROE file... if we don't yet have sources
@@ -2010,14 +2017,16 @@ embedVideo.prototype = {
         *  must be overwritten by embed object to support this functionality.
         */
        pause: function() {
+               var _this = this;
                var eid = ( this.pc != null ) ? this.pc.pp.id:this.id;
                // js_log('mv_embed:do pause');         
                // (playing) do pause           
                this.paused = true;
+               var $pt = $j( '#' + eid);
                // update the ctrl "paused state"                               
-               $j( '#' + eid + ' .play-btn span' ).removeClass( 'ui-icon-pause' ).addClass( 'ui-icon-play' );
-                $j( '#' + eid + ' .play-btn' ).unbind().btnBind().click( function() {
-                               $j( '#' + eid ).get( 0 ).play();
+               $pt.find('.play-btn span' ).removeClass( 'ui-icon-pause' ).addClass( 'ui-icon-play' );
+                $pt.find('.play-btn' ).unbind().btnBind().click( function() {
+                               _this.play();
                } ).attr( 'title', gM( 'mwe-play_clip' ) );
        },
        /**
@@ -2337,8 +2346,8 @@ mediaPlayer.prototype =
 /* players and supported mime types 
 @@note ideally we query the plugin to get what mime types it supports in practice not always reliable/avaliable
 */
-var flowPlayer = new mediaPlayer( 'flowplayer', ['video/x-flv', 'video/h264'], 'flowplayer' );
-// var kplayer = new mediaPlayer('kplayer', ['video/x-flv', 'video/h264'], 'kplayer');
+//var flowPlayer = new mediaPlayer( 'flowplayer', ['video/x-flv', 'video/h264'], 'flowplayer' );
+var kplayer = new mediaPlayer('kplayer', ['video/x-flv', 'video/h264'], 'kplayer');
 
 var omtkPlayer = new mediaPlayer( 'omtkplayer', ['audio/ogg'], 'omtk' );
 
@@ -2377,8 +2386,8 @@ mediaPlayers.prototype =
                this.loadPreferences();
                
                // set up default players order for each library type           
-               this.default_players['video/x-flv'] = ['flowplayer', 'vlc'];
-               this.default_players['video/h264'] = ['flowplayer', 'vlc'];
+               this.default_players['video/x-flv'] = ['kplayer', 'vlc'];
+               this.default_players['video/h264'] = ['kplayer', 'vlc'];
                
                this.default_players['video/ogg'] = ['native', 'vlc', 'java', 'generic'];
                this.default_players['application/ogg'] = ['native', 'vlc', 'java', 'generic'];
@@ -2560,8 +2569,8 @@ var embedTypes = {
                                // flowplayer has pretty good compatiablity 
                                // (but if we wanted to be fancy we would check for version of flash and update the mp4/h.264 support
 
-                               // this.players.addPlayer( kplayer );
-                               this.players.addPlayer( flowPlayer );
+                               this.players.addPlayer( kplayer );
+                               //this.players.addPlayer( flowPlayer );
                        }
                         // VLC
                         if ( this.testActiveX( 'VideoLAN.VLCPlugin.2' ) )
@@ -2649,8 +2658,8 @@ var embedTypes = {
                                }*/
                                if ( type == 'application/x-shockwave-flash' ) {
                                
-                                       // this.players.addPlayer( kplayer );
-                                       this.players.addPlayer( flowPlayer );
+                                       this.players.addPlayer( kplayer );
+                                       //this.players.addPlayer( flowPlayer );
                                        
                                        // check version to add omtk:
                                        var flashDescription = navigator.plugins["Shockwave Flash"].description;
index a4ca53f..9cdef6a 100644 (file)
@@ -11,58 +11,119 @@ var kplayerEmbed = {
        },
        getEmbedHTML : function () {
                var embed_code =  this.getEmbedObj();
-               // setTimeout('$j(\'#' + this.id + '\').get(0).postEmbedJS()', 2000);
+               var _this = this;
+               setTimeout(function(){
+                       _this.postEmbedJS();
+               }, 50);
                js_log( "return embed html" );
                return this.wrapEmebedContainer( embed_code );
        },
-       getEmbedObj:function() {
-               var player_path = mv_embed_path + 'binPlayers/kaltura-player/player.swf';
-               return '<object id="' + this.pid + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ' +
-                               'width="' + this.width + '" height="' + this.height + '">' +
-                                       '<param name="movie" value="' + player_path + '" />' +
-                                       '<param name="allowfullscreen" value="true" />' +
-                                       '<param name="allowscriptaccess" value="always" />' +
-                                       '<param name="flashvars" value="file=video.flv&image=preview.jpg" />' +
-                               '<embed ' +
-                                       'type="application/x-shockwave-flash" ' +
-                                       'id="' + this.pid + '" ' +
-                                       'src="' + player_path + '" ' +
-                                       'width="' + this.width + '" ' +
-                                       'height="' + this.height + '" ' +
-                                       'allowscriptaccess="always" ' +
-                                       'allowfullscreen="true" ' +
-                                       'flashvars="autostart=true&file=' + escape(  this.getSrc() ) + '" ' +
-                               '/>' +
-                       '</object>';
-               /*return  '<object id="'+this.pid+'" type="application/x-shockwave-flash"'+ 
-                               'allowScriptAccess="always" allowNetworking="all" allowFullScreen="true" '+
-                               'height="'+  parseInt(this.height) + '" ' +
-                               'width="' + parseInt(this.width) + '" ' +
-                               'data="http://www.kaltura.com/index.php/kwidget/wid/_309/uiconf_id/1000106">'+
-                                       '<param name="allowScriptAccess" value="always"/>'+
-                                       '<param name="allowNetworking" value="all"/>'+
-                                       '<param name="allowFullScreen" value="true"/>'+
-                                       '<param name="bgcolor" value="#000000"/>'+
-                                       '<param name="movie" value="http://www.kaltura.com/index.php/kwidget/wid/_0/uiconf_id/1000106"/>'+
-                                       '<param name="flashVars" value="emptyF=onKdpEmpty&readyF=onKdpReady&'+
-                                               //set the url: 
-                                               'entryId=' + escape(  this.getSrc() ) + '"/>'+
-                                       '<param name="wmode" value="opaque"/>'+
-                               '</object>';    */
+       getEmbedObj:function() {        
+               var player_path = mv_embed_path + 'binPlayers/kaltura-player';
+               return '<object width="' + this.width + '" height="' + this.height + '" '+ 
+                        'data="' + player_path + '/wrapper.swf" allowfullscreen="true" '+ 
+                        'allownetworking="all" allowscriptaccess="always" '+
+                        'type="application/x-shockwave-flash" '+ 
+                        'id="' + this.pid + '" name="' + this.pid + '">'+
+                               '<param value="always" name="allowScriptAccess"/>'+
+                               '<param value="all" name="allowNetworking"/>'+
+                               '<param value="true" name="allowFullScreen"/>'+
+                               '<param value="#000000" name="bgcolor"/>'+
+                               '<param value="wrapper.swf" name="movie"/>'+
+                               '<param value="' + 
+                                       'kdpUrl=' + player_path + '/kdp.swf' +
+                                       '&ks=dummy&partner_id=0&subp_id=0' +
+                                       '&uid=0&emptyF=onKdpEmpty&readyF=onKdpReady' +
+                                       '" ' + 
+                                       'name="flashVars"/>'+
+                         '<param value="opaque" name="wmode"/>'+
+                        '</object>';           
        },
        postEmbedJS:function() {
-               this.monitor();
+               var _this = this;
+               this.getKDP();          
+               if( this.kdp && this.kdp.insertMedia){
+               
+                       // Add KDP listeners
+                       
+                       //this.kdp.addJsListener("doPlay","kdpDoOnPlay");
+                       //this.kdp.addJsListener("doStop","kdpDoOnStop");
+                       //myKdp.addJsListener("fastForward","kdpDoOnFF");
+                                               
+                       _this.bindKdpFunc( 'doPause', 'kdpPause' );
+                       _this.bindKdpFunc( 'doPlay', 'play' );
+                       _this.bindKdpFunc( 'playerPlayEnd', 'onClipDone' );                                                                     
+               
+                       // Insert the src:
+                       this.kdp.insertMedia("-1",'http://192.168.192.90/kskin/kplayer-examples/media/bbb.flv','true');                 
+                       this.kdp.dispatchKdpEvent('doPlay');
+                       
+                       // Start the monitor
+                       this.monitor();
+               }else{
+                       setTimeout( function(){
+                               _this.postEmbedJS();
+                       }, 25);
+               }               
+       },
+       /**
+       * bindKdpFunc
+       * 
+       * @param {String} flash binding name
+       * @param {String} function callback name
+       */
+       bindKdpFunc:function( bName, fName ){
+               var cbid = fName + '_cb_' + this.id.replace(' ', '_');
+               eval( 'window[ \'' + cbid +'\' ] = function(){$j(\'#' + this.id + '\').get(0).'+ fName +'();}' );
+               this.kdp.addJsListener( bName , cbid);
+       },
+       kdpPause:function(){            
+               this.parent_pause();
+       },
+       play:function() {
+               if( this.kdp && this.kdp.dispatchKdpEvent )
+                       this.kdp.dispatchKdpEvent('doPlay');
+               this.parent_play();
        },
        pause:function() {
-               this.stop();
+               this.kdp.dispatchKdpEvent('doPause');
+               this.parent_pause();
+       },
+       doSeek:function( prec ){
+               var _this = this;
+               if( this.kdp ){
+                       var seek_time = prec * this.getDuration(); 
+                       this.kdp.dispatchKdpEvent('doSeek',  seek_time);
+                       // Kdp is missing seek done callback
+                       setTimeout(function(){
+                               _this.seeking= false;
+                       },500);
+               }
+               this.monitor();
+       },
+       updateVolumen:function( perc ) {
+               if( this.kdp && this.kdp.dispatchKdpEvent )
+                       this.kdp.dispatchKdpEvent('volumeChange', perc);
+       },
+       monitor:function() {    
+               if( this.kdp && this.kdp.getMediaSeekTime ){
+                       this.currentTime = this.kdp.getMediaSeekTime();
+               }
+               this.parent_monitor();
        },
-       monitor:function() {
-               // this.parent_monitor();       
+       // get the embed fla object
+       getKDP: function () {
+               this.kdp = document.getElementById( this.pid );
        }
 }
 
+function kdpDoOnPause( player ){
+       var cat = player
+       debugger;
+}
+
 function onKdpReady( playerId ) {
-        js_log( "IN THEORY PLAYER IS READY);
+        js_log( "IN THEORY PLAYER IS READY:" + playerId);
         /*
         window.myKdp=get(playerId);
         get("Player_State").innerHTML="<br>&nbsp; READY (Id=" + playerId + ")";
index 66b1551..f1c9823 100644 (file)
@@ -526,8 +526,8 @@ var global_req_cb = new Array(); // The global request callback array
        * This is not feature complete but we need a way to get at template properties
        *
        *
-       * @param wikiText the wikitext to be parsed
-       * @return parserObj returns a parser object that has methods for getting at
+       * @param {String} wikiText the wikitext to be parsed
+       * @return {Object} parserObj returns a parser object that has methods for getting at
        * things you would want
        */
        $.parser = { };