前段时间项目中做视频直播用到了百度云的音视频直播LSS,由于需求需要在pc端要加一些自定义的按钮,因此需要把百度云播放器放在页面弹框里面,而layer算是比较好用的一款弹框插件,做出的效果图如图:
弹框下面还有截图的功能,截图是用H5的canvas能直接截取video标签里内容drawImage()方法,点击截图按钮效果如图:
保存按钮直接上传到服务器,可以看到图一背景还引入了百度地图,当时做这个功能的时候确实花费了一点精力,因为页面的功能比较复杂,后面会把详细的js代码po出,当是给自己的一点积累吧,不过这些都不是这篇博客的主角,这篇博客主要是解决一个百度云音视频直播全屏时与layer弹框冲突的bug,当初这个功能好不容易告一段落的时候,发现点击百度云播放器右下角的全屏按钮会出现这样的奇怪问题:
可以看到的是本来应该全屏的视频却跑到左下角去了,而且把页面的样式全挤乱了,这也太奇葩了,度娘了好久,基本上找不到解决方法,可能把百度云播放器跟layer结合使用人很少吧,没办法只能自己找问题了,之前准备看百度云播放器web sdk里面的cyberplayer.js的,结果发现头大了,那就还是从layer找原因吧,看页面的结构:感觉就是这个layui-layer类的问题,我在页面直接删除这个类,果然可以全屏了,于是就在js里面点击全屏按钮的时候移除掉这个类,果然可以全屏了:
那么在点击Esc退出全屏或者点右下角按钮恢复原屏的时候再加上layui-layer这个类不就ok了。然而,并没有我想的这么简单,在我点击Esc的时候,发现需要点两下才能添加layui-layer,点一下的时候都不进keydown事件,解决了一个问题又来了新的问题。。。正在犯难的时候想着layui-layer应该是这个弹框的主要类名,直接移除可能是会有问题,于是就看到在这个类的后面还有layui-layer-page,layer-anim,layui-layer-camera,三个类名,最后一个是我自定义弹框样式的可以不用管,那么在不移除layui-layer情况下,移除layui-layer-page和layer-anim会不会有什么变化呢,经过测试移除layer-anim也是可以全屏显示的,而且。。。在移除layer-anim后全屏,点击Esc或者右下角恢复原屏时添加layer-anim类也是可以复原的,至此bug才得到了解决,这 bug着实困扰了我一段时间。
最后作为积累,把这个功能的全部js都贴出来,里面的截屏函数,地图引用和自定义地图控件,保存上传截图等方法还是值得积累的~~~
/**
* Created by wyj on 2017/12/28. 门店巡视
*/
(function (define) {
'use strict';
define(function (require, exports, module) {
var controller = {
//本页面对象相关元素
thisObject:{
//标题
title:"门店巡视",
//本页面的主html
mainHtml:null,
//门店信息
storeData:null,
//视频流参数
streamname:'',
domain:'',
appname:'',
//截图数量
imgCount:0,
//批量保存截图
pathListArray:[],
//分页参数
pagerData:{
pageSize:6,//得到每页显示的条数,默认每页显示6条
pageIndex:1,//得到当前页,以便向服务端请求对应页的数据,默认第一页
counts:"",//总数量
otherValue:""
},
//地图对象
myMap:null,
},
//后台的方法的url
RepositoryUrl:"kxls/basedata/storeinspect/repository/mainRepository",
//初始化百度地图
initBaiduMap:function(){
require(['bmap'],function(bmap){
var myMap = new BMap.Map("map", {enableMapClick:false});//构造底图时,关闭底图可点功能
//地图对象公开到外面,方便其他函数调用
controller.thisObject.myMap = myMap;
//判断当前登录账号是集团账号还是网点账号 3--网点账号
if(window.$context.$api.auth.getCurrentUser().usertype!=3){
var size = new BMap.Size(10, 15);
myMap.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
// 切换城市之前事件
onChangeBefore: function(){
$(".curStore",controller.thisObject.mainHtml).text("选择门店").removeAttr("data-cecode").removeAttr("data-dealerdbcode");
$(".curCamera",controller.thisObject.mainHtml).text("选择摄像机").removeAttr("data-cameraip");
},
// 切换城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));
}
//自定义控件
// 定义一个控件类,即function
function storeCameraControl(){
// 默认停靠位置和偏移量
this.defaultOffset = new BMap.Size(0, 0);
}
// 通过JavaScript的prototype属性继承于BMap.Control
storeCameraControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
storeCameraControl.prototype.initialize = function(myMap){
//判断当前登录账号是集团账号还是网点账号 3--网点账号
if(window.$context.$api.auth.getCurrentUser().usertype==3){
// 创建一个DOM元素,先创建jQuery对象
var myMapHeaderBox = $('<ul class="myMapHeader">'
+ '<li style="font-size: 16px;width:17%;"><span class="glyphicon glyphicon-facetime-video"></span>视频巡检系统</li>'
+ '<li style="width:45%;text-align:center;font-size:18px;cursor:auto;">'
+ '<div><img src="../../../../../wx/img/yaoyiyao/dpca_logo.png" style="width: 20%;margin: 0px 10px 5px 10px;" />'+controller.thisObject.storeData[0].DealerName+'</div>'
+ '</li>'
+ '<li class="chooseStore" style="display:none;">'
+ '<p><i class="wxls-iconfont icon-weibiaoti1fuzhi02"></i>'
+ '<span class="curStore" data-cecode="'+controller.thisObject.storeData[0].cecode+'" data-dealerdbcode="'+controller.thisObject.storeData[0].DealerDBCode+'" data-loginStatus="'+controller.thisObject.storeData[0].loginStatus+'">选择门店</span></p>'
+ '</li>'
+ '<li class="chooseCamera" >'
+ '<p><i class="glyphicon glyphicon-facetime-video" style="color:#fff"></i><span class="curCamera">选择摄像机</span></p>'
+ '</li>'
+ '<li class="chooseCameraList">'
+ '<div class="cameraMenu">'
+ '<span class="triangle-up"></span>'
+ '<ul>'
+ '</ul>'
+ '</div>'
+ '</li>'
+ '<li class="iconBtn"><span class="glyphicon glyphicon-picture" title="图片列表"></span></li>'
+'</ul>');
}else{
// 创建一个DOM元素,先创建jQuery对象
var myMapHeaderBox = $('<ul class="myMapHeader">'
+ '<li style="font-size: 16px;width:17%;"><span class="glyphicon glyphicon-facetime-video"></span>视频巡检系统</li>'
+ '<li style="width:45%;">'
+ '<input class="myMapSearchInput" type="text" placeholder="搜索门店,地址" />'
+ '<i class="icon-search" style="position:absolute;top:21px;right:15px;font-size:16px;cursor:pointer;"></i>'
+ '</li>'
+ '<li class="chooseStore" >'
+ '<p><i class="wxls-iconfont icon-liansuoOO"></i><span class="curStore">选择门店</span></p>'
+ '</li>'
+ '<li class="chooseStoreList">'
+ '<div class="storeMenu">'
+ '<span class="triangle-up"></span>'
+ '<ul>'
+ '</ul>'
+ '</div>'
+ '</li>'
+ '<li class="chooseCamera" >'
+ '<p><i class="glyphicon glyphicon-facetime-video" style="color:#fff"></i><span class="curCamera">选择摄像机</span></p>'
+ '</li>'
+ '<li class="chooseCameraList">'
+ '<div class="cameraMenu">'
+ '<span class="triangle-up"></span>'
+ '<ul>'
+ '</ul>'
+ '</div>'
+ '</li>'
+ '<li class="iconBtn"><span class="glyphicon glyphicon-picture" title="图片列表"></span></li>'
+'</ul>');
}
// 添加DOM元素到地图中
myMap.getContainer().appendChild(myMapHeaderBox[0]);
// 将DOM元素返回
return myMapHeaderBox[0];
}
// 创建控件
var myStoreCameraCtrl = new storeCameraControl();
// 添加到地图当中
myMap.addControl(myStoreCameraCtrl);