EasyNVR H5无插件摄像机直播解决方案前端解析之：关于直播页面和视频列表页面切换的问题

2024-06-03 09:02:06

关于直播页面和视频列表页面切换

为了给用户更好的用户体验，并且更好的让用户快速简洁的了解实时的视频直播信息。一般多会分为列表展示和实时的视频直播展示。

表面上只是两个视图之间的随意切换，其实切换的两个视图之间存在很大的差别。
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.org

WEB：www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017

EasyNVR H5无插件摄像机直播解决方案前端解析之：关于直播页面和视频列表页面切换的问题相关推荐

EasyNVR H5无插件摄像机直播解决方案前端解析之：引用videojs无法自动播放
EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放参考文章: (1)EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放 (2) ...
EasyNVR H5无插件摄像机直播解决方案前端解析之：监控实时直播的四分屏的前端展示
完成运行效果图: 一.四分屏展示样式布局 1.通过html.css等来进行样式排版根据需求的四分屏的样式:来合理的划分出四个大块,分别用于放置四个播放器: 以四等分结构为例进行前端的排版: html ...
EasyNVR H5无插件摄像机直播解决方案前端解析之：videojs初始化的一些样式处理...
初始化完成对videojs样式的调整由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求:我们需要自主的处理一下加载出来的videojs播放器的样式: 默认加载出来的会包含有暂停 ...
EasyNVR H5无插件摄像机直播解决方案前端解析之：videojs的使用
video.js的基本使用方法一.videojs的初始化加载 videojs初始化加载分为两中 1.标签式加载在引入videojs加载文件的前提下,可以在video标签中添加属性值"da ...
EasyNVR H5无插件摄像机直播解决方案前端解析之：videojs初始化的一些样式处理
初始化完成对videojs样式的调整由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求:我们需要自主的处理一下加载出来的videojs播放器的样式: 默认加载出来的会包含有暂停 ...
基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
背景分析在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...
EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的四分屏的前端展示方案
我们经常会有一些物联网.作战指挥.工业监控方面的大型项目,需要上大屏展示直播,尤其是多屏展示的功能,传统安防里面,我们一般都是采用的海康.大华.宇视的解码器上大屏的:而现在,越来越多的项目,是基于网页 ...
EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的网页H5自动播放方案
我们很多安防.互联网.直播的应用场景中,在打开一路直播流后,极少看到需要点击播放按钮才能直播播放视频流的情况,但是由于H5场景的播放需要兼容的浏览器非常多,这样的情况下经常会遇到各种各样的摄像机网页 ...
在做RTSP摄像机H5无插件直播中遇到的对接海康摄像机发送OPTIONS心跳时遇到的坑...
我们在实现一套EasyNVR无插件直播方案时,选择了采用厂家无关化的通用协议RTSP/Onvif接入摄像机IPC/NVR设备,总所周知,Onvif是摄像机的发现与控制管理协议,Onvif用到的流媒体协 ...

最新文章

热门文章