前言介绍

在web前端的网页设计中，为了展示出简洁的网页风格和美观的效果，往往会使用弹窗效果在EasyNVR前端页面录像检索功能时，必然会播放录像，如果单独为播放录像文件排一个界面，用户在使用上会更加繁琐，在外观上也不是很美观。

真的弹了个窗户出来了！

基于bootstrap可以来开发出弹窗效果图

Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

弹出框的内容：

<div class="modal fade" id="videojs-dlg" data-keyboard="false"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title text-success text-center"></h4></div><div class="modal-body"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div></div></div>

可以使用js来触发$("#videojs-dlg").modal(‘show’)以此来实现以弹框的形式来展示出该div里面的内容；

<div class="modal fade" id="videojs-dlg" data-keyboard="false">

注意：

使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
id=“videojs-dlg” 是想要在页面上加载的模态框的目标。可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。但是不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
modal，用来把 “< div > ”的内容识别为模态框。
弹出框里面的具体内容可以通过动态的加载方法给他赋值或是在弹出时特定的改变他的样式。

模态框中要用到事件

show.bs.modal 在调用 show 方法后触发。

  $('#videojs-dlg').on('show.bs.modal', function () {// 执行一些动作...})

shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
```
  $('#videojs-dlg').on('shown.bs.modal', function () {// 执行一些动作...})
```

hide.bs.modal 当调用 hide 实例方法时触发。

  $('#videojs-dlg').on('hide.bs.modal', function () {// 执行一些动作...})

hidden.bs.modal 当模态框完全对用户隐藏时触发。

  $('#videojs-dlg').on('hidden.bs.modal', function () {// 执行一些动作...})

EasyNVR常见问题

常见应用： 安防监控系统 / 小区监控 / 幼儿园监控 / 交通监控 / 厂区监控 / 景点景区监控 / 店面监控

特色特点： 基于纯web页面观看监控 / 无须安装插件 / 跨平台支持PC端、安卓端、iOS苹果端 /支持微信扫二维码观看

WEB端跨平台监控的目标是什么？

本站做的是取监控摄像头视频流，进行服务器端分发，实现无插件跨平台的web监控（注意，不是基于APP / APK，而是基于纯web页面），PC端/安卓/IOS苹果等主流终端，打开同一个网页地址都可以观看，同时也支持手机微信扫二维码观看。

海康/大华自身就有官方的自带的web端，EasyNVR产品有什么意义？

第一，本站做的是无插件跨平台的web观看形式，PC/安卓/IOS苹果都开打开同一个页面，直接可以观看（web端是不要装插件的）；而海康/大华的web端观看是必须装他们自己的插件的，这是最主要的区别；

第二，本站方案实现的是用户自己的流媒体服务器平台，无在线观看人数限制的问题；而海康云平台（萤石云）是海康的私有云，基于萤石云观看，也是必须装海康自己的APP或APK，并且对在线人数有严格限定的。

EasyNVR用户需要准备什么？

服务器方面：Windows2008/Windows2012/CentOS 64位操作系统、4G内存、2核CPU及以上；
服务器带宽：根据自身情况而定 : 5M-100M不等（与用户要求的在线人数有关系）；
一个或多个监控摄像头（支持RTSP或Onvif）

我们提供什么样的服务？

为用户搭建服务器端环境；
为用户实现海康/大华监控摄像头实现基于web端无插件跨平台直播；
实现PC、安卓、IOS苹果三种主流终端都可以观看监控画面；
提供完整实例给用户，提供完整技术教程，提供技术售后。

为什么选择我们？

经验：我们拥有数年流媒体技术服务的实际应用经验，也拥有web流媒体播放器操作经验，熟悉多终端跨平台技术；
实测：我们亲自购买海康/大华/雄迈/天地伟业网络摄像头IPC，进行实测验证；庞大的开源社区用户群体；
多种方案：我们目前能提供1x / 2x / 3x 三种方案，这三种方案基本包含了IPC所处的各种网络环境；
稳定：我们做出的直播效果，无论是PC端直播画面，还是移动端直播画面，都比较稳定；
操作方便：我们给用户提供完整的范例及教程，普通人员均可按范例添加或删减摄像头；
省心省力：一个页面适配PC、安卓、IOS苹果、微信，简化繁杂的主流终端的适配，省心省力。

关于EasyNVR

随着互联网基础设施建设的不断完善和发展，带宽的不断提速，尤其是光纤入户，4G/5G/NB-IoT各种网络技术的大规模商用，视频随时随地可看、可控的诉求越来越多，尤其是移动应用技术和前端技术的普及和发展，PC、手机、微信各种终端的支持需求在各行各业越来越受到青睐和重视，强制性地要求用户只能使用IE系列浏览器、强制用户只能到设备内网才能看到监控的限制，已经越来越不符合商业规律，而在传统监控行业里面，互联网思维、架构和技术完全可以成功引入，尤其是在移动互联网、物联网方面的技术，完全能够满足新形势下的各种行业的全终端监控的需要。

EasyNVR是一款拥有完整、自主、可控知识产权，同时又能够具备软硬一体功能的安防互联网化流媒体服务器，能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP、Onvif协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发。详情可访问EasyNVR官网：http://www.easynvr.com

EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap弹窗功能的实现方案与代码相关推荐

基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案...
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：关于接口调用常见的一些问题（401 Unauthorized）...
背景分析最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：使用BootstrapPagination以分页形式展示数据信息...
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：使用BootstrapPagination以分页形式展示数据信息
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
EasyNVR摄像头网页无插件直播H5、谷歌Chrome直播方案中如何降低播放延迟问题
背景分析众所周知,为了让用户更好的了解与使用EasyNVR,熟悉EasyNVR的相关功能,将EasyNVR与本地应用场景更好的融合,我们团队提出产品免费试用的理念.只要我们的产品符合用户的使用场景, ...
流媒体服务器+终端(android,ios,web),如何从海康平台上拉流接入RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播流媒体服务器EasyNVR？...
背景需求随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
新版RTSP协议网络摄像头网页无插件直播平台EasyNVR如何自定义通道的背景音乐？
EasyNVR网页无插件直播平台经过多次的修正和改良,已经成为一套成熟的流媒体视频云服务平台,能够满足安防.智慧城市.教育等不同场景的应用需求. 目前,最新版本的EasyNVR支持自定义背景音乐,用户 ...
海康、大华摄像头网页无插件直播监控流媒体服务EasyNVR使用web和安卓浏览器能正常使用，苹果手机无法打开问题解决
海康.大华摄像头网页无插件直播监控流媒体服务EasyNVR使用web和安卓浏览器能正常使用,苹果手机无法打开问题解决参考文章: (1)海康.大华摄像头网页无插件直播监控流媒体服务EasyNVR使用w ...

EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap弹窗功能的实现方案与代码