yf_zd
/
qxzSy


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <meta name="renderer" content="webkit">
    <title>测试页面</title>
    <style>
        body {
            background: #fff;
        }

        .flashDownDiv,
        .nullData {
            text-align: center;
            font-size: 14px;
            height: 630px;
        }

        .flashDownDiv p:first-child,
        .nullData p:first-child {
            padding-top: 10%;
        }

        .flashShowDiv,
        .flashDownDiv,
        .nullData {
            display: none;
        }

        /* 视频框 */

        .equipname {
            position: absolute;
            display: none;
        }

        #divMain .a1 {
            width: 100%;
            height: 100%;
        }

        #divMain .a4 {
            width: 50%;
            height: 50%;
        }

        #divMain .a9 {
            width: 33.33%;
            height: 33.33%;
        }

        #divMain .a16 {
            width: 25%;
            height: 25%;
        }

        #divMain a,
        a:visited {
            float: left;
            border: 1px solid #000;
            margin: 0 -1px -1px 0;
            position: relative;
            text-decoration: none;
        }

        #divMain .aSelected {
            z-index: 9;
            border: 1px solid #dbffc9;
        }

        /* 多屏选择 */

        .v1 {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }

        .v1,
        .v4,
        .v9,
        .v16 {
            color: #fff;
            font-size: 24px;
        }
        .v1{
            background: url(../static/img/jkbtn/1.png) no-repeat center;
        }
        .v1:hover,.v1.active{
            background: url(../static/img/jkbtn/11.png) no-repeat center;
        }

        .v1.active,
        .v1:hover {
            color: #37CAB9;
        }

        .v4 {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }
        .v4{
            background: url(../static/img/jkbtn/2.png) no-repeat center;
        }
        .v4:hover,.v4.active{
            background: url(../static/img/jkbtn/22.png) no-repeat center;
        }

        .v4.active,
        .v4:hover {
            color: #37CAB9;
        }

        .v9 {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }
        .v9{
            background: url(../static/img/jkbtn/3.png) no-repeat center;
        }
        .v9:hover,.v9.active{
            background: url(../static/img/jkbtn/33.png) no-repeat center;
        }

        .v9.active,
        .v9:hover {
            color: #37CAB9;
        }

        .v16{
            background: url(../static/img/jkbtn/4.png) no-repeat center;
        }
        .v16:hover,.v16.active{
            background: url(../static/img/jkbtn/44.png) no-repeat center;
        }
        .v16,
        .v16:hover {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }

        /* 列表 */

        .scrollDiv {
            overflow-x: hidden;
            line-height: 40px;
            height: 100%;
            width: 220px;
        }

        #jkList {
            width: 220px;
        }

        #jkList>div {
            color: #fff;
            vertical-align: middle;
            line-height: 40px;
            padding: 0px 15px;
            white-space: nowrap;
            width: 220px;
            /* text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer; */
        }

        #jkList>div.active,
        #jkList>div:hover {
            color: rgb(255, 255, 0);
            background-color: #36404D;
        }

        /* 控制 */

        .ctrlBox {
            /* display: none; */
            position: absolute;
            /* background: #685f5f; */
            z-index: 99999;
            padding: 0 20px;
            width: 220px;
            height: 275px;
            left: 0;
            bottom: 20px;
            /* border: 1px solid #000; */
            border-radius: 30px 30px 50px 50px;
        }

        .addCtrl,
        .cutCtrl,
        .minusCtrl,
        .directionCtrl>div {
            position: absolute;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }

        .addCtrl {
            top: 50px;
            background: url(../static/img/jkbtn/jkadd.png) no-repeat center;
            background-size: 100% 100%;
        }

        .cutCtrl {
            top: 50px;
            left: 50%;
            margin-left: -18px;
            background: url(../static/img/jkbtn/cut.png) no-repeat center;
            background-size: 100% 100%;
        }

        .minusCtrl {
            top: 50px;
            right: 11px;
            background: url(../static/img/jkbtn/jkminus.png) no-repeat center;
            background-size: 100% 100%;
        }

        .directionCtrl {
            position: absolute;
            width: 200px;
            height: 200px;
            bottom: -20px;
            background: url(../static/img/jkbtn/jkctrl.png) no-repeat center;
            background-size: 90% 90%;
        }

        .upCtrl {
            top: 20px;
            left: 50%;
            margin-left: -25px;
        }

        .leftCtrl {
            left: 20px;
            top: 50%;
            margin-top: -25px;
        }

        .bottomCtrl {
            bottom: 20px;
            left: 50%;
            margin-left: -25px;
        }

        .rightCtrl {
            right: 20px;
            top: 50%;
            margin-top: -25px;
        }

        /* fenpei */

        .fenpei {
            color: #fff;
            text-align: center;
        }

        .fenpei span {
            padding: 3px 5px;
        }

        .fenpei .jianbtn,
        .fenpei .jiabtn {
            cursor: pointer;
        }

        #downpath {
            width: 100%;
            height: 80px;
            resize: none;
            margin-top: 10px;
        }

        .page-header {
            margin: 0 0 12px;
            border-bottom: 1px dotted #E2E2E2;
            padding-right: 35px;
            padding-top: 7px;
            text-align: right;
        }

        .page-header a {
            color: #31b4ff;
            font-size: 16px;
        }
        .page-header a:hover{
            color: #0074b6;
        }
        /* 查看图片按钮 */
        .lookjkPhoto{
            color: #cfa301;
            margin: 0 5px;
            line-height: 25px;
        }
        .lookjkPhoto:hover{
            color: rgb(255, 255, 0);
        }
        .lookjkPhoto:active,.lookjkPhoto:focus{
            color: #cfa301;
        }
        .jkNameSpan{
            vertical-align: middle;
            display: inline-block;
            width: 51%;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
        }
        table{
            border: none;
        }
        #windowCtrl{
            text-align: center;
        }
        #playback{
            background: url(../static/img/playBackBj.png) no-repeat;
            width: 80px;
            height: 30px;
            background-size: 100% 100%;
            border: none;
            color: #868686;
        }
        /* 监控在线图标 */
        .onLine{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #2ff235;
            vertical-align: middle;
            margin-right: 10px;
        }
        .offLine{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #8b8a8a;
            vertical-align: middle;
            margin-right: 10px;
        }
    </style>
</head>
<script>
</script>

<body>
    <script src="{% static '/lib/js/ezuikit.js' %}"></script>
    <div class="content">
        <div class="searchCover page-header">
            <a href="equipmanage_jk1" target="BoardRight">
                切换成插件播放
                <i class="fa fa-share" aria-hidden="true"></i>
            </a>
        </div>
        <div class="innerTable">
            <div class="nullData">
                <p>暂无设备</p>
                <p>请先添加设备</p>
            </div>
            <div class="flashDownDiv">
                <p>您没有安装flash插件，无法播放视频</p>
                <p>请先下载安装最新的flash插件</p>
                <a href="https://get.adobe.com/cn/flashplayer/" class="btn btn-primary">
                    <i class="fa fa-download" aria-hidden="true"></i>
                    下载视频控件
                </a>
            </div>

            <div class="flashShowDiv">
                <div style="display: table; width: 100%;" id="jk_main">
                    <!-- 视频框 -->
                    <div style="display: table-cell;">
                        <div id="divMain" style="width: 100%; height:870px; background: rgb(49, 58, 71); margin: auto; padding: 15px; position: relative; z-index: 9999;">

                        </div>
                        <div style="clear: both; width: 100%; height: 45px; line-height: 45px; background: rgb(49, 58, 71); padding-left: 13px;">
                            <span class="v1" id="span_V1" onclick="CreateVidewDiv(1);">
                                
                            </span>
                            <span class="v4" id="span_V4" onclick="CreateVidewDiv(4);">
                                
                            </span>
                            <span class="v9" id="span_V9" onclick="CreateVidewDiv(9);">
                                
                            </span>
                            <span class="v16" id="span_V16" onclick="CreateVidewDiv(16);">
                                
                            </span>
                            <!-- <span class="v4" id="span_V4" onclick="CreateVidewDiv(9);"></span> -->
                            <!-- <span class="v4" id="span_V4" onclick="CreateVidewDiv(9);">qqq</span> -->
                            <!-- <button id="playback">查看回放</button> -->
                        </div>
                    </div>
                    <!-- 控制 -->
                    <div id="div_ControlPanel" style="position:relative;display: table-cell; width: 220px; height: 778px; overflow: hidden; background: rgb(70, 78, 96); vertical-align: top;">
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    <div class="scrollDiv">
                                        <div id="jkList">
                                            <!-- <div>
                                                <img src="{% static 'img/sxtIcon.png' %}" width="26px" alt=""> 祥泰
                                            </div>
                                            <div class="active">
                                                <img src="{% static 'img/sxtIcon.png' %}" width="26px" alt=""> 祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰祥泰
                                            </div>
                                            <div>
                                                <img src="{% static 'img/sxtIcon.png' %}" width="26px" alt=""> 祥泰
                                            </div> -->
                                        </div>
                                        <div class="fenpei">
                                            <span class="jianbtn" onclick="getjklistFun('jian')">
                                                <img src="{% static 'img/jkupicon.png' %}" width="26px" alt="">
                                            </span>
                                            <span id="currPageNum">1</span>
                                            <span>/</span>
                                            <span id="totalPageNum">9</span>
                                            <span class="jiabtn" onclick="getjklistFun('jia')">
                                                <img src="{% static 'img/jkdownicon.png' %}" width="26px" alt="">
                                            </span>
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <!-- <div><button id="playback1">查看回放</button></div> -->
                                    <div class="ctrlBox">
                                        <div id="windowCtrl">
                                            <button id="playback">查看回放</button>
                                        </div>
                                        <div class="addCtrl" onmousedown="configCamera(this,'move',8)" onmouseup="configCamera(this,'stop')"></div>
                                        <div class="cutCtrl" onclick="configCamera(this,'takephoto','')"></div>
                                        <div class="minusCtrl" onmousedown="configCamera(this,'move',9)" onmouseup="configCamera(this,'stop')"></div>
                                        <div class="directionCtrl">
                                            <div class="upCtrl" onmousedown="configCamera(this,'move',0)" onmouseup="configCamera(this,'stop')"></div>
                                            <div class="leftCtrl" onmousedown="configCamera(this,'move',2)" onmouseup="configCamera(this,'stop')"></div>
                                            <div class="bottomCtrl" onmousedown="configCamera(this,'move',1)" onmouseup="configCamera(this,'stop')"></div>
                                            <div class="rightCtrl" onmousedown="configCamera(this,'move',3)" onmouseup="configCamera(this,'stop')"></div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>


                    </div>
                </div>
                <!-- <div class="fenpei-bottom">
                    <input type="hidden" id="totalPage" value={{ nums }}>
                    <div id="page" style="text-align: center;"></div>
                </div> -->
            </div>
        </div>
    </div>


    <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
    <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
    <script src="{% static '/lib/layui/layui.all.js' %}"></script>
    <script src="{% static '/js/common.js' %}?versions=0.5.4"></script>
    <script>
        $.ajaxSetup({
            data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
        });

        function CreateVidewDiv(n) {
            if($('#playback')){
                $('#playback').remove();
            }
            divNum = n;
            AutoNext = true;

            var width = "100%";
            var height = "100%";

            var html = "";

            for (var i = 1; i <= n; i++) {
                if (i == 1)
                    html += "<a id=\"a_" + i + "\" class=\"a" + n + " aSelected\">";
                else
                    html += "<a id=\"a_" + i + "\" class=\"a" + n + "\">";

                html += "<span id='span_deviceSerial_" + i + "' class='equipname' style=''></span>";
                html += "<span id='span_jktype_" + i + "' style='display:none'></span>";
                html += "<span id='span_cameraNo_" + i + "' style='display:none'></span>";

                html += "<table id=\"table_" + i + "\" style=\"width: " + width + "; height: " + height + "; margin:0 auto\">";
                html += "<tr style='display:none;'>";
                html += "<td id=\"title_" + i + "\" class=\"Video_Title\" onclick=\"setCurIndex(" + i + ")\" onmouseover=\"setMouseOver(" + i + ")\" onmouseout=\"setMouseOut(" + i + ")\"><span style='color:#999'>点此选择</span></td>";
                html += "</tr>";
                html += "<tr><td id='video_" + i + "' onclick=\"setCurIndex(" + i + ");\" onmouseover=\"setMouseOver(" + i + ")\" onmouseout=\"setMouseOut(" + i + ")\">";
                html += "</td></tr>";
                html += "</table> ";
                html += "</a> ";

            }

            curIndex = 1;

            $("#divMain").html(html);

            $("#span_V1").removeClass("active");
            $("#span_V4").removeClass("active");
            $("#span_V9").removeClass("active");
            $("#span_V16").removeClass("active");

            $("#span_V" + n).addClass("active");
            scrollBar();
        }

        function setMouseOut(idx) {
            if (curIndex != idx && $("#a_" + idx).length > 0)
                $("#a_" + idx).removeClass("aSelected");
        }
        function setMouseOver(idx) {
            if ($("#a_" + idx).length > 0)
                $("#a_" + idx).addClass("aSelected");
        }
        // 点击获取当前监控
        function setCurIndex(idx) {
            AutoNext = false;
            if (curIndex > 0 && $("#a_" + curIndex).length > 0)
                $("#a_" + curIndex).removeClass("aSelected");

            curIndex = idx;

            if ($("#a_" + idx).length > 0)
                $("#a_" + idx).addClass("aSelected");
            //  多屏点击
            if(divNum>1){
                var imei = $("#a_" + idx).find('#span_deviceSerial_'+idx).html();
                var currjkType = parseInt($("#a_" + idx).find('#span_jktype_'+idx).html());
                if(currjkType && $('#playback').length==0){
                    $('#windowCtrl').append('<button id="playback" imei="'+imei+'">查看回放</button>');
                }else if(!currjkType){
                    $('#playback').remove();
                }else{
                    $('#playback').attr('imei',imei);
                }
            }
        }
        var winHeight = 0;
        function windowResize() { //函数：获取尺寸
            var divMainWidth = $('#divMain').css('width').replace("px", "");
            var divMainHeight = divMainWidth * 9 / 16;

            $('#divMain').css('height', divMainHeight + 22 + "px");

            var EZUIKitHeight = divMainHeight / Math.sqrt(divNum) - 10;
            $('.videoNum' + divNum).css('height', EZUIKitHeight + "px");


            $('#div_ControlPanel').css('height', divMainHeight + "px");

            if ($("#tr_ptz").is(':visible'))
                $('#div_CamerList').css('height', divMainHeight - 215 + "px");
            else
                $('#div_CamerList').css('height', divMainHeight - 20 + "px");

            scrollBar();

        }
        window.onresize = function () {
            windowResize();
        }

        var spanIdx = "";

    </script>


    <script>
        // 判断是否启用flash
        function flashChecker() {
            var hasFlash = 0;　　　　 //是否安装了flash
            var flashVersion = 0;　　 //flash版本
            if (document.all) {
                var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
                if (swf) {
                    hasFlash = 1;
                    VSwf = swf.GetVariable("$version");
                    flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
                }
            } else {
                if (navigator.plugins && navigator.plugins.length > 0) {
                    var swf = navigator.plugins["Shockwave Flash"];
                    if (swf) {
                        hasFlash = 1;
                        var words = swf.description.split(" ");
                        for (var i = 0; i < words.length; ++i) {
                            if (isNaN(parseInt(words[i]))) {
                                continue;
                            }
                            flashVersion = parseInt(words[i]);
                        }
                    }
                }
            }
            return {
                f: hasFlash,
                v: flashVersion
            };
        }
        var fls = flashChecker();

        // 控制
        function configCamera(deviceSerial, ctrl, movenum) {
            var id = $("#a_" + curIndex).find('.equipname').html();
            if (!id) {
                layer.msg('暂无设备！')
                return;
            }

            $.ajax({
                url: 'jk_view',
                type: 'post',
                dataType: 'json',
                data: {
                    id: id,
                    ctrl: ctrl,
                    movenum: movenum
                },
                beforeSend: function () {
                    if (ctrl == 'takephoto') {
                        loadFlage = layer.load();
                    }
                },
                complete: function () {
                    layer.close(loadFlage);
                },
                success: function (data) {
                    if (ctrl == 'takephoto') {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                title: '手动下载'
                                , content: '<textarea readonly id="downpath">' + data.data.picUrl + '</textarea>'
                                , btn: ['复制', '取消']
                                , area: ['400px', '230px']
                                , yes: function (index, layero) {
                                    //按钮【按钮一】的回调
                                    document.getElementById('downpath').select();
                                    layer.tips('手动复制，在浏览器打开，另存为', '#downpath', {
                                        tips: 2
                                    });
                                    return false;
                                }
                                , btn2: function (index, layero) {
                                    //按钮【按钮二】的回调
                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                                , btn3: function (index, layero) {
                                }
                                , cancel: function () {
                                    //右上角关闭回调

                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                        });
                        // window.open(data.data.picUrl)
                    }
                }
            })
        }
        if (fls.f) { //安装了flash
            CreateVidewDiv(1)
            $('.flashShowDiv').show();
            $('.flashDownDiv').hide();
            getJkList(1, '')

        } else {
            $('.flashShowDiv').hide();
            $('.flashDownDiv').show();
        }

        // 获取视频列表
        function getJkList(page, searchId) {
            $.ajax({
                url: 'jk_page',
                type: 'get',
                data: {
                    page: page,
                    f_id: searchId
                },
                dataType: 'json',
                beforeSend: function () {
                    loadFlage = layer.load();
                },
                success: function (data) {
                    fillmenu(data)
                    $('#currPageNum').html(currPage);
                    totalPageNum = Math.ceil(data.nums / 10);
                    $('#totalPageNum').html(totalPageNum);
                    layer.close(loadFlage);
                }
            })
        }
        function fillmenu(data) {
            var dat = data.ids;
            var html = '';
            for (i = 0; i < dat.length; i++) {
                var name = dat[i].equip_name ? dat[i].equip_name : dat[i].equip_id;
                if(dat[i].status == 1){
                    var icon = '<span class="onLine"></span>'
                }else{
                    var icon = '<span class="offLine"></span>'
                }
                if (i == 0) {
                    html += '<div class="active jkItem" data-jktype="' + dat[i].jktype +'" data-id=' + dat[i].equip_id + '>'+icon+'<span title="'+name+'" class="jkNameSpan">' + name + '</span>';
                    if(dat[i].photo_num >0){
                        html += '<a href="javascript:;" class="lookjkPhoto">查看图片</a></div>';
                    }else{
                        html += '</div>';
                    }
                } else {
                    html += '<div class="jkItem" data-jktype="' + dat[i].jktype +'" data-id=' + dat[i].equip_id + '>'+icon+'<span title="'+name+'" class="jkNameSpan">' + name + '</span>';
                    if(dat[i].photo_num >0){
                        html += '<a href="javascript:;" class="lookjkPhoto">查看图片</a></div>';
                    }else{
                        html += '</div>';
                    }
                }
                if (i == dat.length - 1) {
                    $('#jkList').html(html);
                    getPath(dat[0].equip_id,dat[0].jktype)
                }
            }
        }
        // 菜单点击事件
        $('#jkList').on('click', '.jkItem', function () {
            var jktype = $(this).data('jktype');
            getPath($(this).data('id'),jktype);
            $('#jkList .jkItem').removeClass('active');
            $(this).addClass('active');
            
        })
        $('#jkList').on('click', '.lookjkPhoto', function (event) {
        //    alert($(this).parent().data('id'));
           var imei = $(this).parent().data('id');
        //    document.getElementById("iframe-main").src="home_map.html";
           $("body", parent.document).find('iframe').attr('src','jk_image?imei='+imei);
           event.stopPropagation();//阻止事件冒泡即可
        })
        //预览函数
        function StartPlay(id, connectionType, liveStatus, rtmp, hls, deviceSerial, cameraNo, title, obj,jktype) {
            if (obj == null) {

                $("#div_CamerList>div").eq(0).addClass("select-c");
            }
            else {
                $("#div_CamerList").children("div").removeClass("select-c");
                $(obj).addClass("select-c");
            }

            $("#span_ConnectionType_" + curIndex).html(connectionType);
            $("#span_deviceSerial_" + curIndex).html(deviceSerial);
            $("#span_jktype_" + curIndex).html(jktype);
            $("#span_cameraNo_" + curIndex).html(cameraNo);
            $("#span_playTime_" + curIndex).html(new Date().getTime()); //开始播放，时间为0 

            if (spanIdx != "")
                $("#Span_" + spanIdx).css("color", "white");

            spanIdx = id;

            $("#Span_" + id).css("color", "#FFFF00");

            $("#a_" + curIndex).addClass("noborder");


            if (curIndex == 0 || $("#a_" + curIndex).length == 0)
                return;

            $("#title_" + curIndex).html(title);

            var playHtml = "<video id='myPlayer" + curIndex + "' style='width: 100%; height: 100%' class='videoNum" + divNum + "' poster='' controls playsinline webkit-playsinline autoplay>";

            playHtml += "<source src='" + hls + "' type='' />";
            playHtml += "</video>";

            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);


            if ($("#a_" + (curIndex + 1)).length > 0)
                SetAutoNext(curIndex + 1);

            //SetPtzControl();

            windowResize();
        }


        function getPath(imei,jktype) {
            if(jktype && $('#playback').length==0){
                $('#windowCtrl').append('<button id="playback" imei="'+imei+'">查看回放</button>');
            }else if(!jktype){
                $('#playback').remove();
            }else{
                $('#playback').attr('imei',imei);
            }

            $.ajax({
                url: 'jk_view',
                type: 'get',
                data: {
                    imei: imei
                },
                dataType: 'json',
                beforeSend: function () {
                    loadFlage = layer.load();
                },
                success: function (data) {
                    var dat = data[0].data[0];
                    if (data[0].code == 200) {
                        StartPlay(dat.deviceSerial, '', '', dat.rtmpHd, dat.hlsHd, dat.deviceSerial, '', '', null,jktype)
                    }

                    layer.close(loadFlage);
                }
            })
        }
        function SetAutoNext(idx) {
            if (AutoNext) {
                if (curIndex > 0 && $("#a_" + curIndex).length > 0)
                    $("#a_" + curIndex).removeClass("aSelected");

                curIndex = idx;

                if ($("#a_" + idx).length > 0)
                    $("#a_" + idx).addClass("aSelected");
            }
        }
        // 分页点击
        var currPage = 1;
        var totalPageNum;
        function getjklistFun(str) {
            if (str == 'jian') {
                if (currPage > 1) {
                    currPage--;
                }
            } else {
                if (currPage < totalPageNum) {
                    currPage++;
                }
            }
            getJkList(currPage, '')
        }
        // StartPlay('363','1', '2', 'rtmp://rtmp.open.ys7.com/openlive/8702368f321341deb9fb5edb9d72faec', 'http://hls.open.ys7.com/openlive/8702368f321341deb9fb5edb9d72faec.m3u8', '719458092', '1','阳台',null);
        

        // 回放
        $(document).on('click','#playback',function(){
            var id = $(this).attr('imei');
            layer.open({
                title:'查看回放',
                type: 2,
                area: ['80%', '80%'],
                fixed: false, //不固定
                maxmin: true,
                content: 'nvr_view',
                success: function(layero, index){
                    var iframe = window['layui-layer-iframe' + index];
                    iframe.child(id)   //函数
                }
            });
        })
    </script>
</body>

</html>