使用 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,414 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,414
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

使用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>

×