最近在做一个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