几天由于要实现一个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;
}实现效果：
参考地址：
技术总结：
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 弹框或者下拉框无法显示的问题，这篇文章介绍，参考：
其实无论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"); //全屏模式下设置弹出层的父级参考标准
}
});此时完整效果如下：
至此问题得到解决。
