Skip to content

feat(docs): interactive ads playground demo page - #1084

Open
tsi wants to merge 8 commits into
masterfrom
feat/ads-playground
Open

feat(docs): interactive ads playground demo page#1084
tsi wants to merge 8 commits into
masterfrom
feat/ads-playground

Conversation

@tsi

@tsi tsi commented Sep 2, 2026

Copy link
Copy Markdown
Collaborator

Summary

Adds a standalone, shareable Ads Playground page so customer-facing teams can demo client-side ad insertion (Google IMA) without touching code — requested by Raz for the FT opportunity.

Jira: VIDEO-21179

The page (docs/ads-playground.html)

  • Preset ad scenarios built on Google's public IMA sample tags: pre-roll, VMAP pre-only, pre+mid+post, ad pods, post-roll, VPAID, and a broken tag for error-handling demos — plus a custom ad tag field.
  • Source picker: sample-video thumbnails, custom public ID / cloud name, or playlist-by-tag mode.
  • Controls for every supported ads option (adTagUrl, showCountdown, adLabel, locale, prerollTimeout, postrollTimeout, adsInPlaylist, debug).
  • Live ad-event log, copyable player-init snippet, and settings round-tripped through the URL for shareable demo links.
  • Deliberately not linked from the examples index — it's a sales/demo tool, not a developer example.
  • Self-contained CSS (design tokens from recent Cloudinary demo pages), no new dependencies.

Player fix (src/plugins/ima/index.js)

  • The plugin read playerOptions.ads.denug (typo), so ads.debug never reached videojs-ima. Fixed, and debug + autoPlayAdBreaks are now declared in configSchema.json and validators.
  • New unit tests cover the plugin's option mapping (would have caught the typo).

Review-time artifacts

specs/ads-playground/ (spec + decision log) ships in this PR for review context and will be removed from the branch before merge.

Testing

  • test/unit/ima-plugin-options.test.js — 4 tests passing.
  • Manual pass in Chrome against real Google sample tags (pre/mid/post-roll, pods, error tag), single + playlist modes, URL share round-trip, 375px/1440px layouts.
  • Note for local testing: some Chrome setups block IMA ad requests from plain-http origins — serve over https (npx webpack serve --config webpack/dev.config.js --server-type https --port 3443). The deployed docs site is https, so this doesn't affect the hosted page; the page's error notice now hints at this on http origins.

tsi added 3 commits September 2, 2026 10:10
The plugin read playerOptions.ads.denug (typo), so ads.debug never reached
videojs-ima. Fix the typo, add debug and autoPlayAdBreaks to the config
schema and validators, and cover the option mapping with unit tests.
Standalone page (not linked from the examples index) for customer-facing
teams to demo client-side ad insertion: Google IMA sample-tag presets,
custom ad tag / source / playlist inputs, all supported ads options, live
ad-event log, copyable init snippet, and URL-encoded shareable state.

VIDEO-21179
Review-time artifacts; to be removed from the branch before merge.
@tsi
tsi requested a review from a team as a code owner September 2, 2026 07:11
@netlify

netlify Bot commented Sep 2, 2026

Copy link
Copy Markdown

Deploy Preview for cld-vp-esm-pages ready!

Name Link
🔨 Latest commit f03682b
🔍 Latest deploy log https://app.netlify.com/projects/cld-vp-esm-pages/deploys/6a97e1d14847b50007ce29e7
😎 Deploy Preview https://deploy-preview-1084--cld-vp-esm-pages.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Sep 2, 2026

Copy link
Copy Markdown

Deploy Preview for cld-video-player ready!

Name Link
🔨 Latest commit f03682b
🔍 Latest deploy log https://app.netlify.com/projects/cld-video-player/deploys/6a97e1d148b5b0000884b0fe
😎 Deploy Preview https://deploy-preview-1084--cld-video-player.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

tsi added 5 commits September 2, 2026 11:10
videojs-contrib-ads must initialize before the first loadstart, but the ima
module is loaded via a dynamic import. When the source's loadstart fired
before the chunk resolved, contrib-ads logged 'has not seen a loadstart
event' and its ad state machine waited indefinitely, so prerolls never
played. Record a loadstart that fires while the chunk is loading and replay
it after player.ima() initializes.
Replace the videoPlayer() + source() two-step in the copyable snippet with
the async player() factory, which accepts publicId directly in its config.
Playlist mode is unchanged — playlistByTag() is a distinct call, not a
source setter.
Only playlist mode needs the reference (for playlistByTag()); the
single-source snippet has no further use for it.
Nothing in the single-source snippet consumes the resolved player, so it
can be a fire-and-forget call; playlist mode keeps await since
playlistByTag() needs the resolved instance.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant