萤石云最近监控展示界面

templates/backstageNet/jk/equipmanage_jk.html

@@ -172,17 +172,18 @@
 
         #divMain .aSelected {
             z-index: 9;
-            border: 3px solid #61615e;
+            border: 3px solid #49dfb4;
         }
 
         #divMain a,
         a:visited {
             float: left;
-            border: 1px solid #000;
+            /* border: 1px solid #000; */
             margin: 0 -1px -1px 0;
             position: relative;
             text-decoration: none;
             box-sizing: border-box;
+            border: 3px solid #000;
         }
 
         #divMain .a1 {
@@ -246,6 +247,7 @@
             color: #fff;
             background: #000;
             padding: 3px;
+            display: none;
         }
 
         /* 控制按钮 */
@@ -523,8 +525,11 @@
                 else
                     html += "<a id=\"a_" + i + "\" class=\"a" + n + "\">";
 
-                html += "<span id='span_deviceSerial_" + i + "' class='equipname' style=''></span>";
+                html += "<span id='span_ConnectionType_" + i + "' style='display:none'></span>";
+                html += "<span id='span_deviceSerial_" + i + "' style='display:none'></span>";
                 html += "<span id='span_cameraNo_" + i + "' style='display:none'></span>";
+                html += "<span id='span_playTime_" + i + "' style='display:none'></span>";
+
 
                 html += "<table id=\"table_" + i + "\" style=\"width: " + width + "; height: " + height + "; text-align:center;vertical-align:middle;\">";
                 html += "<tr style='display:none;'>";
@@ -597,6 +602,34 @@
 
         var spanIdx = "";
 
+        function StartPlayTime() {
+            setInterval(function () {
+
+                for (var i = 0; i <= 16; i++) {
+                    var obj = $("#span_playTime_" + i);
+
+                    if (obj.length > 0) {
+
+                        if (obj.html() != "") {
+                            if ($("#span_ConnectionType_" + i).html() != "1")
+                                continue;
+
+                            var t = parseInt((new Date().getTime() - parseInt(obj.html())) / 1000);//播放时间，秒
+
+                            if (t >= 5 * 60) {//5分钟
+                                $("#video_" + i).html("<div style='font-size:14px;color:yellow;padding:10px;text-align:center;'>抱歉，由于长时间没有操作，4G摄像头进入自动休眠模式。</div>");
+                                $("#a_" + i).removeClass("noborder");
+                            }
+                        }
+                    }
+                }
+
+            }, 1000);
+        }
+        //监听播放时间
+        StartPlayTime();
+
+        var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
 
         //预览函数
         function StartPlay(id, connectionType, liveStatus, rtmp, hls, deviceSerial, cameraNo, title, obj) {
@@ -621,14 +654,31 @@
 
             $("#title_" + curIndex).html(title);
 
-            var playHtml = "<video id='myPlayer" + curIndex + "' style='width: 100%; height: 100%' class='videoNum" + divNum + "' poster='' controls playsinline webkit-playsinline autoplay>";
+            var playHtml;
+            var script;
+             
 
-            playHtml += "<source src='" + hls + "' type='' />";
-            playHtml += "</video>";
+            if (isIE) {
+                playHtml = "<video id='myPlayer" + curIndex + "' style='width: 100%; height: 100%' class='videoNum" + divNum + "' poster='' controls playsinline webkit-playsinline autoplay>";
+
+                //playHtml += " <source src='" + rtmp + "' type='rtmp/flv' />";
+                playHtml += "<source src='" + hls + "' type='application/x-mpegURL' />";
+                playHtml += "</video>";
+
+                script = document.createElement("script");
+                script.type = "text/javascript";
+                script.appendChild(document.createTextNode(" new EZUIPlayer('myPlayer" + curIndex + "');")); 
+            }
+            else {
+
+                playHtml = "<iframe   id='playFrame" + curIndex + "'  src='https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/" + deviceSerial + "/" + cameraNo + ".hd.live&autoplay=1&accessToken=at.d2trwvdod5bxxlr4dug8le6wb0ugbi2h-173pi8ymy3-1882umg-zrib7cj3f&templete=2'  width='100%' height='100%' allowfullscreen frameborder='0' allowtransparency=true></iframe>"
+
+                script = document.createElement("script");
+                script.type = "text/javascript";
+                script.appendChild(document.createTextNode(" IframeOnClick.track(document.getElementById('playFrame" + curIndex + "'), function() { setCurIndex(" + curIndex + " ); }); "));
+
+            }
 
-            var script = document.createElement("script");
-            script.type = "text/javascript";
-            script.appendChild(document.createTextNode(" new EZUIPlayer('myPlayer" + curIndex + "');"));
 
             $("#video_" + curIndex).html(playHtml);
             $("#video_" + curIndex).append(script);
@@ -637,10 +687,43 @@
             if ($("#a_" + (curIndex + 1)).length > 0)
                 SetAutoNext(curIndex + 1);
 
-            //SetPtzControl();
-
             windowResize();
         }
+        //iframe点击事件
+        var IframeOnClick = {
+            resolution: 200,
+            iframes: [],
+            interval: null,
+            Iframe: function () {
+                this.element = arguments[0];
+                this.cb = arguments[1];
+                this.hasTracked = false;
+            },
+            track: function (element, cb) {
+                this.iframes.push(new this.Iframe(element, cb));
+                if (!this.interval) {
+                    var _this = this;
+                    this.interval = setInterval(function () { _this.checkClick(); }, this.resolution);
+                }
+            },
+            checkClick: function () {
+                if (document.activeElement) {
+                    var activeElement = document.activeElement;
+                    for (var i in this.iframes) {
+                        if (activeElement === this.iframes[i].element) { // user is in this Iframe
+                            if (this.iframes[i].hasTracked == false) {
+                                this.iframes[i].cb.apply(window, []);
+                                this.iframes[i].hasTracked = true;
+                            }
+                        } else {
+                            this.iframes[i].hasTracked = false;
+                        }
+                    }
+                }
+            }
+        };
+
+
 
         function SetAutoNext(idx) {
             if (AutoNext) {