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

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

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

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 ||

document.webkitRequestFullScreen ||

document.mozRequestFullScreen ||

document.msFullscreenEnabled

if(isFull === undefined) {

isFull = false

}

return isFull;

},

// 全屏事件

handleFullScreen(){

let element = document.documentElement;

let that=this;

// alert(this.fullscreen)

if (this.fullscreen) {

if (document.exitFullscreen) {

document.exitFullscreen();

} else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

// alert("ddd")

//that.videoclass='padding-bottom: 42.25%; position: relative; margin: 0px auto; overflow: hidden;';

} else {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.webkitRequestFullScreen) {

element.webkitRequestFullScreen();

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if (element.msRequestFullscreen) {

// IE11

element.msRequestFullscreen();

}

// this.videoclass='';

// this.tableclass='table-c'

//this.tableclass='alt'

}

this.fullscreen = !this.fullscreen;

}

}

}

body {

overflow-x: hidden;

/* overflow-y: hidden; */

}

.main{

padding: 10px;

width: auto;

height: 100%;

.el-row {

// margin-bottom: 20px!important;

}

}

html,body{

height:100% ;margin:0;

overflow-x: hidden;

}

.video-wrapper{

height:auto !important;

margin:0;

padding-bottom: 0.05%!important;

position: relative;

margin: 0px auto;

// position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px;

}

.alt {

// display: grid;

// grid-template-columns: repeat(auto-fit, 48%);

// grid-template-rows: repeat(2,160px);

grid-gap: 10px 10px;

// position: absolute;

// margin-bottom: 5px!important;

// left: 0;

// top: 0;

// right: 0;

// bottom: 0;

background: #000;

color: #fff;

text-align: center;

}

.altChange {

// justify-content:center;

// position: absolute;

// left: 0;

// top: 0;

// right: 0;

// bottom: 0;

// background: #000;

border: 2px solid #00A4FF;

box-sizing: border-box;

color: #fff;

// text-align: center;

}

.alt table{

width: 100%;

height: 100%;

}

.talbetop{

width: 100%;

height: 100%;

position:relative;

.video{

position: relative;

display: grid;

// grid-template-columns: repeat(auto-fit, 48%);

// grid-template-rows: repeat(2,160px);

// grid-gap: 10px 10px;

width: 100%;

height: 3rem;

// position: absolute;

// left: 0;

// top: 0;

// right: 0;

// bottom: 0;

// background: red;

z-index: 1000;

.aliPlayer{

width: 100%;

height: 100%;

// margin-bottom: 10px!important;

}

}

.operate{

.close-video{

position: absolute;

top:0;

right: 0;

}

.operate-button{

display: flex;

justify-content: space-between;

position: absolute;

bottom: 0;

left:0;

width: 100%;

background: rgba(#eee,0.1);

z-index: 1000000;

height: 0.4rem;

line-height:0.4rem;

.button-option{

width: 1.2rem;

height: 0.3rem;

line-height:0.3rem;

.el-input__inner {

-webkit-appearance: none;

background-color: #FFF;

background-image: none;

border-radius: 4px;

border: 1px solid #DCDFE6;

-webkit-box-sizing: border-box;

box-sizing: border-box;

color: #606266;

display: inline-block;

font-size: inherit;

height: 30px;

line-height: 30px;

outline: 0;

// padding: 0 15px;

-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);

transition: border-color .2s cubic-bezier(.645,.045,.355,1);

width: 100%;

}

.option-select{

box-sizing: border-box;

}

}

.button-right{

svg{

margin-right: 0.2rem;

}

}

}

}

}

.selectchannel{

position:absolute;right:5px;top:5px;

z-index: 10000;

}

.video-close {

// position: absolute;

// top: 5px;

// right: 5px;

color: #fff;

font-size: 12px;

background-color: hsla(0,0%,50%,.5);

padding: 2px 5px;

cursor: pointer;

border-radius: 2px;

max-width: 120px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

.table-c table{border-right:2px solid #fff;border-bottom:2px solid #fff;}

.table-c table td{border-left:2px solid #fff;border-top:2px solid #fff}

/*

css 注释：

只对table td设置左与上边框；

对table设置右与下边框；

为了便于截图，我们将css 注释说明换行排版

*/

.player-wrapper{

padding-bottom: 5px;

}

.footer{

background: #000;

height: 10%;

}