安卓系统video视频层级问题

最新推荐文章于 2025-02-17 16:06:13 发布

原创最新推荐文章于 2025-02-17 16:06:13 发布 · 6.6k 阅读

3 ·

CC 4.0 BY-SA版权

针对移动端网页中视频在安卓系统上层级最高的问题，提出了一种使用canvas替代视频显示的解决方案，确保弹出层不会被视频覆盖，提升用户体验。

在移动端网页含有video的时候，video的时候的层级总是最高的，现阶段ios系统已经解决了这个问题；但安卓系统总会出现：视频播放时，如果出现弹出层；弹出层就会被视频覆盖，相当别扭；

目前可想到的解决方案是：

在弹出层时；用canvar作图来代替视频当前位置：

var video = document.getElementsById('video');
var canvas = document.getElementById('canvas');
var w = video.offsetWidth;
var h = video.offsetHeight;
canvas.width = w;
canvas.height = h;
video.pause();
var ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0,w,h)；

并隐藏video元素。

这里说明下隐藏video是最好不要用“display：none”而是设定width = 0,height = 0来代替隐藏；