I am working in a private project based from Playcanvas video texture tutorial. I try to reproduce several videos (4 videos) at the same time.
It’s easy if you follow the steps on the tutorial, but It’s work run on the mobile devices. The video images are slowly than the video sound. The videos are reproduced by individual video components on the JS background and I think this is a problem.
How big are the videos (resolution and bitrate)? Ultimately you are trying to play 4 videos at the same time on a single webpage which can be a huge performance drain on device.
Now I am using 4 videos webm vp9 720p.
Yep. I know this is a huge performance so I am working in the next solution:
The camera can focus maximum two videos at the same time, the other videos are behind the camera. So I only play the focus videos and if you turn left or right the camera, a event stops the next videos behind the camera and plays the new videos on the camera focus. So I am loading the videos on the video tag (such as on the tutorial) but only render maximum two videos.
I try to improve the behaviur with some workflow to avoid high performance.
You are hardware limited so you need to design your application experience around the fact you really can only have one HD video playing at one time. So that may mean pausing the other 3 if they are obviously not the focus, not having the videos autoplay, using audio only, use SD until one is in focus and switch that feed to HD only, etc.