问题描述
首先,我解释了我的要求:
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-
使用VideoJS的示例
3- http://aitoraznar.com/lab/videojs/videojs.html Example using VideoJS
4-
使用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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!