分屏功能类似网站的这个功能::10800/#/screen这个网站视频点击选择通道就可以选中视频播放。
而且视频为h5视频需要能播放rstp视频流地址:
下面是写的代码,但是不知道怎么不同视頻播放不同rstp视频并且还有截图功能。目前想到的是canvas截图功能具体写法不怎么熟悉,而且希望图标能跟:10800/#/screen这网站的播放器图标类似鼠标迻入显示图标。目前我的视频图标是视频本身默认自带的
目前用的是阿里云播放器,但是因为谷歌年底对flash不再支持所以需要用能播放rstp嘚h5播放
1、不同视频播放不同rstp视频
2、实现鼠标移入出现视频自定义图标,
3、实现视频截图功能
5、最好是能提供播放rstp流的代码以及思路以及仩面1、2、3、4等代码以及思路
要实现的详细功能阐述:
1、默认显示未播放状态
2、点击选中播放框,再单击左侧摄像机列表中的摄像机对应選中的播放框中开始加载显示视频
1、显示实时视频画面,左上角显示当前时间、右下角显示摄像机名称
2、鼠标移入时显示截图、静音、全屏、关闭、视频算法选择select功能
(1)点击视频画面选中当前视频播放框,可重新选中摄像机播放新的视频流
(2)点击右上角的“关闭”图標关闭当前视频画面,显示为未播放状态
(3)鼠标移入右下角 截图图标显示“截图”提示信息;点击截图图标,对当前画面进行截图图片自动保存到系统-下载目录中
(4)视频默认播放有声音,可通过点击右下角的喇叭图标进行静音和取消静音切换鼠标移入图标相应顯示静音或取消静音提示信息
(5)右下角全屏,鼠标移入显示“全屏”信息,点击将全屏显示当前视频
(6)左下角显示 实时视频和智能視频切换智慧视频即叠加了算法的视频画面
// 退出全屏后要执行的动作 //判断浏览器是否处于全屏状态 (需要考虑兼容问题) //谷歌浏览器及Webkit內核浏览器 只对table td设置左与上边框; 对table设置右与下边框; 为了便于截图,我们将css 注释说明换行排版