You are here
div 遮挡 HTML5 视频研究
div 遮挡 HTML5 视频研究
说完 Flash 了，我们顺道研究一下 div 浮层遮挡 HTML5 Video 是否会有问题。经测试，结果如下表：
| HTML5 Video | Windows | Mac | iOS | Android | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| IE9-IE10 | Chrome | Firefox | Safari | Chrome | Firefox | Safari | Chrome | 原生 | Chrome | UC | |
| div | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| div + iframe | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| div(rgba) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| div(rgba) + iframe | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
注： iPhone 上当视频播放时会自动切换为全屏，此时没有任何页面元素可以遮挡它。当视频处于非全屏的暂停（或未开始播放）状态时， div 浮层可以遮挡 <video> 元素。iPad 上无此问题。
HTML5 Video 的得天独厚的优势 —— 无插件的视频播放，使其跟页面其他元素处于一种平等的层级关系上，div 浮层轻轻松松即可实现遮挡 <video> 内容。
来自 http://note.rpsh.net/tags/wmode
普通分类: