vue实现分屏_vue实现带截图和分屏的功能 , 并且能播放rstp流视频

分屏功能类似网站的这个功能：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)左下角显示 实时视频和智能视频切换，智慧视频即叠加了算法的视频画面

单屏

四分屏

九分屏

十六分屏

class='aliPlayer'

:useFlashPrism="true"

:autoplay="true"

:isLive="true"

:rePlay="false"

:showBuffer="true"

showBarTime="5000"

width="100%"

height="100%"

controlBarVisibility="hover"

source="rtmp://124.139.232.61:1935/live/livestream"

>

v-for="item in optionValue"

:key="item.value"

:label="item.label"

:value="item.value">

无信号

选择通道

这是测试