多屏顯示播放頁面，同時支持全屏顯示以及動態設備選擇功能

幾天由於要實現一個16：9多屏顯示播放頁面，同時支持全屏顯示以及動態設備選擇功能。

前端技術框架layui。

接下來介紹實現過程：

1.16:9屏幕布局實現

HTML

<div class="box">
  <div class="scale">
    <img src="http://img17.3lian.com/201612/16/88dc7fcc74be4e24f1e0bacbd8bef48d.jpg" class="item"/>
  </div>
</div>

CSS

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

實現效果：

 

 參考地址：https://www.cnblogs.com/yf-html/p/9626000.html

 技術總結：

1）該方式基於padding-bottom: 56.25%;height: 0;實現

2）父級元素中設置position:relative;子元素中設置position:absolute;這樣子元素中可以獲取到正常的height值，有利於子元素中添加新樣式時設置高度問題

2、指定元素全屏實現方案

 直接上代碼，同時處理了兼容性：

//  做個全屏的構造函數
    var FullScreen = function(elem){
        this.elem = document.querySelector(elem);
    }
    //  全屏
    FullScreen.prototype.in = function() {
        if (this.elem.requestFullscreen) {
            this.elem.requestFullscreen();
        } else if (this.elem.webkitRequestFullscreen) {
            this.elem.webkitRequestFullscreen();
        } else if (this.elem.mozRequestFullScreen) {
            this.elem.mozRequestFullScreen();
        } else if (this.elem.msRequestFullscreen) {
            //  IE的實現沒有實測過，不過據網上的資料說IE11以下可實現的
            this.elem.msRequestFullscreen();
        }
    }
    //  退出全屏
    FullScreen.prototype.out = function() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }

 

使用：

 初始化時傳入要全屏的元素即可

var fullScreen = new FullScreen("#screen");
//  全屏
fullScreen.in();//  退出

fullScreen.out();

//為了保證選擇框進入或者退出時位置不變化，需要添加全屏事件的監聽

/**
* 監聽是否進入或者推送全屏操作
*/
document.addEventListener("fullscreenchange", function (e) {
if (document.fullscreenElement) {
console.log('進入全屏');
var alertPage = $(".layui-layer-page");
alertPage.appendTo("#screen");
} else {
console.log('退出全屏');
var alertPage = $(".layui-layer-page");
alertPage.appendTo("body");
}
});

 

 接下來我們使用layui中彈出層，可以根據顯示的屏幕動態選擇攝像頭，效果如下：

 

 

 

 

貌似效果實現，可當我們在全屏下進行操作的時，彈出框顯示已經彈出，但是不能顯示。

3、完美適配解決方案

此時我們分析問題，我們看layui彈出層實現的機制：

我們參考下基於iframe中彈出層解決遮罩層覆蓋到全屏方案：

參考：https://www.pianshen.com/article/92951324452/

因為layui官網說  如果彈層的內容content是某個DOM元素的話，要放在body的根節點下。不能放在div里面了。

 所以如果不在body根目錄下的話會導致遮罩遮擋全屏，因為最后生成的遮罩DOM元素的位置是body的子級，所以知道彈層的DOM要和遮罩的DOM 要在同一層。
如圖：

 

 

 

 所以這里再彈層的success的事件里面進行了處理，將遮罩的DOM位置挪動了一下，和彈層DOM元素同一級，代碼如下：

 

 

 給彈框定義名稱，關閉時可使用layer.close(彈框變量名)。

以上是解決方案，全屏的時候是不是也是類似問題呢？

我通過檢索發現：vue頁面或者網頁全屏后，modal 彈框或者下拉框無法顯示的問題，這篇文章介紹，參考：https://blog.csdn.net/woyaojinali/article/details/110958317

其實無論layui還是bootstrap中model，都是基於父級顯示的，默認情況下layui彈出層是基於body左右參考元素的，那么我們現在的解決方案就是在彈出層success成功后，

設置

layer.open({
    type: 1,
    title: '開通產品數量',
    area: ['700px', '600px'], //寬高
    shade: 0,
    shadeClose:false,
    anim: 3,
    zIndex:9999999999999999999,
    content: "#openProductBox",
    success: function() {
        var alertPage = $(".layui-layer-page");
        alertPage.appendTo("#screen"); //全屏模式下設置彈出層的父級參考標准
    }
});

此時完整效果如下：

 

 至此問題得到解決。