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
![http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Nos_kota.jpg/120px-Nos_kota.jpg"](http://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Nos_kota.jpg/120px-Nos_kota.jpg"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg"](http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/B-36_bomber.ogg/mid-B-36_bomber.ogg.jpg"](http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/B-36_bomber.ogg/mid-B-36_bomber.ogg.jpg"){kind=link}
![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"](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"){kind=link}