whale 2019-07-01
1.安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效的。
2.安卓下qq的x5内核浏览器,提供了相关属性。分别为:x5-playsinline:行内播放。x5-video-player-type="h5":播放层级为文档层级。如果页面只有一个视频而且该视频在页面的顶部用起来还是比较顺心的。否则会发现,额。。。播放视频的时候会紊乱的。
所以移动端中,不建议做视频和dom重合的设计。
如果一定要做,请继续阅读。
以下内容范围:安卓
1.在video未被播放之前,video标签属于正常文档元素,z-index也是生效的。此时层级高的dom可以展示在video标签区域上方。
2.video标签播放中和播放之后均会覆盖dom。
3.浏览器同时只能播放一个video标签。当切换播放视频内容时体验不是很好:
解决思路:
1.删除和添加video标签这一节点,这样做会让video标签恢复到1中的状态。
2.删除video标签,浏览器的视频播放组件会立即消失,时间大幅度缩短。
比如:
doctype html> HTML5使用UTF-8编码演示:。<meta charset="UTF-8">2.HTML5中如何嵌入音频?</audio>3.HTML5中如何嵌入视频?</video&