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

首先，我解释我的要求：

• 我有一个虚拟元素来触发video – > <div id="dummyElement"></div>
• 当用户点击/点击虚拟元素时，VideoJS必须被初始化，然后必须在大多数平台上播放媒体。

那么，我的问题是当我使用Require.js库时，在IOS上处理这个问题。 这个问题迫使用户做两个恼人的点击/点击查看video。

我已经从一个简单的例子，例如requirejs和jQuery的承诺做了一些例子。

1- http://aitoraznar.com/lab/videojs/plain.html使用HTML5video标签的简单示例

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 promise的示例

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

• 三星Galaxy Tab（GT-P6200）Android 3.2 – 原生浏览器
• 三星Galaxy Tab 2 Android 4.4 – 本机浏览器
• LG Nexus 5 Android 5.0 – Chrome浏览器
• 黑莓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

我不知道为什么第四个例子（VideoJS＆Require.js）不能在IOS设备上工作。 任何帮助，将不胜感激。

谢谢，

的Aitor

Answer 1

iOS的问题是，除非直接点击，否则无法播放video。 这与RequireJS无关。

为了使这个工作，而不是使用你点击一个虚拟的div，你可以使用一个海报，将模仿相同的行为。 点击video之前，您可以调整一下皮肤来隐藏需要隐藏的内容。