`
mywebcode
  • 浏览: 988056 次
文章分类
社区版块
存档分类
最新评论

HTML5视频插件,各种已解决和正在解决的问题

 
阅读更多

最近在做一个hmlt5的课件项目,客户需要在课件中嵌入HTML5视频,还需要自定义视频的一些控制,默认的视频控制条肯定不能满足,于是需要引入自定义的视频控件。

经过一番研究,最后选定了mediaelement这个插件,号称还是挺强的,而且支持的平台比较多。

引入了,首先需要解决的问题是整合问题,它是基于jquery的,我们现在用的包是zepto,虽然号称是通用的,但是用起来就知道区别了。

首先我们自己build的包,发现一些selector的匹配方法不支持,原来selector的包没有build进来,于是又把selector,build进类库里。

又解决了一些兼容性问题,这个lib总算可以正常运行起来了,用一个简单例子测试,感觉蛮好。

放到真正的课件里发现问题了,发现好多按钮都是错位的,经过一番研究发现了问题。视频是通过动画效果出来的,为了动画的效果,视频开始时隐藏的,在获取视频的高度和宽度都没有,造成了位置计算的错误。为了解决这个问题,让动画执行结束之后增加一个回调,在回调里重新计算一下所有按钮的位置,搞定!

解决了这个问题接下来弄一些控制的定制,这个还算顺利,因为大部分的控制功能都是可定制的,只有一个进度条的拖动的可定制功能没有,自己加了参数的接口。

各个浏览器试了一下,基本没啥问题,总算出了一口气,但是还不能高兴太早,还要试试手机上,因为手机上往往是出问题最多的。

果然不出所料,手机上确实问题不少,首先是定位的问题,手机上的课件都是缩放过的,通过zepto的height和width方法得到的也都是缩放过的尺寸,都怪该死的getBoundingClientRect方法,不知道jquery里是不是用的这个方法了处理的。为了避免这个问题,使用了offsetHeight和offsetWidth来代替这两个方法,一试,果然奏效了。

目前还有好多问题在解决中,android设备chrome浏览器,视频对fixed的熟悉竟然不支持,外层div定位过去了,视频还在原处,天哪!

有时候做移动webapp的开发真的挺苦逼的,各种平台,各种浏览器。关键是客户还不理解,有些事情跟他说不通,好吧,我承认我是来发牢骚的。主要是希望大家能理解,也希望有相同经历的朋友一起交流,一起解决苦逼bug,一起交流心得。如果你想体验下,我可以转给你些项目试试,我qq398906783


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics