仿海康網頁版做一個在線的實時監控網站（2）-- 視屏顯示和雲台控制

在上一篇博客仿海康網頁版做一個在線的實時監控網站（1）中講了側邊站點選擇欄的生成，這篇博客主要說一下視屏插件的擺放和一些雲台控制的操作函數

首先海康的攝像頭可以找他們要一個網頁版的開發Demo，如果沒有我提供一個：海康開發Demo包

主要的文件有三個，一個是.exe的插件，要預覽視頻一定要這個插件，然后是demo.js以及webVideoCtrl.js

因為我在站點選擇的時候就自動登錄了，所以我要把原來的的登陸按鈕所需要的參數封裝起來，我首先定義了幾個全局變量，然后在點擊站點的時候賦值，很好理解，代碼如下：

var szIP = "",
    szPort = "",
    szUsername = "",
    szPassword = "",
    szInfo = "";
    szChannel = "";
    sziWndowType = 3;

function openvideo(a) {
    szIP = a.szip;
    szPort = a.szPort,
    szUsername = a.szUsername,
    szPassword = a.szPassword;
    szChannel = a.szchannel;
}

在點擊站點選擇的時候實例化openvideo()函數即可

第二需要改變視頻插件框的大小，根據頁面的大小可以自動適應，於是我把初始化的相關步驟也封裝了起來，在頁面生成的時候加載就行了

var getvideosize =  function (b) {
    // 初始化插件參數及插入插件
    WebVideoCtrl.I_InitPlugin(b.videowidth,b.videoheight, {
        iWndowType: sziWndowType,
        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
        }
    });
    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

    //初始化日期時間
    var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
    $("#starttime").val(szCurTime + " 00:00:00");
    $("#endtime").val(szCurTime + " 23:59:59");
};

    var videoheight = document.getElementById("video").offsetHeight;
    var videowidth = document.getElementById("video").offsetWidth;

    var b = new videosize(videoheight, videowidth);
    getvideosize(b);

第三個是選擇的窗口號，在我做的時候窗口號默認是從0開始，也就是第一個窗口，如果我們需要改變窗口號，需要到webVideoCtrl.js里找到顯示視屏的函數，將窗口號定義成形參即可

知道了這個幾個，其他的根據Demo開發就好，還是比較容易上手的，做完之后的界面如圖所示：

這里推薦幾個網站，對於前端來說還是有點用的：

1 Jquery插件庫

2 JS解壓縮網站

3 CSS解壓縮網站

4 圖標網站

后期我會在碼雲上傳一個閹割掉ajax的版本，各位自取