http://www.mediawiki.org/wiki/Special:Code/MediaWiki/68538
Revision: 68538 Author: dale Date: 2010-06-25 01:07:46 +0000 (Fri, 25 Jun 2010) Log Message: ----------- * improved smil playback with animations between monitor points * register the callback time. Modified Paths: -------------- branches/MwEmbedStandAlone/modules/EmbedPlayer/loader.js branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js branches/MwEmbedStandAlone/modules/SmilPlayer/tests/panzoom/Fruits-4s.smil.xml Added Paths: ----------- branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransition.html branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransitionSmil.xml Removed Paths: ------------- branches/MwEmbedStandAlone/tests/media/sequence_transition_smil.xml Modified: branches/MwEmbedStandAlone/modules/EmbedPlayer/loader.js =================================================================== --- branches/MwEmbedStandAlone/modules/EmbedPlayer/loader.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/EmbedPlayer/loader.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -64,7 +64,10 @@ "EmbedPlayer.ShareEmbedMode" : 'object', // Default player skin name - "EmbedPlayer.SkinName" : "mvpcf" + "EmbedPlayer.SkinName" : "mvpcf", + + // Number of milliseconds between interface updates + 'EmbedPlayer.MonitorRate' : 250 } ); // Add class file paths Modified: branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js =================================================================== --- branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -1370,8 +1370,11 @@ if ( !this.skinName ) { this.skinName = mw.getConfig( 'EmbedPlayer.SkinName' ); } - + if( !this.monitorRate ){ + this.monitorRate = mw.getConfig( 'EmbedPlayer.MonitorRate' ); + } + // Make sure startOffset is cast as an float: if ( this.startOffset && this.startOffset.split( ':' ).length >= 2 ) { this.startOffset = parseFloat( mw.npt2seconds( this.startOffset ) ); @@ -2895,7 +2898,7 @@ } //mw.log( 'Monitor:: ' + this.currentTime + ' duration: ' + ( parseInt( this.getDuration() ) + 1 ) + ' is seek: ' + this.seeking ); - if ( this.currentTime && this.currentTime > 0 && this.duration ) { + if ( this.currentTime >= 0 && this.duration ) { if ( !this.userSlide && !this.seeking ) { if ( parseInt( this.startOffset ) != 0 ) { // If start offset include that calculation @@ -2945,7 +2948,7 @@ if( !this.monitorInterval ){ this.monitorInterval = setInterval( function(){ _this.monitor(); - }, 250 ) + }, this.monitorRate ) } } else { // If stoped "stop" monitor: Modified: branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js =================================================================== --- branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/EmbedPlayer/skins/mw.PlayerControlBuilder.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -635,7 +635,7 @@ return false; } // If the config is false - if( mw.getConfig( 'EmbedPlayer.OverlayControls' ) === false){ + if( mw.getConfig( 'EmbedPlayer.OverlayControls' ) == false){ return false; } Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -4,6 +4,12 @@ // Wrap in mw to not pollute global namespace ( function( mw ) { + mw.setDefaultConfig( { + // The framerate for the smil player + 'SmilPlayer.framerate': 30 + } ); + + mw.addResourcePaths( { "mw.SmilHooks" : "mw.SmilHooks.js", Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -48,19 +48,26 @@ * @param {function} callback Function to be called once currentTime is loaded and displayed */ setCurrentTime: function( time, callback ) { - mw.log('EmbedPlayerSmil::setCurrentTime: ' + time ); + mw.log('EmbedPlayerSmil::setCurrentTime: ' + time ); // Set "loading" spinner here) $j( this ).append( $j( '<div />') .attr('id', 'loadingSpinner_' + this.id ) .loadingSpinner() ); + // Start seek + this.controlBuilder.onSeek(); + this.smilPlayTime = time; var _this = this; this.getSmil( function( smil ){ smil.renderTime( time, function(){ - mw.log("renderTime callback"); + mw.log( "setCurrentTime:: renderTime callback" ); $j('#loadingSpinner_' + _this.id ).remove(); - callback(); + + _this.monitor(); + if( callback ){ + callback(); + } } ); }); }, @@ -71,7 +78,7 @@ getRenderTarget: function(){ if( !this.$renderTarget ){ if( $j('#smilCanvas_' + this.id ).length === 0 ) { - // if no render target exist create one: + // If no render target exist create one: $j( this ).html( $j( '<div />') .attr('id', 'smilCanvas_' + this.id ) @@ -93,9 +100,8 @@ this.parent_play(); // Set start clock time: - this.clockStartTime = new Date().getTime(); + this.clockStartTime = new Date().getTime(); - this.getSmil( function( smil ){ this.smil = smil; }) @@ -106,6 +112,7 @@ stop: function(){ this.smilPlayTime = 0; this.smilPauseTime = 0; + this.setCurrentTime( 0 ); this.parent_stop(); }, @@ -125,6 +132,7 @@ getPlayerElementTime: function() { return this.smilPlayTime; }, + /** * Monitor function render a given time @@ -133,14 +141,13 @@ // Update the smilPlayTime if( !this.isPaused() ){ this.smilPlayTime = this.smilPauseTime + ( ( new Date().getTime() - this.clockStartTime ) / 1000 ); + + // xxx check buffer to see if we need to pause playback + + // Issue an animate time request with monitorDelta + this.smil.animateTime( this.smilPlayTime, this.monitorRate ); } - - // Animate to time - smil.renderTime( this.smilPlayTime, function(){ - // callback for render - - // xxx if too much time has gone by potentaill flag - }); + this.parent_monitor(); }, Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -119,6 +119,17 @@ }, /** + * We use animateTime instead of a tight framerate loop + * so that we can optimize with css transformations + * + * ( Very similar to renderTime but no callback and we pass a timeDelta + */ + animateTime: function( time, timeDelta ){ + //mw.log("Smil::animateTime: " + time + ' delta: ' + timeDelta ); + this.getBody().renderTime( time, timeDelta ); + }, + + /** * Get the smil buffer object */ getBuffer: function(){ Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -10,17 +10,115 @@ // Constructor: init: function( smilObject ){ this.smil = smilObject; + + // xxx possible option? + this.framerate = mw.getConfig( 'SmilPlayer.framerate' ); + + this.callbackRate = 1000 / this.framerate; + this.animateInterval = []; }, + /** + * Animate a smil transform per supplied time. + */ + animateTransform: function( smilElement, animateTime, deltaTime ){ + var _this = this; + + // If deltaTime is zero, then we should just transformElement directly: + if( !deltaTime || deltaTime === 0 ){ + _this.transformElement( smilElement, animateTime ); + return ; + } + + // Check if the current smilElement has any transforms to be done + if( ! this.checkForTransformUpdate( smilElement, animateTime, deltaTime ) ){ + // xxx no animate loop needed for element: smilElement + return ; + } + + // We have a delta spawn an short animateInterval + + // Clear any old animation loop ( can be caused by overlapping play requests or slow animation ) + clearInterval( this.animateInterval[ this.smil.getAssetId( smilElement ) ] ); + + // Start a new animation interval + var animationStartTime = new Date().getTime(); + var animateTimeDelta = 0; + + this.animateInterval[ this.smil.getAssetId( smilElement ) ] = + setInterval( + function(){ + var timeElapsed = new Date().getTime() - animationStartTime; + // Set the animate Time delta + animateTimeDelta += _this.callbackRate; + + if( animateTimeDelta > deltaTime || timeElapsed > deltaTime ){ + // Stop animating: + clearInterval( _this.animateInterval[ _this.smil.getAssetId( smilElement ) ] ); + return ; + } + + if( Math.abs( timeElapsed - animateTimeDelta ) > 100 ){ + mw.log( "Error more than 100ms lag within animateTransform loop: te:" + timeElapsed + + ' td:' + animateTimeDelta + ' diff: ' + Math.abs( timeElapsed - animateTimeDelta ) ); + } + + // Do the transform request: + _this.transformElement( smilElement, animateTime + ( animateTimeDelta/1000 ) ); + }, + this.callbackRate + ); + }, + + /** + * Quickly check if a given smil element needs to be updated for a given time delta + */ + checkForTransformUpdate: function( smilElement, animateTime, deltaTime ){ + // Get the node type: + var nodeName = $j( smilElement ).get(0).nodeName; + + // NOTE: our img node check sort of avoids deltaTime check but its assumed to not matter much + // since any our supported keyframe granularity will be equal to deltaTime ie 1/4 a second. + if( nodeName.toLowerCase() == 'img' ){ + // Confirm a child animate is in-range + if( $j( smilElement ).find( 'animate' ).length ) { + // Check if there are animate elements in range: + if( this.getSmilAnimateInRange( smilElement, animateTime) ){ + return true; + } + } + } + + // Check if we need to do a smilText clear: + if( nodeName.toLowerCase() == 'smiltext' ){ + var el = $j( smilElement ).get(0); + for ( var i=0; i < el.childNodes.length; i++ ) { + var node = el.childNodes[i]; + // Check for text Node type: + if( node.nodeName == 'clear' ) { + var clearTime = this.smil.parseTime( $j( node ).attr( 'begin') ); + //mw.log( ' ct: ' + clearTime + ' >= ' + animateTime + ' , ' + deltaTime ); + if( clearTime >= animateTime && clearTime <= ( animateTime + deltaTime ) ) { + return true; + } + } + } + } + //mw.log( 'checkForTransformUpdate::' + nodeName +' ' + animateTime ); + + return false; + }, + + /** * Transform a smil element for a requested time. * * @param {Element} smilElement Element to be transformed - * @param {float} animateTime The relative time to be transfored. + * @param {float} animateTime The relative time to be transformed. */ transformElement: function( smilElement, animateTime ) { var nodeName = $j( smilElement ).get(0).nodeName ; - mw.log("transformForTime: " + nodeName ); + //mw.log("transformForTime: " + nodeName + ' t:' + animateTime ); switch( nodeName.toLowerCase() ){ case 'smiltext': return this.transformTextForTime( smilElement, animateTime); @@ -32,92 +130,113 @@ }, transformTextForTime: function( textElement, animateTime ) { + //mw.log("transformTextForTime:: " + animateTime ); + if( $j( textElement ).children().length == 0 ){ // no text transform children return ; - } - + } // xxx Note: we could have text transforms in the future: var textCss = this.smil.getLayout().transformSmilCss( textElement ); + + // Set initial textValue: + var textValue =''; - var bucketText = ''; - var textBuckets = []; - var clearInx = 0; - var el = $j( textElement ).get(0); + var el = $j( textElement ).get(0); for ( var i=0; i < el.childNodes.length; i++ ) { var node = el.childNodes[i]; // Check for text Node type: if( node.nodeType == 3 ) { - bucketText += node.nodeValue; - } else if( node.nodeName == 'clear'){ - var clearTime = this.smil.parseTime( $j( node ).attr( 'begin') ); - // append bucket - textBuckets.push( { - 'text' : bucketText, - 'clearTime' : clearTime - } ); + textValue += node.nodeValue; + } else if( node.nodeName == 'clear' ){ + var clearTime = this.smil.parseTime( $j( node ).attr( 'begin') ); + if( clearTime > animateTime ){ + break; + } // Clear the bucket text collection - bucketText =''; + textValue = ''; } - } - - var textValue =''; - // Get the text node in range given time: - for( var i =0; i < textBuckets.length ; i++){ - var bucket = textBuckets[i]; - if( animateTime < bucket.clearTime ){ - textValue = bucket.text; - break; - } - } + } + // Update the text value target // xxx need to profile update vs check value $j( '#' + this.smil.getAssetId( textElement ) ) - .html( - $j('<span />') - // Add the text value - .text( textValue ) - .css( textCss ) - ) + .html( + $j('<span />') + // Add the text value + .text( textValue ) + .css( textCss ) + ) }, transformImageForTime: function( smilImgElement, animateTime ) { var _this = this; + //mw.log( "transformImageForTime:: animateTime:" + animateTime ); + if( $j( smilImgElement ).children().length == 0 ){ - // no image transform children + // No image transform children return ; } + + var animateInRange = _this.getSmilAnimateInRange( smilImgElement, animateTime, function( animateElement ){ + //mw.log('animateInRange callback::' + $j( animateElement ).attr( 'attributeName' ) ); + switch( $j( animateElement ).attr( 'attributeName' ) ) { + case 'panZoom': + // Get the pan zoom css for "this" time + _this.transformPanZoom ( smilImgElement, animateElement, animateTime ); + break; + default: + mw.log("Error unrecognized Animation attributName: " + + $j( animateElement ).attr( 'attributeName' ) ); + } + }); + // No animate elements in range, make sure we transform to previus or to initial state if time is zero + if( !animateInRange ) { + if( animateTime == 0 ) { + // just a hack for now ( should read from previus animation or from source attribute + //this.updateElementLayout( smilImgElement, { 'top':1,'left':1,'width':1, 'height':1 } ); + var $target = $j( '#' + this.smil.getAssetId( smilImgElement )); + $target.css({ 'top':'0px','left':'0px','width':'100%', 'height':'100%' } ); + } + // xxx should check for transform to previus + } + }, + + /** + * Calls a callback with Smil Animate In Range for a requested time + * + * @param {Element} smilImgElement The smil element to search for child animate + * @param {float} animateTime The target animation time + * @param {function=} callback Optional function to call with elements in range. + * return @bollean true if animate elements are in range false if none found + */ + getSmilAnimateInRange: function( smilImgElement, animateTime, callback ){ + var _this = this; + var animateInRange = false; // Get transform elements in range $j( smilImgElement ).find( 'animate' ).each( function( inx, animateElement ){ var begin = _this.smil.parseTime( $j( animateElement ).attr( 'begin') ); var duration = _this.smil.parseTime( $j( animateElement ).attr( 'dur') ); - //mw.log( "b:" + begin +" < " + animateTime + " && b+d: " + ( begin + duration ) + " > " + animateTime ); + //mw.log( "getSmilAnimateInRange:: b:" + begin +" < " + animateTime + " && b+d: " + ( begin + duration ) + " > " + animateTime ); // Check if the animate element is in range var cssTransform = {}; if( begin <= animateTime && ( begin + duration ) >= animateTime ) { - // Get the transform type: - switch( $j( animateElement ).attr('attributeName') ){ - case 'panZoom': - // Get the pan zoom css for "this" time - _this.transformPanZoom ( smilImgElement, animateElement, animateTime ); - break; - default: - mw.log("Error unrecognized Annimation attributName: " + - $j( animateElement ).attr('attributeName') ); - - } - //mw.log("b:transformImageForTime: " + $j( animateElement ).attr( 'values' ) ); - //$j( smilImgElement ).css( cssTransform ); - } - + animateInRange = true; + if( callback ) { + callback( animateElement ); + } + } }); + return animateInRange; }, + /** - * get the css layout transforms for a panzoom transform type + * Get the css layout transforms for a panzoom transform type * * http://www.w3.org/TR/SMIL/smil-extended-media-object.html#q32 - * + * + * */ transformPanZoom: function( smilImgElement, animateElement, animateTime ){ var begin = this.smil.parseTime( $j( animateElement ).attr( 'begin') ); @@ -131,6 +250,8 @@ // Get the target interpreted value var targetValue = this.getInterpolatePointsValue( animatePoints, relativeAnimationTime, duration ); + + //mw.log( "SmilAnimate::transformPanZoom: source points: " + $j( animateElement ).attr('values') + " target:" + targetValue.join(',') ); // Let Top Width Height // translate values into % values @@ -164,7 +285,8 @@ // xxx need to refactor move to "smilLayout" updateElementLayout: function( smilElement, percentValues ){ - mw.log("updateElementLayout::" + percentValues.top + ' ' + percentValues.left + ' ' + percentValues.width + ' ' + percentValues.height ); + //mw.log("updateElementLayout::" + percentValues.top + ' ' + percentValues.left + ' ' + percentValues.width + ' ' + percentValues.height ); + // get a pointer to the html target: var $target = $j( '#' + this.smil.getAssetId( smilElement )); @@ -209,7 +331,6 @@ 'top' : (-1 * percentValues['top'])*100 + '%', 'left' : (-1 * percentValues['left'])*100 + '%', } ); - }, /** Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -35,7 +35,7 @@ _this.getNodeSmilType( $node ) == 'ref' || _this.getNodeSmilType( $node ) == 'smilText' ) - ){ + ){ $node.attr('id', _this.smil.embedPlayer.id + '_ref_' + _this.idIndex ); mw.log('SmilBody:: gave: ' + $node.get(0).nodeName + ' id: ' + $node.attr('id') ); _this.idIndex++; @@ -52,23 +52,23 @@ /** * Render the body elements for a given time, use layout engine to draw elements */ - renderTime: function( time ){ + renderTime: function( time, deltaTime ){ var _this = this; // Get all the draw elements from the body this time: var elementList = this.getElementsForTime( time ); - mw.log("SmilBody::renderTime: draw " + elementList.length + " elementList" ); + //mw.log("SmilBody::renderTime: draw " + elementList.length + " elementList" ); $j.each( elementList , function( inx, smilElement ) { // xxx need to // var relativeTime = time - smilElement.parentTimeOffset; - var relativeTime = time - $j( smilElement ) .data ( 'parentStartOffset' ); + var relativeTime = time - $j( smilElement ).data ( 'parentStartOffset' ); // Render the active elements using the layout engine _this.smil.getLayout().drawElement( smilElement, relativeTime ); - // Transform the elements per animate engine - _this.smil.getAnimate().transformElement( smilElement, relativeTime ); - } ) + // Transform the elements per animate engine + _this.smil.getAnimate().animateTransform( smilElement, relativeTime, deltaTime ); + } ); }, /** @@ -139,7 +139,7 @@ // If the nodeType is "ref" add to this.elementsInRange array if( nodeType == 'ref' || nodeType == 'smilText' ) { // Add the parent startOffset - $node.data('parentStartOffset', startOffset ); + $node.data( 'parentStartOffset', startOffset ); // Ref type get the this.elementsInRange.push( $node ); //mw.log("Add ref to elementsInRange:: " + nodeType + " length:" + this.elementsInRange.length); Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js 2010-06-25 01:07:46 UTC (rev 68538) @@ -71,7 +71,7 @@ var regionId = $j( smilElement ).attr( 'region'); var nodeName = $j( smilElement ).get(0).nodeName ; - mw.log( "SmilLayout::drawElement: " + nodeName + '.' + $j( smilElement ).attr('id' ) + ' into ' + regionId ); + //mw.log( "SmilLayout::drawElement: " + nodeName + '.' + $j( smilElement ).attr('id' ) + ' into ' + regionId ); var $regionTarget = this.$rootLayout.find( '#' + regionId ); // Check for region target in $rootLayout Added: branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransition.html =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransition.html (rev 0) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransition.html 2010-06-25 01:07:46 UTC (rev 68538) @@ -0,0 +1,44 @@ +<!doctype html> +<html> +<head> + <title>Pan Zoom Example</title> + <script type="text/javascript" src="../../../mwEmbed.js?debug=true"></script> + <!-- <script type="text/javascript" src="../../ResourceLoader.php?class=window.jQuery,mwEmbed&debug=true"></script> --> + <script type="text/javascript"> + mw.setConfig( 'EmbedPlayer.OverlayControls', false ); + mw.ready(function(){ + $j( "#seekInputTime" ).blur( function(){ + var smilVid = $j('#panzoom').get(0); + $j('#seekInProgress').show(); + smilVid.setCurrentTime( parseFloat( $j(this).val() ), function(){ + $j('#seekInProgress').hide(); + }); + }); + }); + </script> +</head> +<body> +<h3>Sample playlist pan-zoom animation</h3> +<table> +<tr> +<td> + +<video id="panzoom" type="application/smil" src="panzoom/Fruits-4s.smil.xml" width="400" height="400"></video> +<p></p>seek to <input id="seekInputTime" size="4" value = "10"></input><span id="seekInProgress" style="display: none"> Seeking<blink>...</blink></span> +</td> +<td valign="top"> +Sample playlist code: +<div style="clear:both"></div> +<textarea style="width:500px;"> +<video id="panzoom" type="application/smil" src="panzoom/Fruits-4s.smil.xml" width="400" height="300"></video> +</textarea> +<div style="clear:both"></div> + +SMIL Source: +<div style="clear:both"></div> +<iframe style="width:500px;height:300px" src="panzoom/Fruits-4s.smil.xml"></iframe> +</td> +</tr> +</table> +</body> +</html> Copied: branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransitionSmil.xml (from rev 68460, branches/MwEmbedStandAlone/tests/media/sequence_transition_smil.xml) =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransitionSmil.xml (rev 0) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransitionSmil.xml 2010-06-25 01:07:46 UTC (rev 68538) @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<smil baseProfile="Language" version="3.0" xmlns="http://www.w3.org/ns/SMIL"> + <head> + <meta name="title" content="Simple Crossfading Example"/> + + <transition id="fromGreen" + type="fade" + subtype="fadeFromColor" + fadeColor="#87CF87" + dur="4s"/> + + <transition id="toGreen" + type="fade" + subtype="fadeToColor" + fadeColor="#87CF87" + dur="4s"/> + + <transition id="xFade" + type="fade" + subtype="crossfade" + dur="4s"/> + + </head> + <body> + <seq> + <ref type="text/html" dur="8" uri="Template:My_Video_Intro_Text"><![CDATA[ +<h3> <span class="mw-headline" id="cat">cat</span></h3> +<div class="thumb tright"><div class="thumbinner" style="width:102px;"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Nos_kota.jpg/120px-Nos_kota.jpg"></div></div> +<div style="color:gray"> MY Date: 21 January, 2010 00:45</div> + +]]><param name="videoTitle">cat</param><param name="MyDate">{{CURRENTDAY}} {{CURRENTMONTHNAME}}, {{CURRENTYEAR}} {{CURRENTTIME}}</param></ref> + + + <video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" + region="video_region" + transIn="fromGreen" + transOut="xFade" + type="video/ogg" + fill="transition" + durationHint="15" + dur="9s" + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" + /> + + <video src="http://upload.wikimedia.org/wikipedia/commons/0/0d/B-36_bomber.ogg" + region="video_region" + fill="transition" + dur="10s" + durationHint="70" + type="video/ogg" + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/B-36_bomber.ogg/mid-B-36_bomber.ogg.jpg" + /> + + <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/USS_Bunker_Hill_hit_by_two_Kamikazes.jpg/400px-USS_Bunker_Hill_hit_by_two_Kamikazes.jpg" + region="video_region" + dur="5s" + type="image/jpeg" + /> + + </seq> + + </body> +</smil> + + Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/tests/panzoom/Fruits-4s.smil.xml =================================================================== --- branches/MwEmbedStandAlone/modules/SmilPlayer/tests/panzoom/Fruits-4s.smil.xml 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/modules/SmilPlayer/tests/panzoom/Fruits-4s.smil.xml 2010-06-25 01:07:46 UTC (rev 68538) @@ -23,11 +23,14 @@ panZoom="0,0,100%,100%" region="image_region" src="fruitStand.jpg"> <animate attributeName="panZoom" begin="2.0" - dur="1.5s" fill="freeze" values="-1,4,99%,99%;511,509,47%,14%"/> + dur="1.5s" fill="freeze" values="-1,4,99%,99%;511,509,47%,14%"/> + <animate attributeName="panZoom" begin="5.0" dur="1.5s" fill="freeze" values="511,509,47%,14%;418,-3,34%,13%"/> + <animate attributeName="panZoom" begin="9.0" - dur="1.5s" fill="freeze" values="418,-3,34%,13%;9,1115,41%,20%"/> + dur="1.5s" fill="freeze" values="418,-3,34%,13%;9,1115,41%,20%"/> + <animate attributeName="panZoom" begin="13.0" dur="1.5s" fill="freeze" values="9,1115,41%,20%;573,2073,64%,17%"/> <animate attributeName="panZoom" begin="16.0" Deleted: branches/MwEmbedStandAlone/tests/media/sequence_transition_smil.xml =================================================================== --- branches/MwEmbedStandAlone/tests/media/sequence_transition_smil.xml 2010-06-25 01:02:45 UTC (rev 68537) +++ branches/MwEmbedStandAlone/tests/media/sequence_transition_smil.xml 2010-06-25 01:07:46 UTC (rev 68538) @@ -1,65 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<smil baseProfile="Language" version="3.0" xmlns="http://www.w3.org/ns/SMIL"> - <head> - <meta name="title" content="Simple Crossfading Example"/> - - <transition id="fromGreen" - type="fade" - subtype="fadeFromColor" - fadeColor="#87CF87" - dur="4s"/> - - <transition id="toGreen" - type="fade" - subtype="fadeToColor" - fadeColor="#87CF87" - dur="4s"/> - - <transition id="xFade" - type="fade" - subtype="crossfade" - dur="4s"/> - - </head> - <body> - <seq> - <ref type="text/html" dur="8" uri="Template:My_Video_Intro_Text"><![CDATA[ -<h3> <span class="mw-headline" id="cat">cat</span></h3> -<div class="thumb tright"><div class="thumbinner" style="width:102px;"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Nos_kota.jpg/120px-Nos_kota.jpg"></div></div> -<div style="color:gray"> MY Date: 21 January, 2010 00:45</div> - -]]><param name="videoTitle">cat</param><param name="MyDate">{{CURRENTDAY}} {{CURRENTMONTHNAME}}, {{CURRENTYEAR}} {{CURRENTTIME}}</param></ref> - - - <video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" - region="video_region" - transIn="fromGreen" - transOut="xFade" - type="video/ogg" - fill="transition" - durationHint="15" - dur="9s" - poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" - /> - - <video src="http://upload.wikimedia.org/wikipedia/commons/0/0d/B-36_bomber.ogg" - region="video_region" - fill="transition" - dur="10s" - durationHint="70" - type="video/ogg" - poster="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/B-36_bomber.ogg/mid-B-36_bomber.ogg.jpg" - /> - - <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/USS_Bunker_Hill_hit_by_two_Kamikazes.jpg/400px-USS_Bunker_Hill_hit_by_two_Kamikazes.jpg" - region="video_region" - dur="5s" - type="image/jpeg" - /> - - </seq> - - </body> -</smil> - - _______________________________________________ MediaWiki-CVS mailing list MediaWiki-CVS@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs