button_status=true;
    var first_start=false;
    videofl();
    plays=[];
    chushihua=[];
    status = {};
	$(function() {
		$(".zhufenlei").click(function(e) {
			$(this).addClass('zhufenleiact').siblings().removeClass('zhufenleiact');
			var index = $(this).index();
			$('.two').eq(index).addClass('display_b').siblings().removeClass('display_b');
			var videoflid=$(e.target).attr("id")
            getvideourl(videoflid);
		});
	});
	function videofl(){
	   $.ajax({
        url: "/api/shikuangzd/getcate",
        type: "get",
        dataType: "json",
        async: false,
        success: function(data) {
            var morenfenlei=data.data[0].id
            $('.two_box').empty()
            for (var i=0;i<data.data.length;i++){
               var videofl=data.data[i];
               $("#zhufenlei_cnt").append('<p class="zhufenlei" id="'+videofl.id+'">'+videofl.name+'</p>');
                //浜岀骇   
                str= `<div class="two">
                          <!--瀛愬垎绫?->
                        <div class="videolist w1200" >
                        </div>
                    </div>
               `
               $('.two_box').append(str)
               status[videofl.id]=false
            }
            
            //榛樿鏄剧ず
        	$('.zhufenlei').eq(0).addClass('zhufenleiact').siblings().removeClass('zhufenleiact');
            $('.two').eq(0).addClass('display_b').siblings().removeClass('display_b');
            // 浜岀骇
            getvideourl(morenfenlei);
            
        }
    }); 
	}
	var time = 0;
	function refresh(videoid,obj){
	    if(!button_status){
	        return
	    }
	    if (time == 0) {
        time = 1; //璁惧畾闂撮殧鏃堕棿锛堢锛
 
        //鍚姩璁℃椂鍣紝鍊掕鏃秚ime绉掑悗鑷姩鍏抽棴璁℃椂鍣ㄣ€
        var index = setInterval(function(){
            time--;
            if (time == 0) {
                clearInterval(index);
            }
        }, 1000);
            if($('#playWind').length > 0){
    	       console.log($("#playWind"))
           	   //鍏抽棴鎵€鏈塛ebsocket
        	   stopPlay()
        	   //鍏抽棴鎵€鏈塛ebsocket
    	   }
            var videotimestamp = Date.parse(new Date());
    	   // console.log($(obj).parent())
    	   var videoparent = $(obj).parent()
    	   //娓呴櫎鎵€鏈塩avas
    	   $('#playWind').remove()
    	   $('.sl_img').css('height','100%')
    	   //缂╃暐鍥鹃殣钘
    	   videoparent.children('div').eq(1).css('height',0)
    	   
    	   
    	    $.ajax({
            url: "/api/shikuangzd/getdataone_ws?ids="+videoid+"",
            type: "get",
            dataType: "json",
            async: false,
            success: function(data) {
                //娓呴櫎鎵€鏈塩avas 
                button_status=false;
                
                // chushihua[videoparent.index()]=null
      
                // //閿€姣佸疄渚
                // videoparent.children().eq(0).remove()
                
                videoparent.children('div').eq(0).prepend(`<div id="playWind" onclick="FullScreen()" class="cavas"> </div>`);
                videoparent.prepend(`<div class="loading"> </div>`);
                
                init(data.data.url)
               
            }
        }); 
        }else{
            console.log("鍒锋柊閫熷害杩囧揩宸茬姝?)
        }
	    
	}
    function getvideourl(id){
        var videoflid=id;
        $.ajax({
        url: "/api/shikuangzd/getdata_ws?category="+videoflid+"",
        type: "get",
        dataType: "json",
        async: false,
        success: function(data) {
            var two_index = $('.display_b').index();
            if($(".two").eq(two_index).children('.videolist').children().length>0){
               $('.two').eq(two_index).addClass('display_b').siblings().removeClass('display_b');
              
            }else{
       
                for (var i=0;i<data.data.length;i++){
                  var videourl=data.data[i];
                  $(".two").eq(two_index).children('.videolist').append(`
                  <div class="video_cnt">
                       <div class="video_box">
                         
                       </div>       
                       <div class="sl_img" style="background-image: url(${videourl.imgurl});background-size:100% 100%;" onclick="refresh(${videourl.id},this)">
                       <img class="morenimg" src="/video_ws/play.png">
                       </div>
                     
                     <p style="float:left;">${videourl.cameraName}</p>
                     <p class="video_last_p"  style="float:right;" onclick="refresh(${videourl.id},this)">
                     <img class="shuaxin" src="/video_ws/shuaxin.png"/></p>
                     
                  </div>`);
                }
        //  
                $('.myVideo').each(function(i,item){
                let id =  'myVideo_'+videoflid+'_'+i
                setTimeout(function() {
                 chushihua.push(videojs(id));
                    let myPlayer = videojs(id);
                      videojs(id).ready(function() {
                         let myPlayer = this;
                         myPlayer.video_status=false;
                         myPlayer.play();
                         
                        //  console.log(this)
                        // 鑷姩鎾斁
                        myPlayer.on('timeupdate', function() {
                            // 鐩戝惉鎾斁鐘舵€
                            if(myPlayer.video_status==false){
                                 myPlayer.pause();
                            }
                    銆€銆€})
                    銆€銆€
                        myPlayer.on("pause", function(){
                            myPlayer.video_status=true;
                        })
                      });
                }, 0);
            })
            }
            var time=setTimeout(function(){
                console.log(first_start)
                if (first_start==false){
                    refresh(data.data[0].id,$(".video_last_p").eq(0))
                    first_start=true
                    clearTimeout(time)
                }
            },0)
            //棣栨杩涘叆鐣岄潰鑷姩鎾斁 first_start:鐘舵€
        }
    });

    }

    var oPlugin = null;
    var iWind = 0;  //绐楀彛绱㈠紩
    function init(url){
        
            //var szBrowserVersion = "";
            //var iBrowserVersion = -1;
            var aScript = [];
            var szUserAgent = navigator.userAgent.toLowerCase();
            // if (szUserAgent.match(/chrome\/([\d.]+)/) || szUserAgent.match(/Firefox\/([\d.]+)/)) {
            //szBrowserVersion = szUserAgent.match(/chrome\/([\d.]+)/)[1];
            //iBrowserVersion = parseInt(szBrowserVersion.split(".")[0], 10);
            if (szUserAgent.indexOf('win64') > -1 || szUserAgent.indexOf('x64') > -1) {
              aScript = ["/video_ws/h5player.min.js"];
            } else {
              aScript = ["/video_ws/h5player.min.js"];
            }
            // }
        
            getScript(aScript, function ()
            {
                
              //鍒濆鍖栨彃浠
              oPlugin = new JSPlugin({
                szId: "playWind",
                iWidth: 320,
                iHeight: 180,
                iMaxSplit: 1,
                iCurrentSplit: 2,
                szBasePath: "/video_ws/",
                oStyle: {
                  border: "#343434",
                  borderSelect: "#FFCC00",
                  background: "#000"
                },
                openDebug: true
              });
            
              initPlugin();
               
              realplay(url);
        
            });
        
        
            // var szWebsocketSessionID = "4cc81824281f214eceb5";  //璁惧鐩磋繛鍙栨祦uuid锛 娴佸獟浣撳彇娴佷笉闇€瑕佽鍙傛暟
            var szToken = "";
           
    }
    function getScript(url, fn)
    {
      if ("string" === typeof (url)) {
        url = [url]; //濡傛灉涓嶆槸鏁扮粍甯︿釜濂
      };
      var ok = 0;            //鍔犺浇鎴愬姛鍑犱釜js
      var len = url.length;  //涓€鍏卞嚑涓猨s
      var head = document.getElementsByTagName("head").item(0);
      var js = null;
      var _url;
      create = function (url)
      {//鍒涘缓js
        var oScript = null;
        oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src = url;
        head.appendChild(oScript);
        return oScript;
      };
      for (var i = 0; i < len; i++) {
        _url = url[i];
        js = create(_url);//鍒涘缓js
        fn && (js.onload = function ()
        {
          if (++ok >= len) {//濡傛灉鍔犺浇瀹屾墍鏈夌殑js鍒欐墽琛屽洖璋
            fn();
          }
        });
      };
    }
   
    function initPlugin()
    {
      oPlugin.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex)
        {  //鎻掍欢閫変腑绐楀彛鍥炶皟
          iWind = iWndIndex;
        //   console.log(iWndIndex);
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError)
        {  //鎻掍欢閿欒鍥炶皟
          console.error('window-${iWndIndex}, errorCode: ${iErrorCode}', oError);
        },
        windowEventOver: function (iWndIndex)
        {  //榧犳爣绉昏繃鍥炶皟
          //console.log(iWndIndex);
        },
        windowEventOut: function (iWndIndex)
        {  //榧犳爣绉诲嚭鍥炶皟
          //console.log(iWndIndex);
        },
        windowEventUp: function (iWndIndex)
        {  //榧犳爣mouseup浜嬩欢鍥炶皟
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: function (bFull)
        {  //鍏ㄥ睆鍒囨崲鍥炶皟
          console.log(bFull);
        },
        firstFrameDisplay: function (iWndIndex, iWidth, iHeight)
        {  //棣栧抚鏄剧ず鍥炶皟
        //   console.log(iWndIndex, iWidth, iHeight);
        },
        performanceLack: function ()
        {  //鎬ц兘涓嶈冻鍥炶皟
            console.log("鎬ц兘涓嶈冻鍥炶皟")
        }
      });
      oPlugin.JS_SetOptions({
        // bSupportSound: false  //鏄惁鏀寔闊抽锛岄粯璁ゆ敮鎸
        // bSupporDoubleClickFull: false,  //鏄惁鍙屽嚮绐楀彛鍏ㄥ睆锛岄粯璁ゆ敮鎸
        // bOnlySupportMSE: true  //鍙敮鎸丮SE
        // bOnlySupportJSDecoder: true  //鍙敮鎸丣SDecoder
      }).then(function ()
      {
        // console.log("JS_SetOptions");
      });
    }

    function getVersion()
    {
      oPlugin.JS_GetPluginVersion().then(function (szVersion)
      {
        // console.log(szVersion);
      });
    }
    function Destroy()
    {
      oPlugin.JS_DestroyWorker().then(function ()
      {
        // console.log("destroyWorker success");
      });
    }
    function SetSecretKey()
    {
      var secretKey = document.getElementById("secretKey").value;
      oPlugin.JS_SetSecretKey(iWind, secretKey).then(function ()
      {
        // console.log("JS_SetSecretKey success");
      }, function ()
      {
        // console.log("JS_SetSecretKey failed");
      });
    }

    function realplay(url)
    {
      let streamType = getRadioValue('streamType');
      oPlugin.JS_Play(url, {
        playURL: url,
        mode: 1,
        //session: szWebsocketSessionID,  //瀹氬埗璁惧
        //token: szToken,
      }, iWind).then(function ()
      {
        // console.log("realplay success");
        // 鎾斁鎴愬姛
        button_status=true;
        $('.loading').remove()
        
      }, function ()
      {
        // console.log("realplay failed");
      });
    }
    function getRadioValue(radioName)
    {
      let value = '';
      document.getElementsByName(radioName).forEach(el =>
      {
        if (el.checked) {
          value = el.value
        }
      })
      return value
    }
    function stopPlay() {
      console.log("宸插仠姝㈡挱鏀?)
      oPlugin.JS_Stop().then(
        () => {  console.log('stop realplay success') },
        e => { console.error(e) }
      )
    }
    //鍋滄鎾斁
    function playback()
    {
      var url = "ws://219.149.166.154:559/openUrl/XRLd5fy";  //"ws://10.19.141.64:7314/EUrl/ybcwxHO";
      var szStartDate = document.getElementById("sDate").value;
      var szEndDate = document.getElementById("eDate").value;
      let streamType = getRadioValue('streamType');
      if (document.getElementById("urlPlayback").value && szStartDate && szEndDate) {
        oPlugin.JS_Play(url, {
          // token: szToken,
          //娴佸獟浣
          playURL: url,  //鑱旂綉鍏变韩鐨勫彇娴乽rl
          mode: parseInt(streamType),
          //proxy: "10.5.6.8",  //proxy鍚庨潰鐨勫睘鎬т负浠ｇ悊鐨勭洰鏍囧湴鍧€锛屾牴鎹疄闄呮儏鍐甸厤缃紝鑱旂綉鍏变韩http涓嬮渶瑕佺敤鍒拌鍙傛暟
          //mode: "media",  //寤虹珛杩炴帴鐨剈rl鏂板涓€涓猰edia鑺傜偣, 鑱旂綉鍏变韩http涓嬮渶瑕佺敤鍒拌鍙傛暟
        }, iWind, szStartDate, szEndDate).then(function ()
        {
        //   console.log("playback success");
        }, function ()
        {
        //   console.log("playback failed");
        });
      } else {
        return;
      }
    }
    function playbackLocation()
    {
      var szStartDate = document.getElementById("sDate1").value;
      var szEndDate = document.getElementById("eDate1").value;
      oPlugin.JS_Seek(iWind, szStartDate, szEndDate).then(function ()
      {
        // console.log("playbackLocation success");
      }, function ()
      {
        // console.log("playbackLocation failed");
      });
    }
    function stop()
    {
      oPlugin.JS_Stop(iWind).then(function ()
      {
        // console.log("stop success");
      }, function (e)
      {
        // console.error("stop failed", e);
      });
    }
    function arrangeWindow(i)
    {
      oPlugin.JS_ArrangeWindow(i).then(function ()
      {
        // console.log("JS_ArrangeWindow success");
      });
    }

    function Pause()
    {
      oPlugin.JS_Pause(iWind).then(function ()
      {
        // console.log("Pause success");
      }, function (e)
      {
        // console.error("Pause failed", e);
      });
    }
    function Resume()
    {
      oPlugin.JS_Resume(iWind).then(function ()
      {
        // console.log("Resume success");
      }, function (e)
      {
        // console.error("Resume failed", e);
      });
    }
    function Slow()
    {
      oPlugin.JS_Slow(iWind).then(function (iRate)
      {
        console.log("Slow success, current rate", iRate);
      }, function (e)
      {
        console.error("Slow failed", e);
      });
    }
    function Fast()
    {
      oPlugin.JS_Fast(iWind).then(function (iRate)
      {
        console.log("Fast success, current rate", iRate);
      }, function (e)
      {
        console.error("Fast failed", e);
      });
    }
    function FrameForward()
    {
      oPlugin.JS_FrameForward(iWind).then(function ()
      {
        console.log("FrameForward success");
      }, function ()
      {
        console.log("FrameForward failed");
      });
    }
    function GetOSDTime()
    {
      oPlugin.JS_GetOSDTime(iWind).then(function (time)
      {
        console.log(new Date(time));
      });
    }

    function CloseSound()
    {
      oPlugin.JS_CloseSound(iWind).then(function ()
      {
        console.log("JS_CloseSound success");
      }, function ()
      {
        console.log("JS_CloseSound failed");
      });
    }
    function EnableZoom()
    {
      oPlugin.JS_EnableZoom(iWind).then(function ()
      {
        console.log("EnableZoom success");
      }).catch(err =>
      {
        console.warn(`EnableZoom failed: `, err)
      });
    }
    function DisableZoom()
    {
      oPlugin.JS_DisableZoom(iWind).then(function ()
      {
        console.log("DisableZoom success");
      }).catch(err =>
      {
        console.error("DisableZoom failed: ", err)
      });
    }
    function Enable3DZoom()
    {
      oPlugin.JS_Enable3DZoom(iWind, function (oRect)
      {
        console.log(oRect);
      })
    }
    function Disable3DZoom()
    {
      oPlugin.JS_Disable3DZoom(iWind).then(function ()
      {
        console.log("JS_Disable3DZoom success");
      }, function ()
      {
        console.log("JS_Disable3DZoom failed");
      });
    }
    function OpenSound()
    {
      var iRet = oPlugin.JS_OpenSound(iWind).then(function ()
      {
        console.log("JS_OpenSound success");
      }, function ()
      {
        console.log("JS_OpenSound failed");
      });
    }
    function SetVolume()
    {
      // oPlugin.JS_SetVolume (iWind, 32500).then(function () {
      //     console.log("JS_SetVolume success");
      // }, function () {
      //     console.log("JS_SetVolume failed");
      // });
      let volume = document.getElementById('volume').value;
      oPlugin.JS_SetVolume(iWind, parseFloat(volume)).then(
        () =>
        {
          console.log("JS_SetVolume success", volume);
        },
        (err) =>
        {
          console.error("JS_SetVolume failed", err);
        }
      );
    }
    function selectWnd()
    {
      oPlugin.JS_SelectWnd(3).then(function ()
      {
        console.log("JS_SelectWnd success");
      }, function ()
      {
        console.log("JS_SelectWnd failed");
      });
    }
    function GetVolume()
    {
      oPlugin.JS_GetVolume(iWind).then(function (i)
      {
        console.log(i);
      });
    }
    function CapturePicture(szType)
    {
      oPlugin.JS_CapturePicture(iWind, "img", szType).then(function ()
      {
        console.log("CapturePicture success");
      }, function ()
      {
        console.log("CapturePicture failed");
      });
    }
    function StopRealPlayAll()
    {
      oPlugin.JS_StopRealPlayAll().then(function ()
      {
        console.log("JS_StopRealPlayAll success");
      }, function ()
      {
        console.log("JS_StopRealPlayAll failed");
      });
    }
    function dateFormat(oDate, fmt)
    {
      var o = {
        "M+": oDate.getMonth() + 1, //鏈堜唤
        "d+": oDate.getDate(), //鏃
        "h+": oDate.getHours(), //灏忔椂
        "m+": oDate.getMinutes(), //鍒
        "s+": oDate.getSeconds(), //绉
        "q+": Math.floor((oDate.getMonth() + 3) / 3), //瀛ｅ害
        "S": oDate.getMilliseconds()//姣
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
      }
      return fmt;
    }
    function record()
    {
      var szTime = dateFormat(new Date(), "yyyyMMddhhmmssS");
      oPlugin.JS_StartSave(iWind, "10.17.137.229_01_" + szTime + ".mp4").then(function ()
      {
        console.log("record success");
      }, function ()
      {
        console.log("record failed");
      });;
    }
    function stopRecord()
    {
      oPlugin.JS_StopSave(iWind).then(function ()
      {
        console.log("stopRecord success");
      }, function ()
      {
        console.log("stopRecord failed");
      });;
    }
    function startTalk()
    {
      var talkurl = document.getElementById("talkurl").value
      oPlugin.JS_StartTalk(talkurl).then(function ()
      {
        console.log("startTalk success");
      }, function ()
      {
        console.log("startTalk failed");
      });
    }

    function stopTalk()
    {
      oPlugin.JS_StopTalk().then(function ()
      {
        console.log("stopTalk success");
      }, function ()
      {
        console.log("stopTalk failed");
      });
    }

    function TalkSetVolume()
    {
      let volume = document.getElementById('talkvolume').value;
      oPlugin.JS_TalkSetVolume(parseFloat(volume)).then(
        () =>
        {
          console.log("JS_TalkSetVolume success", volume);
        },
        (err) =>
        {
          console.error("JS_TalkSetVolume failed", err);
        }
      );
    }

    function TalkGetVolume()
    {
      oPlugin.JS_TalkGetVolume().then(function (i)
      {
        console.log(i);
      });
    }
    function fullSreen()
    {
      oPlugin.JS_FullScreenDisplay(true).then(function ()
      {
        console.log("JS_FullScreenDisplay success");
      }, function ()
      {
        console.log("JS_FullScreenDisplay failed");
      });
    }
    function fullScreenSingle()
    {
      oPlugin.JS_FullScreenSingle(iWind).then(function ()
      {
        console.log("JS_FullScreenSingle success");
      }, function ()
      {
        console.log("JS_FullScreenSingle failed");
      });
    }

    function triggerPrivateData(bTrue)
    {
      let nIntelType = parseInt(document.getElementById('nIntelType').value);
      let result = oPlugin.JS_RenderPrivateData(nIntelType, bTrue);
      console.info('triggerPrivateData', result)
    }

    function nIntelTypeChange()
    {
      let nIntelType = document.getElementById('nIntelType').value;
      subSelectElment = document.getElementById('nSubType')
      subSelectElment.innerHTML = '<option value="0" disabled>鍏ㄩ儴</option>'
      let subMap = {
        '0x00000010': [
          { value: 0x00000001, label: '鐏偣妗嗘樉绀? },
          { value: 0x00000002, label: '鐏偣鏈€楂樻俯鏄剧ず' },
          { value: 0x00000004, label: '鏈€楂樻俯浣嶇疆鏄剧ず' },
          { value: 0x00000008, label: '鏈€楂樻俯搴﹁窛绂? },
        ],
        '0x00000020': [
          { value: 0x00000001, label: '妗嗘祴娓? },
          { value: 0x00000002, label: '绾挎祴娓? },
          { value: 0x00000004, label: '鐐规祴娓? },
        ],
        '0x00000040': [
          { value: 0x00000001, label: '浜虹殑杞ㄨ抗淇℃伅' },
          { value: 0x00000002, label: '杞︾殑杞ㄨ抗淇℃伅' },
        ],
        '0x00000080': [
          { value: 0x00000001, label: '鐑熺伀灞忚斀' },
          { value: 0x00000002, label: '瑙勫垯搴熸皵妫€娴? },
          { value: 0x00000004, label: '鐩爣搴熸皵妫€娴? },
        ]
      }
      subMap[nIntelType].forEach(item =>
      {
        let optionElement = document.createElement('option')
        optionElement.value = item.value
        optionElement.innerText = item.label
        subSelectElment.appendChild(optionElement)
      });
    }

    function triggerPrivateDataSub(bTrue)
    {
      let nIntelType = parseInt(document.getElementById('nIntelType').value);
      let nSubType = parseInt(document.getElementById('nSubType').value);
      let result = oPlugin.JS_RenderPrivateDataEx(nIntelType, nSubType, bTrue);
      console.info('triggerPrivateDataSub', result)
    }

    function triggerJSDecoderLog(bFlag)
    {
      oPlugin.JS_SetLogFlag(bFlag);
    }
    //杩涘叆鍏ㄥ睆
    function FullScreen()
    {
      var ele = document.getElementById('playWindow0');
      if (ele.requestFullscreen) {
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen();
      }
    }
    //閫€鍑哄叏灞
    function exitFullscreen()
    {
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    }