I'm doing a simple CCTV app that has multiple video files. This is used as a movie prop, so certain scripted actions are allowed. For example, videos can be shown full screen or in a 2x2 grid, paused or rewound, screenshot, etc.
I'm having some issues with playback. The videos flicker for a moment before playing. I have them all preloaded and ready, but it still seems to disappear for a couple of frames before playing.
Each video is 720p, about 30-60 seconds long, and about 30 MB in size. They are encoded as h264 MP4 files.
In fullscreen mode, my workaround has been to play video 1, and when the user wants the next video, I start video 2 underneath. I then check if it's playing and destroy video 1 if video 2 is playing. I would do that for every following video. This seems to fix the frame disappearing problem, but I lose the first frames of playback.
In grid mode, the videos sometimes appear at different times, so they don't start playback at the same time. Still working on a fix for this.
I know C3 might not be the best tool for creating stuff like this, but I'm just so accustomed to it :)
Should I use the WebM codec instead of H264?
Should I preload the videos differently?
Should I be using an HTML Element for this instead?
Any tips appreciated.