Skip to content

changeVideo Streaming & Mobile Performance Fixes

Date: 2026-04-16

Problem

  1. changeVideo overrides (from flow operators and scripts) always fell back to direct MP4 download, even when streaming was enabled on the video block. This is because the override only passed streamId, not streamData (the HLS manifest), and the engine forced streaming = false without it.
  2. On mobile, creatives using responsive video swap had ~2 minute video load times because both horizontal and vertical videos downloaded simultaneously as full MP4s.

Root Causes

  • Engine (CreativeBody.vue): The changeVideo watch handler fetched a 64px thumbnail video just for aspect ratio metadata, but never fetched the HLS manifest. The arrayOfVideoProperties computed forced streaming = false for any override missing streamData.
  • Script (responsive-video-swap.js): The ResizeObserver callback is async, so the original (wrong) video started loading before changeVideo fired.
  • Per-creative (advantageResponsive.js): The scroll-progress handler called play()/pause() on every frame, interfering with buffering.

Fixes Applied

1. Streaming support for changeVideo (Creative-Engine PR #728)

Branch: fix/changevideo-streaming-supportFiles: CreativeBody.vue, new src/utils/streamParser.ts, added m3u8-parser dependency

The watch handler now calls streamParser(streamId) to fetch the HLS manifest instead of loading a thumbnail video for metadata. The manifest provides both streaming data AND video dimensions/aspect ratio, so the old metadata fetch is replaced entirely. streamData is included on the override, so arrayOfVideoProperties no longer forces streaming = false. Falls back to the old thumbnail approach if manifest fetching fails.

This applies to ALL changeVideo usage — flow operators and scripts alike.

2. Synchronous initial swap (Script-Library, on main)

File: scripts/visual/responsive-video-swap.js

Added swapIfNeeded() call before the ResizeObserver setup so changeVideo fires synchronously when the script executes, minimizing the window where both videos load simultaneously.

3. Throttled scroll play/pause (per-creative operator)

File: advantageResponsive.js in affected creatives

Changed onScrollProgress handler to only call play()/pause() once at the 80% threshold instead of on every frame.

If Something Goes Wrong

  • Fix 1 (engine): Revert PR #728 in Creative-Engine. changeVideo will fall back to direct MP4 download as before.
  • Fix 2 (script library): Revert responsive-video-swap.js on main in Script-Library. The previous version only used ResizeObserver without the synchronous initial call.
  • Fix 3 (per-creative): Revert the advantageResponsive.js operator in each affected creative individually.

Internal documentation