Dynamic Video Generation via DOM Conversion
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing systems for creating personalized, dynamic videos face challenges such as high computational and storage requirements for pre-rendering videos, limited interactivity, and the need for animation platform editors to access personal customer data.
Innovation Solution
A system and method for generating dynamic, data-driven videos in a web browser, which involves obtaining a video specification, receiving dynamic data associated with the end user, and converting visual and audio elements to elements in the web browser's Document Object Model (DOM) to generate frames of a dynamic video.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If personalized video files are pre-rendered before customer requests, then video quality and personalization are improved, but processing time and storage requirements increase significantly
Solution Approach 1:
The system performs preliminary preparation by creating a template-based video structure with placeholder elements during development, but delays actual personalization data insertion until runtime when the customer request is received. This allows the heavy processing to be deferred while maintaining video quality through pre-defined templates.
Solution Approach 2:
The video generation system dynamically adapts its behavior based on demand: it uses pre-rendered templates for structural consistency but dynamically inserts personalized data only when needed, transforming from a static pre-rendering approach to a dynamic on-demand personalization system that reduces unnecessary processing time.
2Manufacturing precision
If personalized video files are pre-rendered for all customers, then video quality is improved, but storage resources are consumed significantly
Solution Approach 1:
Instead of storing complete personalized video files for each customer, the system stores a single master template that can be copied and customized on-demand. The template contains all structural elements, animations, and placeholder positions, which are then instantiated with different customer data as needed, dramatically reducing storage requirements while maintaining video quality.
Solution Approach 2:
The system changes the storage approach from storing complete video files (high storage) to storing template parameters and configuration data (low storage). By storing only the essential structural parameters and placeholders in the template, the system can generate high-quality personalized videos on-demand without consuming significant storage resources for multiple video copies.
3Adaptability or versatility
If animation platform editors access personal customer data, then video personalization is achieved, but data security and privacy concerns increase
Solution Approach 1:
The system introduces an intermediary layer that separates the animation editing platform from personal customer data. The platform works with anonymized templates and placeholder elements, while personal data is injected automatically at runtime through secure APIs or data connectors, preventing direct access by editors while maintaining personalization capabilities.
Solution Approach 2:
The system extracts personal data access from the animation editing process itself. Editors no longer need to access or handle personal customer data directly; instead, they create templates with placeholders, and the system automatically extracts and inserts the appropriate personal data from secure sources during automated generation, eliminating the security risk of editor data access.
4Ease of operation
If HTML buttons are added for interactivity, then user interaction capability is improved, but visual consistency and animation quality deteriorate
Solution Approach 1:
The system merges the interactivity functionality directly into the video animation layers themselves rather than adding separate HTML buttons on top. Interactive elements are created as part of the video content with matching animations, styles, and transitions, so that interactivity and visual consistency are unified in a single cohesive system rather than conflicting layers.
5Ease of operation
If multiple videos are loaded at the beginning for interactivity, then real-time interaction is enabled, but loading time increases significantly
Solution Approach 1:
The system performs preliminary preparation by creating a single comprehensive video template that contains all possible interactive scenes and content variations embedded within it. When a user interacts, the system dynamically shows or hides pre-prepared segments within the same video rather than loading separate video files, eliminating redundant loading time while maintaining interactivity.
Data Source
AI summary
A system and method for dynamic video web generation includes: obtaining a video specification including definitions of graphical elements and their movement; receiving dynamic data of an end user of the web browser; changing traits of one or more of the graphical elements in the video specification according to the dynamic data; converting the graphical elements and their traits in the video specification, as well as audio and video definitions, to visual and auditory elements in a Document Object Model (DOM) file of the web browser; and applying the movement of the graphical elements defined in the video specification to the visual elements, according to a predefined frame rate, to generate, at the frame rate, frames of an interactive, dynamic video including the visual and audio elements, and consecutively displaying the frames in the web browser.