Initialize VideoJS from dummy element using Requir

First of all, I explain my requirements:

I have a dummy element to fire a video -> <div id="dummyElement"></div>
When the user clicks/taps the dummy element, a VideoJS must to be initialized and then have to play the media on most platforms.

Well, my problem is to approach this on IOS when I use Require.js library. This issue force the user to do two annoying clicks/taps to view the video.

I have made some examples from a simple example to a example with requirejs and jquery promises.

1- http://aitoraznar.com/lab/videojs/plain.html Simple example using HTML5 video tag

2- http://aitoraznar.com/lab/videojs/complex.html Example using require.js and jQuery promises

3- http://aitoraznar.com/lab/videojs/videojs.html Example using VideoJS

4- http://aitoraznar.com/lab/videojs/videojsComplex.html Example using VideoJS and require.js and jQuery promises

I can reproduce expected behaviour in the following devices:

Samsung Galaxy Tab (GT-P6200) Android 3.2 - Native browser
Samsung Galaxy Tab 2 Android 4.4 - Native browser
LG Nexus 5 Android 5.0 - Chrome browser
Blackberry Z10 (STL100-2) - Native browser

Detected devices where doesn't work (Primary IOS):

iPad Mini 2 (A1489) - IOS 8.1.2 - Safari browser
iPhone 4 (A1332)- IOS 7.1.2 - Safari browser
Nokia E7-00 (RM-626) - Symbian Belle 3 (v111.040.1511) - Native browser (8.3) - Java 2.3 - Flash 4.0

I don't know why the 4th example (VideoJS & Require.js) is not working on IOS devices. Any help would be appreciated.

Thanks,

Aitor

The problem with iOS is you cannot play a video unless you tap it directly. This has nothing to do with RequireJS.

To make this work, instead of using a dummy div that you click, you can use a poster that will mimic the same behavior. You can tweak a little bit the skin to hide what needs to be hidden before the video is clicked.