移動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標籤設置一些屬性：

<video id="videoID" src="xxx" x5-video-player-type="h5-page">

測試demo地址--codepen

主要是屬性x5-video-player-type="h5-page"，設置這個屬性可以在安卓微信上不使用x5內核的播放器，顯示層級就不是最高，就可以顯示彈窗了。