分屏功能类似网站的这个功能：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）左下角显示 实时视频和智能视频切换，智慧视频即叠加了算法的视频画面
<template>
<!-- 分屏 -->
<div style="overflow: hidden;">
<el-row type="flex" :gutter="10" justify="center" v-show="!fullscreen">
<el-col :span="4">?</el-col>
<el-col :span="16"><div class="grid-content bg-purple">
<el-button-group>
<el-button :type="classtype1" @click="selecttype('classtype1',1,24)">单屏</el-button>
<el-button :type="classtype2" @click="selecttype('classtype2',4,12)">四分屏</el-button>
<el-button :type="classtype3" @click="selecttype('classtype3',9,8)">九分屏</el-button>
<el-button :type="classtype4" @click="selecttype('classtype4',16,6)">十六分屏</el-button>
<el-button >
<div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
</el-button>
</el-button-group>
</div>
</el-col>
<el-col :span="4">?</el-col>
</el-row>
<div class="main">
<div class="conter">
<el-row :gutter="10" >
<el-col v-for="(n,index) in fornum" :xs="24" :sm="24" :md="clonum" :lg="clonum" :xl="clonum" :key="index" >
<div class="player-wrapper" element-loading-text="加载中..." element-loading-background="#000">
<div class="video-wrapper" :id="`videoid${n}`">
<div class="video-inner live hide-waiting" style="">
<div class="alt" :class="selectedindex === index? 'altChange' :'alt'" @click="getVideo(index, item)">
<div class="talbetop">
<div style="" class="video">
<ali-player @play="play($event)"
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"
>
</ali-player>
</div>
<div class="operate">
<div class="close-video">
<svg class="svg-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
<use xlink:href="#close"></use>
</svg>
</div>
<div class="operate-button">
<div class="button-option">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in optionValue"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="button-right">
<svg class="camera-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
<use xlink:href="#camera 2"></use>
</svg>
<svg class="voice-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
<use xlink:href="#voice"></use>
</svg>
<svg class="fullscreen-icon" style="width:24px; height:24px; margin-top:-0.05rem;left:40;vertical-align: middle; fill:#52C41B">
<use xlink:href="#ic_fullscreen"></use>
</svg>
</div>
</div>
</div>
<table>
<tr>
<td>无信号</td>
</tr>
</table>
<div v-show="true" class="selectchannel" @click="dialogFormVisible=true"> 选择通道</div>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="footer"></div>
</div>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
这是测试
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import aliplayer from "@/components/public/AliPlayer.vue"
export default {
components: {
"ali-player": aliplayer,
},
data () {
return {
fullscreen: false,
selectedindex:'',
fornum:4,
clonum:12,
dialogFormVisible:false,
videoclass:"padding-bottom: 4px; position: relative; margin: 0px auto;",
classtype1:'',
classtype2:'primary',
classtype3:'',
classtype4:'',
items:[false,false,false,false],
optionValue:[
{
value: '1',
label: '实时视频'
},
{
value: '2',
label: '安全帽检测'
},
{
value: '3',
label: '火苗检测'
},
{
value: '4',
label: '离岗检测'
}
],
value:'1' ,
}
},
created(){
let that = this
window.onresize = function(){
if(!that.checkFull()){
// alert(that.videoclass)
// 退出全屏后要执行的动作
console.log("退出全屏")
that.fullscreen = false;
//alert(that.fornum)
for(let n=1;n<=that.fornum;n++){
//alert('videoid'+n)
// alert(document.getElementById('videoid'+n))
document.getElementById('videoid'+n).style = "padding-bottom: 40.25%; position: relative; margin: 0px auto;";
}
// that.videoclass="padding-bottom: 43.25%; position: relative; margin: 0px auto; overflow: hidden;",
//document.getElementById('videoid1').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
// document.getElementById('videoid2').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
// document.getElementById('videoid3').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
//document.getElementById('videoid4').style = "padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;";
// that.tableclass="table-c"
}
else{
for(let n=1;n<=that.fornum;n++){
// alert('videoid'+n)
// alert(document.getElementById('videoid'+n))
document.getElementById('videoid'+n).style = "padding-bottom: 52.25%; position: relative; margin: 0px auto;";
}
//document.getElementById('videoid1').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
//document.getElementById('videoid2').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
//document.getElementById('videoid3').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
//document.getElementById('videoid4').style='padding-bottom: 54.25%; position: relative; margin: 0px auto; overflow: hidden;';
}
}
},
methods:{
//选中
getVideo(index, item){
this.selectedindex=index
},
showselect(item1){
this.items=[];
// alert(this.items.length)
for(let i=0;i<this.fornum;i++){
if(item1==i){
// alert(item1)
this.items[i] = true;
}else{
this.items[i]=false;
}
}
},
selecttype(item,fnum,clo) {
// alert( this.items[0])
this.items=[];
for(let i=0;i<fnum;i++){
this.items[i]=false;
}
this.fornum = fnum;
this.clonum = clo;
if(item==='classtype1'){
this.classtype1='primary'
this.classtype2=''
this.classtype3=''
this.classtype4=''
}
else if(item==='classtype2'){
this.classtype1=''
this.classtype2='primary'
this.classtype3=''
this.classtype4=''
}
else if(item==='classtype3'){
this.classtype1=''
this.classtype2=''
this.classtype3='primary'
this.classtype4=''
}
else if(item==='classtype4'){
this.classtype1=''
this.classtype2=''
this.classtype3=''
this.classtype4='primary'
}
},
checkFull(){
//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
//火狐浏览器
var isFull = document.mozFullScreen||
document.fullScreen ||
//谷歌浏览器及Webkit内核浏览器
document.webkitIsFullScreen ||
