移动web端视频层级最高，视频弹窗层被遮挡的解决方案探究

一.背景

相信有不少同学在开发移动web端带视频的页面时，在部分浏览器上视频的显示层级最高，遮罩层，弹窗之类都被视频遮盖。

我觉得出现这种情况是因为使用了浏览器的播放器，和标准的h5video标签有比较大的区别。会出现这种情况的有：

安卓端: 微信内置浏览器，UC浏览器，QQ浏览器....等等

苹果端： 手头没有苹果设备.

[补充说明]: 文中用的是layer.js的弹窗组件

 

二.针对弹窗被遮挡的问题，探索的一些解决方法(非全屏的情况)

1.无法反抗被生活QJ，那就享受党的处理方式----在非视频显示的区域显示弹层：

在视频下方区域显示弹窗，完美解决（手动狗头）。

优点: 不会被遮挡，播放器无影响。

缺点: 受播放器的位置影响，播放器宽高占据全屏时无法显示。

效果截图：

2.我命由我不由天党的处理方式----显示弹窗时播放器或父容器样式设置display: none.：

原理说明：这个方法就是在需要弹窗的时候，将video或者是video父容器的样式设置display:none。

测试效果: 在安卓端微信浏览器，UC浏览器，QQ浏览器正常弹窗

优点: 弹窗层能正常显示，不会被播放器遮挡。

缺点: 暂停的时候无法显示播放器， 例如暂停的那一帧画面显示不了。截图处是我给父容器加了个黑色背景图。

参考代码：(不能直接用)

var $player = $('#player'); // 父容器的jq对象
var interval = window.setInterval(function () {
if (player.j2s_getCurrentTime() === 2) {  // 当视频当前播放时间为第二秒时
  player.j2s_pauseVideo();  // 暂停视频
  window.clearInterval(interval);  // 清除定时器
  $player.hide(); // 隐藏video
  layer.confirm('是否继续播放？', {
    btn: ['继续', '暂停'], //按钮
    offset: '10vh',
  }, function () {
    layer.msg('继续播放', { icon: 1 });
    player.j2s_resumeVideo();  // 恢复播放
    $player.show();  // 显示视频
  }, function () {
    layer.msg('暂停播放', { icon: 1 });
    $player.show();
  });
}
}, 1000);

效果截图：

 

3.纯微信，只在微信浏览器上能显示弹窗就行，其他浏览器管他死活党---- video标签设置一些属性：

测试demo地址--codepen

主要是属性x5-video-player-type="h5-page"，设置这个属性可以在安卓微信上不使用x5内核的播放器，显示层级就不是最高，就可以显示弹窗了。