问题
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
回答1:
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.
来源：https://stackoverflow.com/questions/29894406/initialize-videojs-from-dummy-element-using-require-js