本文介绍了使用Require.js从虚拟元素初始化VideoJS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

首先,我解释了我的要求:

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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-12 14:35