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

Get Ortb Params #12

Merged
merged 18 commits into from
Feb 17, 2022
Merged

Get Ortb Params #12

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
883bb64
Videojs ortb params, added ortb constants
AnirudhRahul Jan 24, 2022
ac85e74
Fixed integration examples, ortb adjustments
AnirudhRahul Jan 24, 2022
6f4fb24
Cleaned up code added comments
AnirudhRahul Jan 24, 2022
612f037
Renamed test file
AnirudhRahul Jan 24, 2022
b4e4d55
Removed videojs mock in favor of videojs
AnirudhRahul Jan 24, 2022
4a4c6fe
Changed video source, finished tests for ortb
AnirudhRahul Jan 24, 2022
c835dfe
Cleaned up spacing added some comments
AnirudhRahul Jan 26, 2022
6e312d5
Added ad position to ortb
AnirudhRahul Jan 27, 2022
575f9d6
Cleaned up playback methods code
AnirudhRahul Jan 27, 2022
06b96ad
Omitted skip variable per ortb spec
AnirudhRahul Jan 27, 2022
dc2b6d1
Added unit tests for ima integration
AnirudhRahul Jan 28, 2022
d5127da
Added util function, and corresponding tests
AnirudhRahul Jan 28, 2022
5e7e904
Added code for placement
AnirudhRahul Jan 28, 2022
d39fb80
Linter pass through
AnirudhRahul Jan 28, 2022
bb7777a
Added videojs-ima to integration example
AnirudhRahul Jan 28, 2022
961ccce
Removed duplicate tests
AnirudhRahul Feb 16, 2022
c4cec43
Removed non bidding module tests
AnirudhRahul Feb 16, 2022
876536e
Added clarifying comments
AnirudhRahul Feb 16, 2022
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
17 changes: 7 additions & 10 deletions integrationExamples/videoModule/videojsAdapter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,15 @@
<h2>VideoJS Adapter Test</h2>

<h5>Div-1 existing Player</h5>
<div id='vid-div-1'>
<video class="video-js vjs-big-play-centered" data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
<source src="http://content.bitsontherun.com/videos/3XnJSIm4-52qL9xLP.mp4" type="video/mp4">
</video>
</div>

<video id='vid-div-1' class="video-js vjs-big-play-centered" data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

<h5>Div-2 existing player without automatic setup</h5>
<div id='vid-div-2'>
<video-js data-setup='{"controls": true}'>
<source src="http://content.bitsontherun.com/videos/3XnJSIm4-52qL9xLP.mp4" type="video/mp4">
</video-js>
</div>
<video-js id='vid-div-2' data-setup='{"controls": true}'>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video-js>

<h5>Div-3 controlled Player</h5>
<div id='vid-div-3'></div>
Expand Down
4 changes: 2 additions & 2 deletions modules/jwplayerVideoProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {
PROTOCOLS, API_FRAMEWORKS, VIDEO_MIME_TYPE, PLAYBACK_METHODS, PLACEMENT, VPAID_MIME_TYPE
PROTOCOLS, API_FRAMEWORKS, VIDEO_MIME_TYPE, PLAYBACK_METHODS, PLACEMENT, VPAID_MIME_TYPE, AD_POSITION
} from './videoModule/constants/ortb.js';
import {
SETUP_COMPLETE, SETUP_FAILED, DESTROYED, AD_REQUEST, AD_BREAK_START, AD_LOADED, AD_STARTED, AD_IMPRESSION, AD_PLAY,
Expand Down Expand Up @@ -103,7 +103,7 @@ export function JWPlayerProvider(config, jwplayer_, adState_, timeState_, callba
// only specify ad position when in Fullscreen since computational cost is low
// ad position options are listed in oRTB 2.5 section 5.4
// https://www.iab.com/wp-content/uploads/2016/03/OpenRTB-API-Specification-Version-2-5-FINAL.pdf
video.pos = 7; // TODO make constant in oRTB
video.pos = AD_POSITION.FULL_SCREEN; // TODO make constant in oRTB
}

const item = player.getPlaylistItem() || {}; // TODO does player call need optimization ?
Expand Down
22 changes: 22 additions & 0 deletions modules/videoModule/constants/ortb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,28 @@ export const PLACEMENT = {
INTERSTITIAL_SLIDER_FLOATING: 5
};

/*
ORTB 2.5 section 5.4 - Ad Position
*/
export const AD_POSITION = {
UNKOWN: 0,
ABOVE_THE_FOLD: 1,
BELOW_THE_FOLD: 3,
HEADER: 4,
FOOTER: 5,
SIDEBAR: 6,
FULL_SCREEN: 7
}

/*
ORTB 2.5 section 5.11 - Playback Cessation Modes
*/
export const PLAYBACK_END = {
VIDEO_COMPLETION: 1,
VIEWPORT_LEAVE: 2,
FLOATING: 3
}

/*
ORTB 2.5 section 5.10 - Playback Methods
*/
Expand Down
73 changes: 64 additions & 9 deletions modules/videojsVideoProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import {
PROTOCOLS, API_FRAMEWORKS, VIDEO_MIME_TYPE, PLAYBACK_METHODS, PLACEMENT, VPAID_MIME_TYPE, AD_POSITION, PLAYBACK_END
} from './videoModule/constants/ortb.js';
import { VIDEO_JS_VENDOR } from './videoModule/constants/vendorCodes.js';
import { videoVendorDirectory } from './videoModule/vendorDirectory.js';

Expand All @@ -15,7 +18,6 @@ export function VideojsProvider(config, videojs_, adState_, timeState_, callback
// TODO: come up with code for player absent
return;
}

playerVersion = videojs.VERSION;

if (playerVersion < minimumSupportedPlayerVersion) {
Expand All @@ -25,29 +27,82 @@ export function VideojsProvider(config, videojs_, adState_, timeState_, callback

// returns the player if it exists, or attempts to instantiate a new one
player = videojs(divId, playerConfig, function() {
// callback runs in both cases
// callback runs in both cases
});
// TODO: make sure ortb gets called in integration example
// currently testing with a hacky solution by hooking it to window
// window.ortb = this.getOrtbParams
}

function getId() {
return divId;
}

function getOrtbParams() {
if (!player) {
return null;
}

let playBackMethod = PLAYBACK_METHODS.CLICK_TO_PLAY
const isMuted = player.muted() || player.autoplay() === 'muted'; // todo autoplayAdsMuted only applies to preRoll
if (player.autoplay()) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

what does autoplay() return ? In the line above you compare it to a string. In this line you use it as a condition
I like truthy conditions, as long as it can be falsy.

Copy link
Collaborator

Choose a reason for hiding this comment

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

prefer vars over multiple function calls:

const autoplay = player.autoplay();
const isMuted = player.muted() || autoplay === 'muted'; // todo autoplayAdsMuted only applies to preRoll
    if (autoplay) {

it minifies better because method calls don't get minified.

playBackMethod = isMuted ? PLAYBACK_METHODS.AUTOPLAY_MUTED : PLAYBACK_METHODS.AUTOPLAY;
}
const supportedMediaTypes = Object.values(VIDEO_MIME_TYPE).filter(
// Follows w3 spec https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
type => player.canPlayType(type) !== ''
).concat([VPAID_MIME_TYPE])
Copy link
Collaborator

Choose a reason for hiding this comment

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

we might have to check that the ad providers can render VPAIDs. VPAIDs are ads that contain javascript. In a way it's more an embedded application than a video creative

const video = {
mimes: [],
w: 0,
h: 0,
mimes: supportedMediaTypes,
// Based on the protocol support provided by the videojs-ima plugin
// https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/compatibility
// Need to check for the plugins prescence by checking videojs.ima
protocols: videojs.ima ? [
PROTOCOLS.VAST_2_0,
] : [],
api: [
API_FRAMEWORKS.VPAID_2_0
karimMourra marked this conversation as resolved.
Show resolved Hide resolved
],
// TODO: Make sure this returns dimensions in DIPS
h: player.currentHeight(),
w: player.currentWidth(),
placement: PLACEMENT.IN_STREAM,
Copy link
Collaborator

Choose a reason for hiding this comment

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

could video.js ever be used only as an ads player ? If so it would be outstream. This distinction might also be missing in the jwplayer submodule since we do support an ads only mode.

// both linearity forms are supported
AnirudhRahul marked this conversation as resolved.
Show resolved Hide resolved
// sequence - TODO not yet supported
// battr: adConfig.battr, TODO: Not sure where this should be coming from
Copy link
Collaborator

Choose a reason for hiding this comment

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

just FYI this would probably have to be specified by the publisher or some content metadata. No need to worry about it for now

maxextended: -1,
boxingallowed: 1,
playbackmethod: [ playBackMethod ],
playbackend: PLAYBACK_END.VIDEO_COMPLETION,
skip: 1
AnirudhRahul marked this conversation as resolved.
Show resolved Hide resolved
AnirudhRahul marked this conversation as resolved.
Show resolved Hide resolved
};

const content = {};
if (player.isFullscreen()) {
// only specify ad position when in Fullscreen since computational cost is low
video.pos = AD_POSITION.FULL_SCREEN;
}
AnirudhRahul marked this conversation as resolved.
Show resolved Hide resolved

return {
video,
content
const content = {
// id:, TODO: find a suitable id for videojs sources
url: player.currentSrc()
};
// Only include length if player is ready
if (player.readyState() > 0) {
content.len = Math.round(player.duration());
}
const item = player.getMedia();
if (item) {
for (let param of ['album', 'artist', 'title']) {
AnirudhRahul marked this conversation as resolved.
Show resolved Hide resolved
if (item[param]) {
content[param] = item[param];
}
}
}

return {video, content};
}

// Plugins to integrate: https://github.com/googleads/videojs-ima
function setAdTagUrl(adTagUrl, options) {
}

Expand Down
Loading