使用 Html5 video标签在iPad/iPhone上的几个问题

hileon@gmail.com

2011/12/31

0. position:fixed

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

1. 视频播放和全屏问题• 在手机上 , 如 iPhone, 浏览器对 video标签的处理 , 基本上是直接使用系统的媒体播放器播放 . 这时由于已经脱离了浏览器 , 所以没有办法在播放视频的同时在屏幕上叠加任何显示元素 .

• iPad好一点 , 能在页面内直接播放视频 , 但是一但用户选择了全屏播放 , 则进入 iPhone一样的状态 .

• 只有桌面上的 Chrome对这个支持的最好 , 全屏状态下依然能够叠加浏览器里元素 ;

• Firefox逊色些 , 全屏并没有全屏显示 , 而是把视频充满了当前浏览器窗口 .

2. 音量控制问题

• 在 iOS设备上 , 浏览器没有办法通过Javascript来操作音量控制 , 不管是调节音量大小 , 还是静音都不行 .

• 读取当前音量也永远只会得到 1. • 这又是 Apple故意的吧 .

3. 剪贴板问题

• 在 iOS设备上 , 不能通过 Javascript访问系统剪贴板 . 用户只能在文字上单击 , 调出系统的拷贝粘贴按钮 .

• 要是不想让用户拷贝粘贴倒是有办法 , 使用这个 CSS.– -webkit-user-select: none;

4. 文本框文字选取问题

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

5. 文本框滚动条问题

• 在 iOS设备上 , textarea元素没有滚动条, 你看不出到了 , textarea什么位置了 .

• 滚动只能通过双指滑动来实现 , 这应该算是多点触摸设备的特性吧 .

6. 边框问题

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

• 这个可以通过 CSS修正 .– -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

7. touch events的支持问题

• jQuery本身不支持 touch events, 所以同jQuery绑定如 touchmove这样的事件事 , 收不到事件 .

• 因为 jQuery复制 touchmove的 event对象是有些属性读不到 , 认为这个事件不合法直接跳掉了 .

• 直接使用 DOM元素的 addEventListener()方法没问题 .

参考文档

• List of known “Safari on iPad” differences over “Desktop Safari”• UNSOLVED HTML5 VIDEO ISSUES ON IOS• Preparing Your Web Content for iPad

me

• @hileon – http://www.leonzhang.com– http://twitter.com/#!/hileon– http://www.weibo.com/hileon– hileon@gmail.com

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