一个视频监控的代码,大窗口里有4个iframe,可以通过放大iframe来实现切换,每个iframe里都有时间显示的功能,现在问题来了,时间显示在chrome浏览器正常显示,但是在360浏览器里就不太正常了,4个iframe一个显示有卡顿,另外3个iframe在切换的瞬间时间会跳动的特别快,试了好久,也调试过缓存的问题,但还是不行,麻烦各位大神了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>地图应用</title>
<link href="css/base.css" rel="stylesheet" />
<link href="css/ol4.css" rel="stylesheet" />
<link href="css/bootstrap4.0.css" rel="stylesheet" />
<!--zTree插件-->
<link href="css/zTree/zTreeStyle.css" rel="stylesheet" />
<!--时间插件-->
<link href="css/datePicker/datetimepicker.min.css" rel="stylesheet" />
<!--弹窗插件-->
<link href="css/layer/theme/default/layer.css" rel="stylesheet" />
<link href="css/mapsite.css" rel="stylesheet" />
<link href="css/colpick.css" rel="stylesheet" />
<link href="css/map.css" rel="stylesheet" />
<script src="scripts/libs/jquery.min.js"></script>
<script src="scripts/libs/ckplayer/ckplayer.js"></script>
<script src="scripts/libs/bootstrap4.0.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/myVideoPlayerHelper.js"></script>
<script src="scripts/libs/video/flowplayer-3.2.8.min.js"></script>
</head>
<body onload="PageLoad()" ondragstart="return false">
<!--左下角实时监控视屏-->
<div id="h1004" class="listContainer" style="display: block;">
<h1>实时监控<div style="float:right;"><img src="./images/tools/full.png" class="fullImage" onclick="fullRealTimeMonitoringModal($(this))"/><span class="myclosebutton closeLevel" style="padding:0 8px;" onclick="showDefaultFourVideo()">×</span></div></h1>
<span class="switchCarousel" style="display:none;"><img style="margin: 7px 0;" src="./images/tools/swiper.png" alt="" /></span>
<div id="carousel" style="height: 100%;">
<div class="cameraWrapper">
<img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
<div id="camera1" class="camera"></div>
</div>
<div class="cameraWrapper">
<img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
<div id="camera2" class="camera"></div>
</div>
<div class="cameraWrapper">
<img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
<div id="camera3" class="camera"></div>
</div>
<div class="cameraWrapper">
<img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
<div id="camera4" class="camera"></div>
</div>
<div class="clearfix"></div>
</div>
<div id="h1004Video" style="display: none;">
<div id="camera5" class="camera"></div>
</div>
</div>
<script type="text/javascript">
function PageLoad() {
param.videoUrl = "rtmp://58.211.54.69/hls/cctv";
param.defaultVideos = ["58","105","57","110"];
//实例化功能工厂
var helpers = [
new MyVideoPlayerHelper()];
IPlayer.show();
IPlayer.showDefaultFourVideo();
}
</script>
</body>
</html>