I am creating an interactive video wall for a customer. It consists of 9 55" LCD monitors in portrait mode, with a touch screen device encompassing the entire installation.
The main portion of the application is written in HTML with jQuery and other JavaScript for various portions. I am using a basic C# application with a WebBrowser control that is set to stretch across all 9 monitors in full screen. The index is just being loaded locally, not delivered from a server application.
Everything is coming along fine, except for the video playback. When I start a video in the application, the playback is choppy. It doesn't seem to get any worse when I am playing multiple videos. I am using jQuery to insert a video DOM element with auto play to start the video, and then have a trigger on the end of the video to remove the element. All of the videos are MP4, and have be rendered down to the size they need to be (960x540) from their native 1920x1080 MOV files.
There are some flash elements and some animated JavaScript elements throughout the application that, when removed, seem to increase the video playback quality slightly. During the troubleshooting we suspected it might be a problem with low resources, so I built a machine with a Core i7, 16gb DDR4, and 3x GTX970 4gb cards with no noticeable improvement.
I know that the WebBrowser control utilizes Internet Explorer to render the page. When I load the HTML document in Firefox and manually stretch it out, the playback is choppy as well. When the window is only stretched across one or two screens the video is just fine. It is just when it gets to the 5-6 monitor mark that the quality starts degrading.
What can I do to get these videos playing smoothly? Would it help to play the uncompressed MOV file through QuickTime, or perhaps convert the MP4 files into flash elements to play? Would I be better off re-writing the whole program in a compiled language like Flash or C#, rather than running it as a large web page?