Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Landing page in instream #103

Merged
merged 4 commits into from Mar 28, 2018
Merged

Landing page in instream #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3585834
Landing page in instream
cian-exads Mar 27, 2018
aa9b5ed
Landing page default text
cian-exads Mar 27, 2018
60ce6e1
Post review changes
cian-exads Mar 28, 2018
1f6dad1
Merge branch 'master' into FEATURE-3814
cian-exads Mar 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 25 additions & 12 deletions fluidplayer.css
View file
Open in desktop
Expand Up @@ -202,14 +202,10 @@
position:absolute;
bottom: 50px;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.7);
padding: 13px 21px 13px 21px;
}

.skip_button:not(.skip_button_disabled):hover {
border: 1px solid #ffffff;
}

.skip_button, .skip_button a {
color:#ffffff;
text-decoration: none;
Expand Down Expand Up @@ -298,26 +294,28 @@

.fluid_ad_cta {
position:absolute;
bottom: 50px;
background-color: rgba(0, 0, 0, 0.8);
right: 0px;
bottom: 100px;
background-color: rgba(0, 0, 0, 0.7);
color:#ffffff;
font-size: 13px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-align: start;
text-align: right;
cursor: pointer;
z-index: 10;
padding: 13px 21px 13px 21px;
padding: 13px 21px 13px 13px;
}

.fluid_ad_cta a {
text-decoration: none;
color: #ffffff;
line-height: 18px;
}

.fluid_ad_cta:hover {
background-color: #000000;
border: 1px solid #ffffff;
.fluid_ad_cta:hover,
.skip_button:not(.skip_button_disabled):hover {
background-color: rgba(0, 0, 0, 1);
}

.fluid_html_on_pause {
Expand Down Expand Up @@ -901,6 +899,21 @@ _:-ms-lang(x),
transform: translate(-50%);
}

.add_icon_clickthrough {
color: #F2C94C;
line-height:18px;
}

.add_icon_clickthrough:before {
background: url('images/fluid_icons.svg') no-repeat;
height: 18px;
width: 18px;
top: 30px;
padding: 1px 22px 0px 0px;
content: "";
background-position: -162px -57px;
}

.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate,
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source,
Expand Down
35 changes: 25 additions & 10 deletions fluidplayer.js
View file
Open in desktop
Expand Up @@ -297,6 +297,16 @@ var fluidPlayerClass = {
return fallbackMediaFile;
},

getIconClickFromLinear: function (linear) {
var iconClickThrough = linear.getElementsByTagName('IconClicks');

if (iconClickThrough.length) {
return iconClickThrough[0].getElementsByTagName('IconClickThrough')[0].innerHTML;
}

return '';
},

getStaticResourceFromNonLinear: function(linear) {
var fallbackStaticResource;
var staticResources = this.getStaticResourcesFromNonLinear(linear);
Expand Down Expand Up @@ -551,7 +561,7 @@ var fluidPlayerClass = {

if (!player.vastOptions || typeof this.vastOptions.errorUrl === 'undefined') {
player.announceLocalError(errorCode);
} else{
} else {
player.announceError(errorCode);
}

Expand Down Expand Up @@ -635,10 +645,15 @@ var fluidPlayerClass = {
tmpOptions.clicktracking = player.getClickTrackingEvents(creativeLinear);
tmpOptions.duration = player.getDurationFromLinear(creativeLinear);
tmpOptions.mediaFile = player.getMediaFileFromLinear(creativeLinear);
tmpOptions.iconClick = player.getIconClickFromLinear(creativeLinear);

player.registerTrackingEvents(creativeLinear, tmpOptions);
}

if ((typeof tmpOptions.iconClick !== 'undefined') && (tmpOptions.iconClick !== null) && tmpOptions.iconClick.length) {
player.adList[adListId].landingPage = tmpOptions.iconClick;
}

var arrayCreativeNonLinears = creative[0].getElementsByTagName('NonLinearAds');

if ((typeof arrayCreativeNonLinears !== 'undefined') && (arrayCreativeNonLinears !== null) && arrayCreativeNonLinears.length) {
Expand Down Expand Up @@ -713,7 +728,7 @@ var fluidPlayerClass = {
}


var playVideoPlayer = function() {
var playVideoPlayer = function(adListId) {
player.switchPlayerToVastMode = function() {
//Get the actual duration from the video file if it is not present in the VAST XML
if (!player.vastOptions.duration) {
Expand All @@ -725,7 +740,7 @@ var fluidPlayerClass = {
player.addSkipButton();
}

player.addCTAButton();
player.addCTAButton(player.adList[adListId].landingPage);

player.addAdCountdown();

Expand Down Expand Up @@ -1408,7 +1423,7 @@ var fluidPlayerClass = {
}
},

addCTAButton: function() {
addCTAButton: function(landingPage) {
if (!this.displayOptions.vastOptions.adCTAText) {
return;
}
Expand All @@ -1422,7 +1437,7 @@ var fluidPlayerClass = {
var link = document.createElement('a');
link.href = player.vastOptions.clickthroughUrl;
link.target = '_blank';
link.innerText = this.displayOptions.vastOptions.adCTAText;
link.innerHTML = this.displayOptions.vastOptions.adCTAText + "<br/><span class=\"add_icon_clickthrough\">" + landingPage + "</span>";
link.onclick = function() {
if (!videoPlayerTag.paused) {
videoPlayerTag.pause();
Expand Down Expand Up @@ -1998,7 +2013,7 @@ var fluidPlayerClass = {
if (!initiallyPaused) {
videoPlayerTag.play();
}
// Waut till video played then reenable the animations
// Wait till video played then reenable the animations
if (player.initialAnimationSet) {
setTimeout(function() { player.displayOptions.layoutControls.playPauseAnimation = player.initialAnimationSet; }, 200);
}
Expand Down Expand Up @@ -2348,8 +2363,6 @@ var fluidPlayerClass = {
}
}

player.initHtmlOnPauseBlock();

player.toggleOnPauseAd();

} else {
Expand Down Expand Up @@ -2621,6 +2634,8 @@ var fluidPlayerClass = {
var initiateVolumebarTimerId = setInterval(initiateVolumebar, 100);
}

player.initHtmlOnPauseBlock();

player.setCustomControls();

player.setupThumbnailPreview();
Expand Down Expand Up @@ -3427,7 +3442,7 @@ var fluidPlayerClass = {
player.timerPool = {};
player.adList = {};
player.adPool = {};
player.availableRolls = ['preRoll', 'midRoll', 'postRoll'];
player.availableRolls = ['preRoll', 'midRoll', 'postRoll', 'onPauseRoll'];
player.supportedNonLinearAd = ['300x250', '468x60', '728x90'];
player.autoplayAfterAd = true;
player.nonLinearDuration = 15;
Expand Down Expand Up @@ -3482,7 +3497,7 @@ var fluidPlayerClass = {
skipButtonCaption: 'Skip ad in [seconds]',
skipButtonClickCaption: 'Skip ad <span class="skip_button_icon"></span>',
adText: null,
adCTAText: null, //Remove
adCTAText: 'Visit now!',
vastTimeout: 5000,

vastAdvanced: {
Expand Down