分屏功能类似网站的这个功能:http://nvr.liveqing.com:10800/#/screen。这个网站视频点击选择通道就可以选中视频播放。
而且视频为h5视频。需要能播放rstp视频流地址:
下面是写的代码,但是不知道怎么不同视频播放不同rstp视频。并且还有截图功能。目前想到的是canvas截图功能,具体写法不怎么熟悉,而且希望图标能跟http://nvr.liveqing.com:10800/#/screen这网站的播放器图标类似,鼠标移入显示图标。目前我的视频图标是视频本身默认自带的。
目前用的是阿里云播放器,但是因为谷歌年底对flash不再支持。所以需要用能播放rstp的h5播放
我需要解决的问题是:
1、不同视频播放不同rstp视频
2、实现鼠标移入出现视频自定义图标,
3、实现视频截图功能。
4、分屏优化
5、最好是能提供播放rstp流的代码以及思路以及上面1、2、3、4等代码以及思路
要实现的详细功能阐述:
一、未播放状态
1、默认显示未播放状态
2、点击选中播放框,再单击左侧摄像机列表中的摄像机,对应选中的播放框中开始加载显示视频
二、播放中状态
1、显示实时视频画面,左上角显示当前时间、右下角显示摄像机名称
2、鼠标移入时显示截图、静音、全屏、关闭、视频算法选择select功能
(1)点击视频画面,选中当前视频播放框,可重新选中摄像机播放新的视频流
(2)点击右上角的“关闭”图标,关闭当前视频画面,显示为未播放状态
(3)鼠标移入右下角 截图图标,显示“截图”提示信息;点击截图图标,对当前画面进行截图,图片自动保存到系统-下载目录中
(4)视频默认播放有声音,可通过点击右下角的喇叭图标进行静音和取消静音切换,鼠标移入图标相应显示静音或取消静音提示信息
(5)右下角全屏,鼠标移入,显示“全屏”信息,点击将全屏显示当前视频
(6)左下角显示 实时视频和智能视频切换,智慧视频即叠加了算法的视频画面
单屏
四分屏
九分屏
十六分屏
这是测试