[SOLVED] Several Videos Rendering


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.

Some idea to perform this?


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.

Hi… yaustar.
Thanks for your reply.

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.

What do you think?


Do they need to be 720p? I don’t know how big it is going to be on the app in terms of screen space if the camera can see two at the same time.

No… I dont need 720p. I did a test with videos at 360p without problems! Thats is the solution. Thanks!

But in the future I need to perform the HD play. Other idea to work?

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.

Yep… this is my solution now. With SD quality I dont have too many problems.

Thanks for your ideas