使用Require.js从虚拟元素初始化VideoJS

Question

首先，我解释了我的要求：

• 我有一个用于发布视频的虚拟元素 - ＆gt; <div id="dummyElement"></div>
• 当用户点击/点击虚拟元素时，必须初始化VideoJS，然后必须在大多数平台上播放媒体。

好吧，我的问题是在使用 Require.js 库时在IOS上进行此操作。此问题会强制用户执行两次恼人的点击/点按来观看视频。

我从一个简单的例子到一个带有requirejs和jquery promises的例子做了一些例子。

1- http://aitoraznar.com/lab/videojs/plain.html  使用HTML5视频标记的简单示例

2- http://aitoraznar.com/lab/videojs/complex.html  使用require.js和jQuery promise的示例

3- http://aitoraznar.com/lab/videojs/videojs.html  使用VideoJS的示例

4- http://aitoraznar.com/lab/videojs/videojsComplex.html  使用VideoJS和require.js以及jQuery承诺的示例

我可以在以下设备中重现预期的行为：

• 三星Galaxy Tab（GT-P6200）Android 3.2 - 原生浏览器
• 三星Galaxy Tab 2 Android 4.4 - 原生浏览器
• LG Nexus 5 Android 5.0 - Chrome浏览器
• Blackberry Z10（STL100-2） - 原生浏览器

检测到的设备不起作用（主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

我不知道为什么第4个例子（VideoJS＆amp; Require.js）不能在IOS设备上运行。任何帮助将不胜感激。

谢谢，

的Aitor

Answer 1

iOS的问题是，除非您直接点按，否则无法播放视频。这与RequireJS无关。

要使其工作，而不是使用您单击的虚拟div，您可以使用模仿相同行为的海报。您可以调整一下皮肤以隐藏在点击视频之前需要隐藏的内容。