Appearance
changeVideo Streaming & Mobile Performance Fixes
Date: 2026-04-16
Problem
changeVideooverrides (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 passedstreamId, notstreamData(the HLS manifest), and the engine forcedstreaming = falsewithout it.- 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): ThechangeVideowatch handler fetched a 64px thumbnail video just for aspect ratio metadata, but never fetched the HLS manifest. ThearrayOfVideoPropertiescomputed forcedstreaming = falsefor any override missingstreamData. - Script (
responsive-video-swap.js): TheResizeObservercallback is async, so the original (wrong) video started loading beforechangeVideofired. - Per-creative (
advantageResponsive.js): The scroll-progress handler calledplay()/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.jsonmainin Script-Library. The previous version only usedResizeObserverwithout the synchronous initial call. - Fix 3 (per-creative): Revert the
advantageResponsive.jsoperator in each affected creative individually.