海康威视视频web demo

点击下载资源

首先要引用js

 <script src="~/js/HIKCamera/Codebase/webVideoCtrl.js" asp-append-version="true"></script>

开发的页面是用c#写的，页面写得比较low，就随便看看

js脚本（里面是我有些阉割的了，可以根据需求更改对应的参数，还有Ie10以下的获取不到iframe对应的参数，所以自己网上找了个方法获取到类似data-ip这样的方法）

  var g_aIframe = $("iframe");
        $(function () {
            var iRet = WebVideoCtrl.I_CheckPluginInstall();
            if (-1 == iRet) {
                alert("您还未安装过插件，请点击下载控件安装WebComponentsKit.exe！");
                return;
            }
            $(window).on("load", function () {
                $.each(g_aIframe, function (i, oIframe) {
                    getWebVideoCtrl(oIframe).I_Stop();
                });
            });
        });
        function getWebVideoCtrl(oIframe) {
            return oIframe.contentWindow.WebVideoCtrl;
        }
        function iframeLoaded() {
            $.each(g_aIframe, function (i, oIframe) {
                var data = getDataset(oIframe);
                var oWebVideoCtrl = getWebVideoCtrl(oIframe);
                oWebVideoCtrl.I_Login(data.ip, 1, data.port, data.username, data.pwd, {
                    success: function (xmlDoc) {
                        setTimeout(function () {
                            oWebVideoCtrl.I_StartRealPlay(data.ip, {
                                iStreamType: 2,
                                iChannelID: 1,
                                bZeroChannel: false
                            });
                        }, 2000);
                   
                    }
                });
            });
        }
           function getDataset(ele) {
            if (ele.dataset) {
                return ele.dataset;
            } else {
                var attrs = ele.attributes,//元素的属性集合
                    dataset = {}, name, matchStr;
                for (var i = 0; i < attrs.length; i++) { //是否是data- 开头
                    matchStr = attrs[i].name.match(/^data-(.+)/);
                    if (matchStr) { //data-auto-play 转成驼峰写法 autoPlay
                        name = matchStr[1].replace(/-([\da-z])/gi, function (all, letter) {
                            return letter.toUpperCase();
                        });
                        dataset[name] = attrs[i].value;
                    }
                }
                return dataset;
            }
        }

这是嵌入的iframe显示的页面，可以根据需求自己调整大小

    <script src="~/js/HIKCamera/jquery-1.7.1.min.js" asp-append-version="true"></script>
    <script src="~/js/HIKCamera/Codebase/webVideoCtrl.js" asp-append-version="true"></script>
    <script>
        $(function () {
            var oPlugin = {
                iWidth: 300,            // plugin width
                iHeight: 200            // plugin height
            };
            WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
                bWndFull: true,
                iWndowType: 1,
                cbInitPluginComplete: function () {
                    WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
                }
            });
        });
    </script>

要注意的几点是：Ip/端口/账号/密码这些要设置好，如果有关联硬盘录像机保存录像的话，通道也要设置好，查看回放的话，关联的是硬盘录像机的Ip账号这些+通道