Skip to content

Commit

Permalink
framework retooling to support more fine grain control over iPad over…
Browse files Browse the repository at this point in the history 
…lay system ( ie iPad can display overlays only if included in the page before DOM ready )

git-svn-id: http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed@1204 b58a29cf-3064-46da-94c6-1c29cc75c8e5
  • Loading branch information
@KalturaGitBot
KalturaGitBot committed Nov 18, 2010
1 parent 2c34102 commit 7c6152d
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 196 deletions.
173 changes: 94 additions & 79 deletions modules/EmbedPlayer/mw.EmbedPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2034,6 +2034,7 @@ mw.EmbedPlayer.prototype = {
* Show the player
*/
showPlayer : function () {

mw.log( 'EmbedPlayer:: Show player: ' + this.id + ' interace: w:' + this.width + ' h:' + this.height );
var _this = this;
// Set-up the local controlBuilder instance:
Expand All @@ -2056,14 +2057,26 @@ mw.EmbedPlayer.prototype = {
// position the "player" absolute inside the relative interface
// parent:
.css('position', 'absolute');
}

}
// Set up local jQuery object reference to "mwplayer_interface"
this.$interface = $j( this ).parent( '.mwplayer_interface' );

// if a isPersistentNativePlayer ( overlay the controls )
if( this.isPersistentNativePlayer() ){
this.$interface.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'background': null
})
$j(this).show();
this.controls = true;
}

// Update Thumbnail for the "player"
this.updatePosterHTML();

// Add controls if enabled:
if ( this.controls ) {
this.controlBuilder.addControls();
Expand Down Expand Up @@ -2296,33 +2309,36 @@ mw.EmbedPlayer.prototype = {
var thumb_html = '';
var class_atr = '';
var style_atr = '';



if( this.useNativePlayerControls() ){
this.showNativePlayer();
return ;
}

// Set by default thumb value if not found
var posterSrc = ( this.poster ) ? this.poster :
mw.getConfig( 'imagesPath' ) + 'vid_default_thumb.jpg';

// Poster support is not very consistent in browsers
// use a jpg poster image:
$j( this ).html(
$j( '<img />' )
.css({
'position' : 'relative',
'width' : '100%',
'height' : '100%'
})
.attr({
'id' : 'img_thumb_' + this.id,
'src' : posterSrc
})
.addClass( 'playerPoster' )
);

// Update PersistentNativePlayer poster:
if( this.isPersistentNativePlayer() ){
$j( '#' + this.pid ).attr('poster', posterSrc);
} else {
// Poster support is not very consistent in browsers
// use a jpg poster image:
$j( this ).html(
$j( '<img />' )
.css({
'position' : 'relative',
'width' : '100%',
'height' : '100%'
})
.attr({
'id' : 'img_thumb_' + this.id,
'src' : posterSrc
})
.addClass( 'playerPoster' )
);
}
if ( this.controls
&& this.height > this.controlBuilder.getComponentHeight( 'playButtonLarge' )
) {
Expand All @@ -2340,21 +2356,34 @@ mw.EmbedPlayer.prototype = {
* @returns boolean true if the mwEmbed player interface should be used
* false if the mwEmbed player interface should not be used
*/
useNativePlayerControls: function() {
useNativePlayerControls: function() {
if( this.usenativecontrols === true ){
return true;
}

}
if( mw.getConfig('EmbedPlayer.NativeControls') === true ) {
return true;
}
if( mw.getConfig('EmbedPlayer.NativeControlsMobileSafari' ) &&
mw.isHTML5FallForwardNative()
){

// Do some device detection devices that don't support overlays
// and go into full screen once play is clicked:
if( mw.isAndroid2() || mw.isIpod() || mw.isIphone() ){
return true;
}
// ( iPad can use html controls if its a persistantPlayer in the dom before loading )
// else it needs to use native controls:
if( mw.isIpad() ){
if( this.isPersistentNativePlayer() ){
return false;
} else {
return true;
}
}
return false;
},

isPersistentNativePlayer: function(){
return $j('#' + this.pid ).hasClass('persistentNativePlayer');
},


/**
Expand All @@ -2366,62 +2395,46 @@ mw.EmbedPlayer.prototype = {
*/
showNativePlayer: function(){
var _this = this;
// Empty the player
$j(this).empty();

// Empty the player of any child nodes
$j(this).empty();

// Remove the player loader spinner if it exists
$j('#loadingSpinner_' + this.id ).remove();


// Check if we need to refresh mobile safari
var mobileSafariNeedsRefresh = false;

// Unhide the original video element if not part of a playerThemer embed
if( !$j( '#' + this.pid ).hasClass('PlayerThemer') ){
$j( '#' + this.pid )
.css( {
'position' : 'absolute'
} )
.show()
.attr('controls', 'true');

mobileSafariNeedsRefresh = true;
}

// iPad does not handle video tag update for attributes like "controls"
// so we have to do a full replace ( if controls are not included
// initially )
if( mw.isHTML5FallForwardNative() && mobileSafariNeedsRefresh ) {
var source = this.mediaElement.getSources( 'video/h264' )[0];
// XXX note this should be updated once mobile supports h.264
if( !source || !source.src ){
mw.log( 'Warning: Your probably fakeing the iPhone userAgent ( no h.264 source )' );
source = this.mediaElement.getSources( 'video/ogg' )[0];
}

var videoAttribues = {
'id' : _this.pid,
'poster': _this.poster,
'src' : source.src,
'controls' : 'true'
}

if( this.loop ){
videoAttribues[ 'loop' ] = 'true';
}
var cssStyle = {
'width' : _this.width,
'height' : _this.height
};
$j( '#' + this.pid ).replaceWith(
_this.getNativePlayerHtml( videoAttribues, cssStyle )
)
// Bind native events:
this.applyMediaElementBindings();
}
// Setup the source
var source = this.mediaElement.getSources( 'video/h264' )[0];
// Support fake user agent
if( !source || !source.src ){
mw.log( 'Warning: Your probably fakeing the iPhone userAgent ( no h.264 source )' );
source = this.mediaElement.getSources( 'video/ogg' )[0];
}

// Setup videoAttribues
var videoAttribues = {
'poster': _this.poster,
'src' : source.src,
'controls' : 'true'
}
if( this.loop ){
videoAttribues[ 'loop' ] = 'true';
}
var cssStyle = {
'width' : _this.width,
'height' : _this.height
};

// If not a persistentNativePlayer swap the video tag
// completely instead of just updating properties:
$j( '#' + this.pid ).replaceWith(
_this.getNativePlayerHtml( videoAttribues, cssStyle )
)

// Bind native events:
this.applyMediaElementBindings();

// Android only can play with a special play button ( no native controls
// in the dom , and no auto-play )
// and only with 'native display'
// persistentNativePlayer has no controls:
if( mw.isAndroid2() ){
this.addPlayBtnLarge();
}
Expand Down Expand Up @@ -2673,6 +2686,8 @@ mw.EmbedPlayer.prototype = {
return;
} else {
this.thumbnail_disp = false;
// hide any button if present:
this.$interface.find( '.play-btn-large' ).remove();
this.doEmbedHTML();
}
} else {
Expand Down
24 changes: 19 additions & 5 deletions modules/EmbedPlayer/mw.EmbedPlayerNative.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,15 @@ mw.EmbedPlayerNative = {
* Updates the supported features given the "type of player"
*/
updateFeatureSupport: function(){
// iWhatever devices appear to have a broken
// dom overlay implementation of video atm. (hopefully iphone OS 4 fixes this )
if( mw.isHTML5FallForwardNative() ) {
// The native controls function checks for overly support
// especially the special case of iPad in-dom or not support
if( this.useNativePlayerControls() ) {
this.supports.overlays = false;
this.supports.volumeControl = false;
}
// iOS does not support volume control ( only iPad can have controls )
if( mw.isIpad() ){
this.supports.volumeControl = false;
}
},

Expand All @@ -89,8 +94,17 @@ mw.EmbedPlayerNative = {
mw.log( "native play url:" + this.getSrc() + ' startOffset: ' + this.start_ntp + ' end: ' + this.end_ntp );

// Check if using native controls and already the "pid" is already in the DOM
if( this.useNativePlayerControls() && $j( '#' + this.pid ).length &&
typeof $j( '#' + this.pid ).get(0).play != 'undefined' ) {
if( ( this.useNativePlayerControls()
||
this.isPersistentNativePlayer()
)
&& $j( '#' + this.pid ).length
&& typeof $j( '#' + this.pid ).get(0).play != 'undefined' ) {

// Update the player source:
$j( '#' + this.pid ).attr('src', this.getSrc() );
$j( '#' + this.pid ).get(0).load();

_this.postEmbedJS();
return ;
}
Expand Down
2 changes: 0 additions & 2 deletions modules/KalturaPlymedia/tests/Plymedia_Playerfallforward.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ <h2> Fall forward Plymedia </h2>
The following flash embed includes timed text which will be on top of the player
<a href="?forceMobileHTML5"> Force Mobile HTML5</a> for testing with desktop chrome and safari.
<br />

<object width="656" height="398" type="application/x-shockwave-flash" id="kaltura_player" name="kaltura_player" data="http://www.kaltura.com/index.php/kwidget/cache_st/1270181229/wid/_192572/uiconf_id/1703742/entry_id/0_l2k0qf53"><param name="bgcolor" value="#000000"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="allownetworking" value="all"><param name="flashvars" value="externalInterfaceDisabled=false&amp;streamerType=rtmp&amp;streamerUrl=rtmp://rtmpakmi.kaltura.com/ondemand&amp;rtmpFlavors=1&amp;autoPlay=true"></object>

</body>
</html>
Loading

0 comments on commit 7c6152d

Please sign in to comment.