使用Require.js从虚拟元素初始化VideoJS [英] Initialize VideoJS from dummy element using Require.js
问题描述
首先，我解释了我的要求：
First of all, I explain my requirements:
- 我有一个用于触发视频的虚拟元素 - >
< div id =dummyElement>< / div> - 当用户点击/点击虚拟元素时，必须初始化VideoJS然后必须在大多数平台上播放媒体。
好吧，我的问题是当我使用时在IOS上接近这个Require.js 库。这个问题迫使用户进行两次恼人的点击/点击来观看视频。
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.
我已经从一个简单的例子到一个例子做了一些例子requirejs和jquery promises的例子。
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
使用HTML5视频标签的简单示例
1- http://aitoraznar.com/lab/videojs/plain.html
Simple example using HTML5 video tag
2- http://aitoraznar.com/lab/videojs/complex.html
使用require.js和jQuery promises的示例
2- http://aitoraznar.com/lab/videojs/complex.html
Example using require.js and jQuery promises
3- http://aitoraznar.com/lab/videojs/videojs.html
使用VideoJS的示例
3- http://aitoraznar.com/lab/videojs/videojs.html Example using VideoJS
4- http://aitoraznar.com/lab/videojs/videojsComplex.html
使用VideoJS和require.js以及jQuery promises的示例
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:
- 三星Galaxy Tab（GT-P6200）Androi d 3.2 - 原生浏览器
- 三星Galaxy Tab 2 Android 4.4 - 原生浏览器
- LG Nexus 5 Android 5.0 - Chrome浏览器
- Blackberry Z10（STL100-2） - 原生浏览器
- 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
检测到的设备不起作用（主IOS）：
Detected devices where doesn't work (Primary IOS):
- iPad Mini 2（A1489） - IOS 8.1.2 - Safari浏览器
- iPhone 4（ A1332） - IOS 7.1.2 - Safari浏览器
- 诺基亚E7-00（RM-626） - Symbian Belle 3（v111.040.1511） - 原生浏览器（8.3） - Java 2.3 - Flash 4.0
我不知道为什么第四个例子（VideoJS& Require.js）不适用于IOS设备。任何帮助将不胜感激。
I don't know why the 4th example (VideoJS & Require.js) is not working on IOS devices. Any help would be appreciated.
谢谢，
Aitor
推荐答案
iOS的问题是除非直接点击，否则无法播放视频。这与RequireJS无关。
The problem with iOS is you cannot play a video unless you tap it directly. This has nothing to do with RequireJS.
要使其工作，而不是使用您单击的虚拟div，您可以使用模仿相同行为的海报。在点击视频之前，您可以调整一下皮肤以隐藏需要隐藏的内容。
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.
这篇关于使用Require.js从虚拟元素初始化VideoJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
