Hi all.

We are currently building a HTML5 platform using VIDEOJS and have come up against an issue when viewing it on an ipad.

We have several videos loading in a sequence which are be played either when an icon is clicked, or straight after another video automatically. The platform works perfectly in chrome and safari and looks seamless but when viewing on an iPad the Quicktime logo appears briefly on a black background while the next video loads which kinda defeats the object of the system as it's then no longer seamless with black flashes between the videos.

We've tried several workarounds and spent ages searching through the web and still haven't been able to come up with a solution.

Following this link: http://blog.millermedeiros.com/html5...to-solve-them/ - we managed to get the video to hide from the screen and still play by creating the following functions:

Code:
function hidevideo() { $("video").css("-webkit-transform", "translateX(-2048px)"); }
function bringbackvideo() { $("video").css("-webkit-transform", "translateX(0)"); }
..and then calling the hidevideo() function using onloadedmetadata within our video tag. This hid the video from the screen before the quicktime logo/screen but still played (could hear the audio) which is perfect, but when we used any of the video tags that are supposed to run when the video is loaded to run the bringbackvideo function we still got the quicktime flash - even if we delayed it a few seconds.

We've tried overlaying a white div but the quicktime screen still seems to find a way to push itself over the top, then when its gone the video plays behind.

A complicated one I know - but really struggling with this and i'm sure there's a solution - we're so close with it!

Thanks in advance.