"I am looking for a way to seamlessly switch between the current video being displayed and the next generated video without causing the HTML to collapse and rebuild the video element."
The default behavior of the MPEG video decoder is to re-initialize when new data is encountered. Unfortunately, this cannot be avoided, so you will need to implement a workaround based on your coding expertise or video engineering knowledge.
(1) If all the video clips already exist and only need to be dynamically selected...
Easiest: Toggle between two video tags:
Easier: Navigate to different clips within a single video file:
- Combine (or concatenate) all videos into a single, continuous video file.
- Loop through each clip based on time intervals (check current time via
timeupdate event).
- If transitioning to the next clip is required, seek to the corresponding time within the video and repeat the looping process.
(2) If the video clips are generated dynamically (e.g., lip sync for custom response's words)...
Harder: Utilize MediaSource Extensions to stream individual videos as fragments:
- Convert/encode your videos into Fragmented MP4 format.
- In MSE, start by sending the main header (initial MOOV atom).
- Subsequently, feed the specific clip (as a fragment) that needs to be replayed.
- To switch to a different video, input the bytes of the alternative video.
Using MSE to input video data does not prompt the <video> tag to reload.
The tag anticipates receiving video data periodically to remain active at all times.
An alternative to utilizing MSE involves using PHP to input video data to a <video> tag. This method entails using a .php file as the video source instead of a .mp4 file.
Both the MSE and PHP approaches necessitate understanding the MP4 file structure (comprising multiple byte values stored within an array, with bytes representing numbers ranging from 0 to 255). Knowledge of which bytes correspond to the file's header and audio/video frames is crucial.