move pre-roll ad logic into it's designated video.js plugin

This commit is contained in:
DispatchCommit 2021-07-13 01:00:25 -07:00 committed by jessopb
parent 6e5e2b7578
commit d32af5606b
2 changed files with 61 additions and 58 deletions

View file

@ -1,10 +1,52 @@
// Created by xander on 6/21/2021
import videojs from 'video.js';
import 'videojs-contrib-ads';
import 'videojs-ima';
const VERSION = '0.0.1';
/* Macro provided by aniview
* const macroUrl =
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_URL=[URL_MACRO]` +
`&cb=[TIMESTAMP_MACRO]` +
`&AV_WIDTH=[WIDTH_MACRO]` +
`&AV_HEIGHT=[HEIGHT_MACRO]` +
`&AV_SCHAIN=[SCHAIN_MACRO]` +
`&AV_CCPA=[CCPA_MACRO]` +
`&AV_GDPR=[GDPR_MACRO]` +
`&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` +
`&skiptimer=5` +
`&logo=false` +
`&usevslot=true` +
`&vastretry=3` +
`&hidecontrols=false`;
* */
// TEST PRE-ROLL WITH THIS TAG:
// https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator=
// Modified to work with IMA
const macroUrl =
'https://vast.aniview.com/api/adserver61/vast/?AV_PUBLISHERID=60afcbc58cfdb065440d2426&AV_CHANNELID=60b354389c7adb506d0bd9a4&AV_URL=[URL_MACRO]&cb=[TIMESTAMP_MACRO]&AV_WIDTH=[WIDTH_MACRO]&AV_HEIGHT=[HEIGHT_MACRO]&AV_SCHAIN=[SCHAIN_MACRO]&AV_CCPA=[CCPA_MACRO]&AV_GDPR=[GDPR_MACRO]&AV_CONSENT=[CONSENT_MACRO]&skip=true&skiptimer=5&usevslot=true&hidecontrols=false';
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_URL=[URL]` +
`&cb=[CACHEBUSTING]` +
`&AV_WIDTH=[WIDTH]` +
`&AV_HEIGHT=[HEIGHT]` +
// `&AV_SCHAIN=[SCHAIN_MACRO]` +
// `&AV_CCPA=[CCPA_MACRO]` +
// `&AV_GDPR=[GDPR_MACRO]` +
// `&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` +
`&skiptimer=5` +
`&logo=true` +
`&usevslot=true` +
`&vastretry=5` +
`&hidecontrols=false`;
const defaults = {
adTagUrl: macroUrl,
@ -19,46 +61,24 @@ class AniviewPlugin extends Component {
super(player, options);
// Plugin started
if (options.debug) {
this.log(`Created aniview plugin.`);
}
if (options.debug) this.log(`Created aniview plugin.`);
// To help with debugging, we'll add a global vjs object with the video js player
window.aniview = player;
this.player = player;
const google = window.google;
player.ima({
// adTagUrl: macroUrl,
id: 'ad_content_video',
vpaidMode: google.ima.ImaSdkSettings.VpaidMode.INSECURE,
adTagUrl:
'https://vast.aniview.com/api/adserver61/vast/?AV_PUBLISHERID=60afcbc58cfdb065440d2426&AV_CHANNELID=60b354389c7adb506d0bd9a4',
});
// this.player.ads();
// const serverUrl = this.player.ads.adMacroReplacement(macroUrl);
// this.log(serverUrl);
// request ads whenever there's new video content
player.on('contentchanged', () => {
/* player.on('contentchanged', () => {
// in a real plugin, you might fetch your ad inventory here
player.trigger('adsready');
});
}); */
// Plugin event listeners
player.on('readyforpreroll', (event) => this.onReadyForPreroll(event));
// player.on('readyforpreroll', (event) => this.onReadyForPreroll(event));
}
onReadyForPreroll(event) {
this.player.ads.startLinearAdMode();
// play your linear ad content
// in this example, we use a static mp4
this.player.src('kitteh.mp4');
/* onReadyForPreroll(event) {
// send event when ad is playing to remove loading spinner
this.player.one('adplaying', () => {
this.player.trigger('ads-ad-started');
@ -68,7 +88,7 @@ class AniviewPlugin extends Component {
this.player.one('adended', () => {
this.player.ads.endLinearAdMode();
});
}
} */
log(...args) {
if (this.options_.debug) {
@ -90,6 +110,14 @@ const onPlayerReady = (player, options) => {
* @param {Object} [options={}]
*/
const plugin = function (options) {
const google = window.google;
this.ima({
// $FlowFixMe
vpaidMode: google.ima.ImaSdkSettings.VpaidMode.INSECURE,
adTagUrl: macroUrl,
});
this.ready(() => {
onPlayerReady(this, videojs.mergeOptions(defaults, options));
});

View file

@ -13,29 +13,9 @@ import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
import recsys from './plugins/videojs-recsys/plugin';
import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing';
import 'videojs-contrib-ads';
import 'videojs-ima';
// import aniview from './plugins/videojs-aniview/plugin';
import './plugins/videojs-aniview/plugin';
const isDev = process.env.NODE_ENV !== 'production';
const macroUrl =
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_URL=[URL_MACRO]` +
`&cb=[TIMESTAMP_MACRO]` +
`&AV_WIDTH=[WIDTH_MACRO]` +
`&AV_HEIGHT=[HEIGHT_MACRO]` +
`&AV_SCHAIN=[SCHAIN_MACRO]` +
`&AV_CCPA=[CCPA_MACRO]` +
`&AV_GDPR=[GDPR_MACRO]` +
`&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` +
`&skiptimer=5` +
`&logo=false` +
`&usevslot=true` +
`&vastretry=3` +
`&hidecontrols=false`;
export type Player = {
on: (string, (any) => void) => void,
@ -605,14 +585,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// pre-roll ads
// This must be initialized earlier than everything else
// otherwise a race condition occurs if we place this in the onReady call back
if (allowPreRoll && SIMPLE_SITE && window.google) {
const google = window.google;
// player.aniview();
vjs.ima({
// $FlowFixMe
vpaidMode: google.ima.ImaSdkSettings.VpaidMode.INSECURE,
adTagUrl: macroUrl,
});
// allow if isDev because otherwise you'll never see ads when basing to master
if ((allowPreRoll && SIMPLE_SITE) || isDev) {
vjs.aniview();
}
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)