EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
2017-08-30 09:46
696 查看
关于直播页面和视频列表页面切换
为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息。一般多会分为列表展示和实时的视频直播展示。
表面上只是两个视图之间的随意切换,其实切换的两个视图之间存在很大的差别。
EasyNVR在列表快照展示界面并没有进行视频流的播放,展示多为视频的快照信息、是否在线等信息;
而在实时四分屏展示界面不仅会展示实时的通道名称,更要通过通道名称来获取实时的视频流来进行实时的播放。
因此在进行两个视图之间的切换的时候,不仅需要考虑外表视图的变化,更应该注意到视频流的关闭;当我需要在实时四分屏视图向列表视图进行切换的时候,需要将当前四分屏视图中所有的视频流全部停掉。
为了保持初始播放器样式的统一,在四分屏播放页面每一次播放视频流时都是重新加载初始化videojs。因此当需要进行切换到列表视图时需要判断当前四个播放窗口中,哪一个窗口正在进行视频播放,以便于在切换视图时将对应窗口的视频流停掉。
通过js可以完成该判断操作;
首先定义一个全局数组,目的用于存储当前窗口中正在进行实时播放的窗口号信息。这个信息会根据窗口的播放状态而实时的变化;
var players = [];
当需要进行切换到列表视图时,只需要将players里面的元素对应的窗口中的视频流停掉即可;
$.each(players, function (index, item) { videojs("player" + item).dispose(); })
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;详细说明:http://www.easydarwin.org/easynvr/
获取更多信息
邮件:support@easydarwin.orgWEB:www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
相关文章推荐
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
- EasyNVR H5无插件直播方案前端架构之:直播页面和视频列表页面切换的问题
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
- EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示
- EasyNVR H5无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面
- EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理
- EasyNVR H5无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面
- EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
- 关于问题由于 web 服务器上的“isapi 和 cgi 限制”列表设置,无法提供您请求的页面的解决方案
- 关于UEditor插件的使用以及UEditor数据回显问题,数据库存储标签代码前台页面如何解析问题小结
- EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据
- EasyNVR H5无插件直播方案前端构建之:区分页面是自跳转还是分享依据
- EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据
- 关于 页面多语言支持的纯前端(JQuery插件)实现及 .json 文件读取报404的问题
- 关于各种无法解析的外部符号问题的相应解决方案
- 关于TabHost切换的时候刷新(更新)页面的问题