Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
使用 Html5 video 标签在 iPad/iPhone 上的几个问题 [email_address] 2011/12/31
0. position:fixed <ul><li>最著名的应该是 iOS5 之前的版本不支持 css 的  position:fixed  了吧 . </li></ul>
1.  视频播放和全屏问题 <ul><li>在手机上 ,  如 iPhone,  浏览器对 video 标签的处理 ,  基本上是直接使用系统的媒体播放器播放 .  这时由于已经脱离了浏览器 ,  所以没有办法在播放视频的同时在屏幕上叠加任何显...
2.  音量控制问题 <ul><li>在 iOS 设备上 ,  浏览器没有办法通过 Javascript 来操作音量控制 ,  不管是调节音量大小 ,  还是静音都不行 .  </li></ul><ul><li>读取当前音量也永远只会得到 1....
3.  剪贴板问题 <ul><li>在 iOS 设备上 ,  不能通过 Javascript 访问系统剪贴板 .  用户只能在文字上单击 ,  调出系统的拷贝粘贴按钮 .  </li></ul><ul><li>要是不想让用户拷贝粘贴倒是有办法 ...
4.  文本框文字选取问题 <ul><li>在 iOS 设备上 ,  不能通过 Javascript 访问 textarea 元素的 select() 来选中该元素的文字 ,  得到的只不过是把光标移到到了文字的最后位置 . </li></ul>
5.  文本框滚动条问题 <ul><li>在 iOS 设备上 ,  textarea 元素没有滚动条 ,  你看不出到了 , textarea 什么位置了 . </li></ul><ul><li>滚动只能通过双指滑动来实现 ,  这应该算是多点...
6.  边框问题 <ul><li>默认情况下 , iOS 在你单击元素时 ,  会显示一个难看的边框 .  像是在使用 Firebug 做调试一样 ,  我想最终用户可不行看到这个 . </li></ul><ul><li>这个可以通过 CSS ...
7. touch events 的支持问题 <ul><li>jQuery 本身不支持 touch events,  所以同 jQuery 绑定如 touchmove 这样的事件事 ,  收不到事件 . </li></ul><ul><li>因为 ...
参考文档 <ul><li>List of known “Safari on iPad” differences over “Desktop Safari” </li></ul><ul><li>UNSOLVED HTML5 VIDEO ISSUE...
me <ul><li>@hileon  </li></ul><ul><ul><li>http://www.leonzhang.com </li></ul></ul><ul><ul><li>http://twitter.com/#!/hileon...
Upcoming SlideShare
Loading in …5
×

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

2,484 views

Published on

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

  • Be the first to comment

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

  1. 1. 使用 Html5 video 标签在 iPad/iPhone 上的几个问题 [email_address] 2011/12/31
  2. 2. 0. position:fixed <ul><li>最著名的应该是 iOS5 之前的版本不支持 css 的 position:fixed 了吧 . </li></ul>
  3. 3. 1. 视频播放和全屏问题 <ul><li>在手机上 , 如 iPhone, 浏览器对 video 标签的处理 , 基本上是直接使用系统的媒体播放器播放 . 这时由于已经脱离了浏览器 , 所以没有办法在播放视频的同时在屏幕上叠加任何显示元素 . </li></ul><ul><li>iPad 好一点 , 能在页面内直接播放视频 , 但是一但用户选择了全屏播放 , 则进入 iPhone 一样的状态 . </li></ul><ul><li>只有桌面上的 Chrome 对这个支持的最好 , 全屏状态下依然能够叠加浏览器里元素 ; </li></ul><ul><li>Firefox 逊色些 , 全屏并没有全屏显示 , 而是把视频充满了当前浏览器窗口 . </li></ul>
  4. 4. 2. 音量控制问题 <ul><li>在 iOS 设备上 , 浏览器没有办法通过 Javascript 来操作音量控制 , 不管是调节音量大小 , 还是静音都不行 . </li></ul><ul><li>读取当前音量也永远只会得到 1. </li></ul><ul><li>这又是 Apple 故意 的吧 . </li></ul>
  5. 5. 3. 剪贴板问题 <ul><li>在 iOS 设备上 , 不能通过 Javascript 访问系统剪贴板 . 用户只能在文字上单击 , 调出系统的拷贝粘贴按钮 . </li></ul><ul><li>要是不想让用户拷贝粘贴倒是有办法 , 使用这个 CSS. </li></ul><ul><ul><li>-webkit-user-select: none; </li></ul></ul>
  6. 6. 4. 文本框文字选取问题 <ul><li>在 iOS 设备上 , 不能通过 Javascript 访问 textarea 元素的 select() 来选中该元素的文字 , 得到的只不过是把光标移到到了文字的最后位置 . </li></ul>
  7. 7. 5. 文本框滚动条问题 <ul><li>在 iOS 设备上 , textarea 元素没有滚动条 , 你看不出到了 , textarea 什么位置了 . </li></ul><ul><li>滚动只能通过双指滑动来实现 , 这应该算是多点触摸设备的特性吧 . </li></ul>
  8. 8. 6. 边框问题 <ul><li>默认情况下 , iOS 在你单击元素时 , 会显示一个难看的边框 . 像是在使用 Firebug 做调试一样 , 我想最终用户可不行看到这个 . </li></ul><ul><li>这个可以通过 CSS 修正 . </li></ul><ul><ul><li>-webkit-tap-highlight-color: rgba(0, 0, 0, 0); </li></ul></ul>
  9. 9. 7. touch events 的支持问题 <ul><li>jQuery 本身不支持 touch events, 所以同 jQuery 绑定如 touchmove 这样的事件事 , 收不到事件 . </li></ul><ul><li>因为 jQuery 复制 touchmove 的 event 对象是有些属性读不到 , 认为这个事件不合法直接跳掉了 . </li></ul><ul><li>直接使用 DOM 元素的 addEventListener() 方法没问题 . </li></ul>
  10. 10. 参考文档 <ul><li>List of known “Safari on iPad” differences over “Desktop Safari” </li></ul><ul><li>UNSOLVED HTML5 VIDEO ISSUES ON IOS </li></ul><ul><li>Preparing Your Web Content for iPad </li></ul>
  11. 11. me <ul><li>@hileon </li></ul><ul><ul><li>http://www.leonzhang.com </li></ul></ul><ul><ul><li>http://twitter.com/#!/hileon </li></ul></ul><ul><ul><li>http://www.weibo.com/hileon </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>使用 Html5 video 在 iPad/iPhone 上碰到的几个问题 </li></ul>

×