Skip to content

Commit

Permalink
some improvement to timed text layout below video in fullscreen switch
Browse files Browse the repository at this point in the history 
ad timeline fixes
ad events demo page updates



git-svn-id: http://www.kaltura.org/kalorg/html5video/trunk/mwEmbed@1355 b58a29cf-3064-46da-94c6-1c29cc75c8e5
  • Loading branch information
@KalturaGitBot
KalturaGitBot committed Dec 19, 2010
1 parent c80129b commit 115aea1
Show file tree
Hide file tree
Showing 13 changed files with 257 additions and 233 deletions.
24 changes: 14 additions & 10 deletions modules/AdSupport/mw.AdTimeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
* // Set of ads to chose from
* 'ads' : [
* {
* 'id' : { Add id}
* 'id' : { Add id}
* 'companions' : [
* {
* 'id' : {Number} index of companion target
Expand All @@ -58,7 +58,7 @@
* 'html': {String} html
* }
* ]
* 'videoFile' : {URL} video file to play for the ad ( should pre-target the device )
* 'videoFile' : {URL} video file to play for the ad
* }
* ]
* // List of companion targets
Expand All @@ -73,10 +73,10 @@
*/
mw.addAdToPlayerTimeline = function( embedPlayer, timeType, adConf ) {
mw.log("AdTimeline::Add " + timeType + ' dispCof: ' + adConf );
if (!embedPlayer.playerTimeline) {
embedPlayer.playerTimeline = new mw.AdTimeline(embedPlayer);
if (!embedPlayer.adTimeline) {
embedPlayer.adTimeline = new mw.AdTimeline(embedPlayer);
}
embedPlayer.playerTimeline.addToTimeline(timeType, adConf)
embedPlayer.adTimeline.addToTimeline( timeType, adConf );
}

mw.AdTimeline = function(embedPlayer) {
Expand Down Expand Up @@ -203,7 +203,7 @@ mw.AdTimeline.prototype = {
var playedStart = false;
// Note there may be a better measurement of timeout
var adDuration = overlayTiming.timeout;
// Monitor will only be triggered while we are /NOT/ playback back media
// Monitor:
$j( _this.embedPlayer ).bind( 'monitorEvent', function() {
var time = _this.embedPlayer.currentTime;
if( !lastPlayEndTime ){
Expand All @@ -216,20 +216,23 @@ mw.AdTimeline.prototype = {
)
&& _this.adOverlaysEnabled
){
//mw.log("SHOULD DISPLAY: " + time +' >= ' + overlayTiming.start + ' || ' +
// lastPlayEndTime +' - ' + time + ' > ' + overlayTiming.frequency );
/*mw.log("SHOULD DISPLAY: " + time +' >= ' + overlayTiming.start + ' || ' +
lastPlayEndTime +' - ' + time + ' > ' + overlayTiming.frequency );
*/

if( !playedStart){
playedStart = true;
}
_this.adOverlaysEnabled = false;

// Display the overlay ad
_this.display( 'overlay' , function(){
lastPlayEndTime = _this.embedPlayer.currentTime
_this.adOverlaysEnabled = true;
}, adDuration);
}

//mw.log("SHOULD NOT display: " + time +' >= ' + overlayTiming.start + ' || ' +
//mw.log("SHOULD NOT display: adOver:" + _this.adOverlaysEnabled + ' time:' + time +' >= ' + overlayTiming.start + ' || ' +
// lastPlayEndTime +' - ' + time + ' > ' + overlayTiming.frequency );
});
}
Expand Down Expand Up @@ -332,9 +335,10 @@ mw.AdTimeline.prototype = {
displayTarget.playbackDone
);
}

// Check for companion ads:
if ( adConf.companions && adConf.companions.length ) {

var companionConf = this.selectFromArray( adConf.companions );

// NOTE:: is not clear from the ui conf response if multiple
Expand Down
57 changes: 30 additions & 27 deletions modules/AdSupport/tests/Ad_Events_test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,12 @@
<title></title>
</head>
<body>
<h1>
HTML5 ad timeline test
</h1>
<div style="width:680">
<div class="playerContainer" style="float:left;width:480px">
<video persistentNativePlayer="true" id="vid1" width="480" height="267"
<div class="playerContainer" style="float:left;width:480px;top:0px;left:0px;position:absolute;">
<video class="persistentNativePlayer" id="vid1" width="480" height="267"
poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
durationHint="33"
controls>
>
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" />
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" />
</video>
Expand All @@ -23,6 +20,9 @@ <h1>
</div>
</div>
<div style="clear:both"></div>
<h1>
HTML5 ad timeline test
</h1>
<br>Preroll video (30 seconds fish) <input id="preroll" type="text" size="40" value="http://cdn.kaltura.com/p/423851/sp/42385100/flvclipper/entry_id/1_8c3s1pvx/flavor/1_5slf6gab/a.mp4?novar=0"></input>
<a id="addPrerool" href="#">Update preroll video</a>
</br>
Expand Down Expand Up @@ -57,18 +57,18 @@ <h1>

// Alternativly to the monitorEvent you can use the mobileAdTimeline helper
// See structure of ad JSON in mw.MobileAdTimeline
mw.load( "mw.MobileAdTimeline", function(){
mw.load( "mw.AdTimeline", function(){

var updatePreRool = function( preRollUrl ){
mw.addAdToPlayerTimeline( embedPlayer, 'preroll',
{
'ads': [
{
'videoFile' : preRollUrl,
'companions:': [
'companions': [
{
'id' : 1, // tragicly someone set this up to start at 1 instead of 0 :(
'html' : '<div style="background-color:blue">Fish companion Ad</div>'
'id' : 0,
'html' : '<div style="background-color:#99F">Fish companion Ad</div>'
}
]
}
Expand All @@ -94,23 +94,26 @@ <h1>
// Insert the overlay video
mw.addAdToPlayerTimeline( embedPlayer, 'overlay',
{
'ads': {
'frequency' : 10,
'timeout' : 5,
'companions:': [
{
'id' : 1, // tragicly someone set this up to start at 1 instead of 0 :(
'html' : '<div style="background-color:red">Overlay Companion</div>'
}
],
'nonLinear': [
{
'width' : 320,
'height' : 30,
'html' : '<div style="width:100%;height:100%;background-color:gray"> overlay ad </div>'
}
]
},
'ads': [
{
'companions': [
{
'id' : 1,
'html' : '<div style="background-color:#F99">Overlay Companion</div>'
}
],
'nonLinear': [
{
'width' : 320,
'height' : 30,
'html' : '<div style="width:100%;height:100%;background-color:gray;font-size:large"> overlay Ad </div>'
}
]
}
],
'start' : 5,
'frequency' : 10,
'timeout' : 5,
'companionTargets': [
{
'elementid':'companionTarget'
Expand Down
86 changes: 28 additions & 58 deletions modules/EmbedPlayer/mw.EmbedPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,6 @@ EmbedPlayerManager.prototype = {
* are called;
*
* _this.checkPlayerSources()
* _this.checkForTimedText() // TODO Should be moved to TimedText module!!!
* _this.setupSourcePlayer()
* _this.inheritEmbedPlayer()
* _this.selectedPlayer.load()
Expand Down Expand Up @@ -1269,8 +1268,8 @@ mw.EmbedPlayer.prototype = {
// being updated)
'thumbnail_updating' : false,

// Thumbnail display flag
'thumbnail_disp' : true,
// Poster display flag
'posterDisplayed' : true,

// Local variable to hold CMML meeta data about the current clip
// for more on CMML see: http://wiki.xiph.org/CMML
Expand All @@ -1297,6 +1296,9 @@ mw.EmbedPlayer.prototype = {
,
// if player events should be Propagated
'_propagateEvents': true,

// If the onDone interface should be displayed
'onDoneInterfaceFlag': true,


/**
Expand Down Expand Up @@ -1599,7 +1601,7 @@ mw.EmbedPlayer.prototype = {
// callback
// Run embedPlayer sources hook
$j( _this ).triggerQueueCallback( 'checkPlayerSourcesEvent', function(){
_this.checkForTimedText();
_this.setupSourcePlayer();
});
};

Expand Down Expand Up @@ -1705,38 +1707,6 @@ mw.EmbedPlayer.prototype = {
});
},

/**
* Check if we should load the timedText interface or not.
*
* Note we check for text sources outside of
*/
isTimedTextSupported: function() {
// Check for timed text sources or api/ roe url
if ( ( this.roe || this.apiTitleKey ||
this.mediaElement.textSourceExists() ) ) {
return true;
} else {
return false;
}
},

/**
* Check for timed Text support and load necessary libraries
*/
checkForTimedText: function( ) {
var _this = this;
mw.log( 'EmbedPlayer::checkForTimedText: ' + _this.id );
// Check for timedText support
if( this.isTimedTextSupported() ) {
mw.load( 'TimedText', function() {
$j( '#' + _this.id ).timedText();
_this.setupSourcePlayer();
});
return ;
}
_this.setupSourcePlayer();
},

/**
* Set up the select source player
*
Expand Down Expand Up @@ -1986,9 +1956,12 @@ mw.EmbedPlayer.prototype = {
// Run the ended trigger ( allow the ended object to prevent default
// actions )
mw.log("EmbedPlayer::onClipDone:Trigger ended");
$j( this ).trigger( 'ended', onDoneActionObject );

if( onDoneActionObject.runBaseControlDone ){

this.tempDisableEvents();
// TOOD we should improve the end event flow
$j( this ).trigger( 'ended' );

if( this.onDoneInterfaceFlag ){

// Check if we have the "loop" property set
if( this.loop ) {
Expand Down Expand Up @@ -2021,7 +1994,7 @@ mw.EmbedPlayer.prototype = {
*/
showThumbnail: function() {
var _this = this;
mw.log( 'EmbedPlayer::showThumbnail' + this.thumbnail_disp );
mw.log( 'EmbedPlayer::showThumbnail' + this.posterDisplayed );

// Close Menu Overlay:
this.controlBuilder.closeMenuOverlay();
Expand All @@ -2030,7 +2003,7 @@ mw.EmbedPlayer.prototype = {
this.updatePosterHTML();

this.paused = true;
this.thumbnail_disp = true;
this.posterDisplayed = true;
// Make sure the controlBuilder bindings are up-to-date
this.controlBuilder.addControlBindings();

Expand Down Expand Up @@ -2063,7 +2036,6 @@ mw.EmbedPlayer.prototype = {
'width' : this.width + 'px',
'height' : this.height + 'px',
'position' : 'relative',
'background' : '#000'
})
)
// position the "player" absolute inside the relative interface
Expand Down Expand Up @@ -2268,7 +2240,7 @@ mw.EmbedPlayer.prototype = {
if ( this.thumbnail_updating == true )
$j( '#new_img_thumb_' + this.id ).stop().remove();

if ( this.thumbnail_disp ) {
if ( this.posterDisplayed ) {
mw.log( 'set to thumb:' + src );
this.thumbnail_updating = true;
$j( this ).append(
Expand Down Expand Up @@ -2672,19 +2644,16 @@ mw.EmbedPlayer.prototype = {
this.controlBuilder.closeMenuOverlay();

// Check if thumbnail is being displayed and embed html
if ( this.thumbnail_disp ) {
if ( this.posterDisplayed ) {
if ( !this.selectedPlayer ) {
this.showPluginMissingHTML();
return;
} else {
this.thumbnail_disp = false;
// hide any button if present:
this.posterDisplayed = false;
// Hide any button if present:
this.$interface.find( '.play-btn-large' ).remove();
this.doEmbedHTML();
}
} else {
// the plugin is already being displayed
this.seeking = false;
}

// If we previously finished playing this clip run the "replay hook"
Expand Down Expand Up @@ -2771,9 +2740,11 @@ mw.EmbedPlayer.prototype = {
.attr( 'title', gM( 'mwe-embedplayer-play_clip' ) );
},

/**
* Disable event _propagateEvents for 10ms ( helps avoid event stacking )
*/
tempDisableEvents: function(){
var _this = this;
// Disable event _propagateEvents for 10ms ( avoid pause play trigger stacking )
this._propagateEvents = false;
setTimeout( function(){
_this._propagateEvents = true;
Expand Down Expand Up @@ -2806,6 +2777,8 @@ mw.EmbedPlayer.prototype = {
// Reset current time and prev time and seek offset
this.currentTime = this.previousTime = this.serverSeekTime = 0;

this.stopMonitor();

// Issue pause to update interface (only call this parent)
if( !this.paused ){
this.paused = true;
Expand All @@ -2832,8 +2805,6 @@ mw.EmbedPlayer.prototype = {
mw.log("EmbedPlayer::Stop:: Reset play head")
this.updatePlayHead( 0 );

// Bind play-btn-large play
//this.addPlayBtnLarge();
}
},

Expand Down Expand Up @@ -2949,7 +2920,7 @@ mw.EmbedPlayer.prototype = {
* @return {Boolean} true if playing false if not playing
*/
isPlaying : function() {
if ( this.thumbnail_disp ) {
if ( this.posterDisplayed ) {
// in stopped state
return false;
} else if ( this.paused ) {
Expand All @@ -2975,16 +2946,16 @@ mw.EmbedPlayer.prototype = {
* @return {Boolean} true if stopped false if playing
*/
isStopped: function() {
return this.thumbnail_disp;
return this.posterDisplayed;
},

// TODO temporary hack we need a better stop monitor system
stopMonitor: function(){
this.thumbnail_disp = true;
clearInterval( this.monitorInterval );
this.monitorInterval = 0;
},
// TODO temporary hack we need a better stop monitor system
startMonitor: function(){
this.thumbnail_disp = false;
this.monitor();
},

Expand Down Expand Up @@ -3117,8 +3088,7 @@ mw.EmbedPlayer.prototype = {
}
} else {
// If stopped "stop" monitor:
clearInterval( this.monitorInterval );
this.monitorInterval = 0;
this.stopMonitor();
}

// mw.log('trigger:monitor:: ' + this.currentTime );
Expand Down
Loading

0 comments on commit 115aea1

Please sign in to comment.