使用Html5 video在iPad/iPhone上碰到的几个问题

最近使用mediaelementjs做一个iPad上的Html5的video标签的播放器包装.
首先感谢一下mediaelementjs这样的开源项目, 可用度极高, 代码质量明显比我自己写要好多了, 模块化清晰, 许可证很开放(MIT).

开发的过程中遇到了些浏览器兼容问题, 也涉及到一下iPad这样的平板平板设备上的浏览器与桌面浏览器在用户行为设计上的不同的问题. 下面罗列一下:

0. position:fixed
最著名的应该是iOS5之前的版本不支持css的 position:fixed 了吧.

1. 脱离浏览器的视频播放和全屏问题
在手机上, 如iPhone, 浏览器对video标签的处理, 基本上是直接使用系统的媒体播放器播放. 这时由于已经脱离了浏览器, 所以没有办法在播放视频的同时在屏幕上叠加任何显示元素. iPad好一点, 能在页面内直接播放视频, 但是一但用户选择了全屏播放, 则进入iPhone一样的状态. 只有桌面上的Chrome对这个支持的最好, 全屏状态下依然能够叠加浏览器里元素; Firefox逊色些, 全屏并没有全屏显示, 而是把视频充满了当前浏览器窗口.

2. 音量控制问题
在iOS设备上, 浏览器没有办法通过Javascript来操作音量控制, 不管是调节音量大小, 还是静音都不行. 读取当前音量也永远只会得到1. 这又是Apple故意的吧.

3. 剪贴板问题
在iOS设备上, 不能通过Javascript访问系统剪贴板. 用户只能在文字上单击, 调出系统的拷贝粘贴按钮. 要是不想让用户拷贝粘贴倒是有办法, 使用这个CSS.

帮助

01

-webkit-user-select:none;

4. 文本框文字选取问题
在iOS设备上, 不能通过Javascript访问textarea元素的select()来选中该元素的文字, 得到的只不过是把光标移到到了文字的最后位置.

5. 文本框滚动条问题
在iOS设备上, textarea元素没有滚动条, 你看不出到了, textarea什么位置了. 滚动只能通过双指滑动来实现, 这应该算是多点触摸设备的特性吧.

6. 边框问题
默认情况下, iOS在你单击元素时, 会显示一个难看的边框. 像是在使用Firebug做调试一样, 我想最终用户可不行看到这个. 这个可以通过CSS修正.

帮助

01

-webkit-tap-highlight-color: rgba(0,0,0,0);

7. touch events的支持问题
jQuery本身不支持touch events, 所以同jQuery绑定如touchmove这样的事件事, 收不到事件. 因为jQuery复制touchmove的event对象是有些属性读不到, 认为这个事件不合法直接跳掉了. 直接使用DOM元素的addEventListener()方法没问题.