Multiple HTML5 videos on TV kiosk

Question

I am building an application using electron.js that runs a socket server on a local network.

The idea is that the socket server sends messages to connected clients to dynamically load multiple html5 videos in a browser on a smart TV.

The videos are small demonstration videos and need to autoplay and loop.

There can be up to 12 videos playing at once on one device.

The problem that I am experiencing is that I cannot get smooth playback of the videos or not all videos will play.

I have tried the following with 12 videos:

• Native Smart TV browser. Result: Only plays 3 videos and playback is ok
• Chormium Browser on Raspberry Pi 3. Result: Can play all 12 videos but playback is choppy. Forcing hardware acceleration crashes the browser
• Chrome Browser on Quad core Android box. Result: Can only play 6 videos and playback is good
• ionic cordova app on Android Box. Result: Can only play 6 videos and playback is good
• react-native app on Android Box. Result: Can only play 6 videos and playback is good

My question is, what are my limitations or possible solutions?

Am I limited by hardware or is there something I can do in my application builds that may resolve the issue?

It is worth pointing out that on my desktop chrome browser, all 12 videos play without any problem but this is not an option for me because they need to run on the TV.

Edit: It is worth mentioning I am using mp4 video

Answer 1

I am going to answer this myself to help others if they come across the same issue.

I ended up installing ffmpeg and encoded webm video instead of mp4 and could get all 12 videos playing.

Then by reducing the bitrate, I was able to get all 12 videos playing at the same time on the mini PCs at an acceptable quality.