bug: PIXI.js Video Asset Loading Fails on Safari iOS Due to CORS Configuration Issues

[dazzatronus]

Issue Summary

Video assets fail to load through PIXI.js on Safari iOS devices, causing the application to hang indefinitely during the asset loading phase. The issue is specifically related to PIXI's built-in video loader not properly handling CORS configuration for Safari iOS's strict security requirements.

Expected Behavior

• Video assets should load successfully
• Application should progress past the loading phase
• Video textures should be available for rendering

Actual Behavior

• Application hangs indefinitely at PIXI.Assets.load() call
• No error messages or meaningful feedback
• Loading progress stops completely
• Video assets never become available

Steps to Reproduce

1. Load the Shotstack Canvas application on Safari iOS
2. Attempt to load video assets through the standard PIXI.Assets.load() pipeline
3. Observe application hanging during asset loading phase

Technical Analysis

Core Problem

PIXI.js's built-in video loader (@pixi/assets) does not properly configure HTML video elements for Safari iOS's strict CORS and video playback requirements. Safari iOS requires:

• Explicit crossorigin="anonymous" attribute
• playsinline="true" for inline playback
• Specific preload configurations
• Proper event loading sequence

Technical Details

The hang occurs because:

• PIXI's internal video loader doesn't set required Safari iOS attributes
• Safari iOS blocks video loading due to missing CORS configuration
• No error is thrown, causing indefinite waiting
• Standard PIXI error handling doesn't catch the CORS failure

Possible Solutions

Custom Video Loading Pipeline
Separate video loading that bypasses PIXI's problematic built-in loader, allowing the right CORS settings to be used.

Tested Environment

• Studio Version 1.2.0
• OS: iOS
• Browser / Version: Safari 18.5

Additional Context

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/crossorigin