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.

Sign up for GitHub

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

Improve support for linear ads (fixes #1746) #1749

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Improve support for linear ads (fixes #1746) #1749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion src/js/plugins/ads.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,11 +325,28 @@ class Ads {

// Start countdown
this.pollCountdown(true);

if (!ad.isLinear()) {
// Position AdDisplayContainer correctly for overlay
ad.width = container.offsetWidth;
ad.height = container.offsetHeight;
if(ad.getDuration() == -1){
//means a banner under page
this.elements.container.style.zIndex = 3;
//stop countdown don't need it any more
this.pollCountdown();
//adjust height of location sho controls remain usable
//maybe need nicer names for it...
if(ad.width > 480){
var controlHeight = 40;
}else{
var controlHeight = 60;
}
Comment on lines +340 to +344
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these standard heights?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I Couldn't find the current height of the control bar how ever this value will result the advertisment above the controls.

http://mol-clan.nl/dump/plyrads.png

Maybe the best would be if course it moves up when the controls are in screen.

this.elements.container.style.zIndex = 3;
Means the controls are not usable any more..

Maybe the the div in side the .plyr__ads needs a z-index instead of the .plyr_ads div to solve the problem prefectly

Also on resize (full screen or back the banner will drop down to the bottom edge...)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm are the controls even needed for those ads? They should be hidden I'd say? Where did you get the tag from to test this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the following page you have multiple versions...
https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags

When search on google IMA test tags it is the first result.

The current one I am using is the Non Linear one

https://pubads.g.doubleclick.net/gampad/ads?sz=480x70&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dnonlinear&correlator=

If needed I have also a few testing tags running on a website for banners acting like a preroll and mulitple test tags from ad providers.

In this case the video is just playing normally so to control the video it self you will need controls.

Those ads are comparable with ads during video play on Youtube.

Maybe a wise idea to add a test page for easy testing ad related items
Made this in the. past for VideoJS
http://mol-clan.nl/videojs-test/?vasttag=8

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also for me personally this behaviour would be the best:
http://mol-clan.nl/videojs-test/?vasttag=8

When the controls are hidden it should be hidden again

See my screen recording
http://mol-clan.nl/dump/recording.mov


ad.height = container.offsetHeight - controlHeight;
//adjust them
this.elements.displayContainer.setSize(ad.width,ad.height);
}
}

// console.info('Ad type: ' + event.getAd().getAdPodInfo().getPodIndex());
Expand Down
7 changes: 5 additions & 2 deletions src/sass/plugins/ads.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
width: 100%;
}

// The countdown label
// The countdown label hide it by default
&::after {
background: rgba($plyr-color-gray-9, 0.8);
border-radius: 2px;
Expand All @@ -34,8 +34,11 @@
position: absolute;
right: $plyr-control-spacing;
z-index: 3;
display: none;
}
&[data-badge-text]:after{
display: block;
}

&::after:empty {
display: none;
}
Expand Down