安卓系统video视频层级问题

最新推荐文章于 2024-04-09 17:12:57 发布

jiajunmiku

最新推荐文章于 2024-04-09 17:12:57 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/jiajunmiku/article/details/86570276

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端网页含有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来代替隐藏；