使用layer.open做视频弹出层时遇到的一些问题汇总
使用layer.open做视频弹出层时遇到的一些问题汇总
- 1. 介绍
- 2. 开始使用
- 3. 为什么点击元素弹不出来
- 4. 为什么出现Error 404
- 5. 织梦本地视频和视频封面图片的调用
- 6. 视频弹出现滚动条
- 6.1. 引入url的视频出现滚动条
- 6.2. 引入本地视频出现滚动条
- 6.3. 视频点击弹出播放后父页面自动滚回顶部
- 6.4. 播放视频/打开图片底部出现白边）
- 7. 总结
- 附：未解决的问题
- 视频全屏之后关闭视频父页面依然自动滚回顶部（chrome浏览器）
1. 介绍
最近在使用layer做视频弹出播放的时候遇到一些问题，记录一下，方便后期查阅。
layer是一款web弹层组件，底层的东西已经写好，直接调用即可，功能非常强大，更多详细介绍可以去官网了解，解释的很详细，虽然简单，但是一不小心就会出错。
同时他们有一个自己的社区，更多的问题可以在上面找到，大家如果出现的问题在百度、谷歌上找不到的可以去上面找找看。
进入Fly社区
现在将我自己在使用过程中遇到的一些问题总结一下：
2. 开始使用
在官网下载获得 layer 文件包后，解压并将 layer 整个文件夹存放到你项目的任意目录，
不要拆分结构
不要拆分结构
不要拆分结构
不要拆分结构
重要的事情多说一遍。
使用时，只需引入 layer.js 即可。
引用官网的代码：
<html>
<head>
<meta charset="utf-8">
<title>开始使用layertitle>
<script src="jQuery的路径">script>
<script src="layer.js的路径">script>
head>
<body>
<script>
//弹出一个提示层
$('#test1').on('click', function(){
layer.msg('hello');
});
script>
body>
html>
容易出现的问题：
1、jQuery必须是1.8以上，而且必须放在layer.js的前面.
2、如果是下载的别人的插件，一定要按照他的目录结构，不要擅自改变文件的目录结构。
3. 为什么点击元素弹不出来
当配置好之后，点击相应的元素，但是效果没出来（比如弹出层无法弹出）。
1：检查你的代码有没有错误；
2：检查你的目录结构有没有错误;
3：如果是织梦本地调试的话，里面的#改成#0;或者javascript:viod();避免点击之后跳转到页面最顶端。
我在第二步没注意，调试了十几遍最后才发现问题所在，
总之一定要细心。期间一直以为是js代码没有加载，后来加入alert之后一样显示没有任何问题，纠结了很久。
4. 为什么出现Error 404
OK，上面配置好之后，激动人心的时候到了，点击相应元素，出现404，404基本就是没有找到这个文件的意思，然后百度百度，谷歌谷歌，csdn，csdn，但是我忘了最重要的一步，就是 f12打开console查看错误。
原来还是我有些文件放错了，要根据console的提示把文件放好之后，在刷新，结果搞定。
所以最重要的还是不要擅自改变文件的位置，特别是下载别人插件的。
5. 织梦本地视频和视频封面图片的调用
我是用的织梦后台，调用遵循织梦的规则即可。
type改为1，然后在content部分插入视频即可。图片我是在html代码中调用的。
<script type="text/javascript">
//layer播放本地视频
$(".video").on("click",".inner",function(){
layer.open({
type: 1,
title: false,
closeBtn: 1, //不显示关闭按钮
shade: 0.7,
scrollbar:false,
skin: 'layer-alert-video',
area: '960px',
anim: 0,
scrollbar:true,//防止父页面自动跳到页面顶端
content: ''
});
});
</script>
6. 视频弹出现滚动条
调用url的视频我的没有出现滚动条，但是当我用织梦调用本地视频时出现滚动条。解决办法：
layer.open({
......,
area: '960px',
......
});
area不要设置高度或者设置成auto即可，但是不要设置成以下这种
layer.open({
......,
area: ['960px'],
......
});
因为设置成数组形式表示的是宽高。一个值时就是宽。但是只设置一个值时和上边的非数组形式不一样。也就是不会出现自适应。
6.1. 引入url的视频出现滚动条
如果引入url的视频出现滚动条只需加上content: [video, 'no']即可解决
6.2. 引入本地视频出现滚动条
按照第6步设置好之后，引入本地视频还是出现滚动条，给你的视频加上一个宽、高均为100%即可解决，加在content里面，如下：
content: ''
6.3. 视频点击弹出播放后父页面自动滚回顶部
视频点击弹出播放后父页面自动滚回顶部，加入scrollbar:true,//防止父页面自动跳到页面顶端 即可解决。
但是这里面有一个问题，加入scrollbar:true之后，虽然视频点击弹出播放后父页面不会自动滚到顶部，但是此时的父页面是可以滚动的。
6.4. 播放视频/打开图片底部出现白边）
点击播放视频或者弹出图片的时候底部出现白边，如下这种情况：
一般找到layui框架的元素layui-tab-content给其添加height即可，比如：
.layui-tab-content{
height: 100vh;
}
但是我添加之后发现还是不行，最后经过调试发现是受到linel-height的影响，所以我只需要在content部分设置line-height:0即可完美解决。
content: ''
最后效果如下：
7. 总结
其实layer还是很好用，很强大的，但是需要注意的就是一定要按照官方文档来操作，不要擅自拆分结构，如果是用的别人的插件也不要随意改变。其他的功能暂时还没试，后期用到的时候再试试其他功能。
记录一下，以免哪天给搞忘了。
附：未解决的问题
视频全屏之后关闭视频父页面依然自动滚回顶部（chrome浏览器）
不过我发现我在chrome中调试的时候只要是视频全屏之后再退出，父页面都会回滚到最顶部，但是在firefox中就没问题，不知道这是什么原因。
如果有知道的麻烦告知一下。
引用文档
[1]:layer.open调用本地视频
[2]:layer.open 高度自适应处理