多屏显示播放页面，同时支持全屏显示以及动态设备选择功能

几天由于要实现一个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"); //全屏模式下设置弹出层的父级参考标准
    }
});

此时完整效果如下：

 

 至此问题得到解决。