admin/zhgdyunapp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

flx:提交大华icc

Browse Source
This commit is contained in:
Rain_ 2025-07-24 16:53:08 +08:00
parent 7f1129e30a
commit 98aebe4fc7
4 changed files with 322 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/my-player-m3u8/my-player-m3u8.vue
View File

@ -119,7 +119,7 @@
// #ifdef H5 // #ifdef H5
return true; return true;
// #endif // #endif
// #ifndef H5 // #ifdef APP-PLUS
return false; return false;
// #endif // #endif
} }

1
main.js
View File

@ -56,6 +56,7 @@ if (process.env.NODE_ENV === 'development') {
// Vue.prototype.url_config = 'http://192.168.34.221:28890/' //郭圣雄本地 // Vue.prototype.url_config = 'http://192.168.34.221:28890/' //郭圣雄本地
// Vue.prototype.url_config = 'http://192.168.34.221:28888/' //郭圣雄本地 // Vue.prototype.url_config = 'http://192.168.34.221:28888/' //郭圣雄本地
Vue.prototype.url_config = 'http://192.168.34.221:8111/' //郭圣雄本地 Vue.prototype.url_config = 'http://192.168.34.221:8111/' //郭圣雄本地
Vue.prototype.url_config = 'http://192.168.34.221:19112/' //郭圣雄本地
// Vue.prototype.url_config = 'http://182.90.224.237:51234/' //郭圣雄本地 // Vue.prototype.url_config = 'http://182.90.224.237:51234/' //郭圣雄本地
// Vue.prototype.url_config = 'http://192.168.34.155:19111/' //彭洁本地 // Vue.prototype.url_config = 'http://192.168.34.155:19111/' //彭洁本地
// Vue.prototype.url_config = 'http://183.249.224.118:9000/'// 嘉兴项目 // Vue.prototype.url_config = 'http://183.249.224.118:9000/'// 嘉兴项目

6
pages/projectEnd/workTicketManage/workTicketDetail.vue
View File

@ -16,7 +16,7 @@
<!-- 'https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8' --> <!-- 'https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8' -->
<my-player-m3u8 v-if="videoItemInfo.url" :src="videoItemInfo.url" :showMask="stateShow" <my-player-m3u8 v-if="videoItemInfo.url" :src="videoItemInfo.url" :showMask="stateShow"
:autoplay="true" /> :autoplay="true" />
<video v-else :src="videoItemInfo.url"></video> <video class="player-m3u8" v-else :src="videoItemInfo.url"></video>
</view> </view>
<u-tabs :bar-height="4" :font-size="28" active-color="#498CEC" inactive-color="#B3B3B3" :bar-width="375" <u-tabs :bar-height="4" :font-size="28" active-color="#498CEC" inactive-color="#B3B3B3" :bar-width="375"
@ -523,7 +523,9 @@
height: 5rpx !important; height: 5rpx !important;
} }
/deep/ .m3u8-player { /deep/ .m3u8-player,
.player-m3u8 {
width: 100%;
height: 420rpx; height: 420rpx;
} }

580
pages/videoManage/playVideo.vue
View File

@ -6,7 +6,15 @@
</view> </view>
</headers> </headers>
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> --> <!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
<video v-if="!isYsy" class="videoBox" id="myVideo" :custom-cache="false" :src="playUrlFilter" controls autoplay></video> <!-- APP环境使用web-view -->
<!-- #ifdef APP-PLUS -->
<video v-if="!isYsy" class="videoBox" id="myVideo" :custom-cache="false"
:src="playUrlFilter" controls autoplay></video>
<!-- #endif -->
<!-- H5环境使用ezuikit -->
<!-- #ifdef H5 -->
<my-player-m3u8 v-if="!isYsy && playUrlFilter" :showMask="true" :src="playUrlFilter" :autoplay="true" />
<!-- #endif -->
<view v-if="isYsy && playUrlFilter && accessToken" :style="{width: '100%', height: '225px'}"> <view v-if="isYsy && playUrlFilter && accessToken" :style="{width: '100%', height: '225px'}">
<!-- H5环境使用ezuikit --> <!-- H5环境使用ezuikit -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
@ -14,30 +22,39 @@
<!-- #endif --> <!-- #endif -->
<!-- APP环境使用web-view --> <!-- APP环境使用web-view -->
<!-- #ifdef APP-PLUS --> <!-- #ifdef APP-PLUS -->
<web-view <web-view :src="ysyPlayUrl" :style="webviewStyles" :webview-styles="webviewConfig"></web-view>
:src="ysyPlayUrl"
:style="webviewStyles"
:webview-styles="webviewConfig"
></web-view>
<!-- #endif --> <!-- #endif -->
</view> </view>
<view class="videoName"> <view class="videoName">
{{videoInfo.videoName}} {{videoInfo.videoName}}
<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn" @click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button> <button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn"
@click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
</view> </view>
<view class="videoOperateBox"> <view class="videoOperateBox">
<text class="desc">当前云台速度：{{ this.opSize }}</text> <text class="desc">当前云台速度：{{ this.opSize }}</text>
<view class="box"> <view class="box">
<image src="../../static/videoControlIcon/bg.png" class="bg"></image> <image src="../../static/videoControlIcon/bg.png" class="bg"></image>
<view class="pic top" :style="{backgroundImage: typeName == 'UP' && videoFlag?'url(../../static/videoControlIcon/top-active.png)':'url(../../static/videoControlIcon/top.png)'}" @click="controlVideoFn(0,0.2,0,'UP')"></view> <view class="pic top"
<view class="pic left" :style="{backgroundImage: typeName == 'LEFT' && videoFlag?'url(../../static/videoControlIcon/left-active.png)':'url(../../static/videoControlIcon/left.png)'}" @click="controlVideoFn(-0.2,0,0,'LEFT')"></view> :style="{backgroundImage: typeName == 'UP' && videoFlag?'url(../../static/videoControlIcon/top-active.png)':'url(../../static/videoControlIcon/top.png)'}"
<view class="pic bottom" :style="{backgroundImage: typeName == 'DOWN' && videoFlag?'url(../../static/videoControlIcon/bottom-active.png)':'url(../../static/videoControlIcon/bottom.png)'}" @click="controlVideoFn(0,-0.2,0,'DOWN')"></view> @click="controlVideoFn(0,0.2,0,'UP')"></view>
<view class="pic right" :style="{backgroundImage: typeName == 'RIGHT' && videoFlag?'url(../../static/videoControlIcon/right-active.png)':'url(../../static/videoControlIcon/right.png)'}" @click="controlVideoFn(0.2,0,0,'RIGHT')"></view> <view class="pic left"
:style="{backgroundImage: typeName == 'LEFT' && videoFlag?'url(../../static/videoControlIcon/left-active.png)':'url(../../static/videoControlIcon/left.png)'}"
@click="controlVideoFn(-0.2,0,0,'LEFT')"></view>
<view class="pic bottom"
:style="{backgroundImage: typeName == 'DOWN' && videoFlag?'url(../../static/videoControlIcon/bottom-active.png)':'url(../../static/videoControlIcon/bottom.png)'}"
@click="controlVideoFn(0,-0.2,0,'DOWN')"></view>
<view class="pic right"
:style="{backgroundImage: typeName == 'RIGHT' && videoFlag?'url(../../static/videoControlIcon/right-active.png)':'url(../../static/videoControlIcon/right.png)'}"
@click="controlVideoFn(0.2,0,0,'RIGHT')"></view>
<!-- <view class="pic center" @click="stop()"></view> --> <!-- <view class="pic center" @click="stop()"></view> -->
</view> </view>
<view class="box2"> <view class="box2">
<view class="zoom zoomin" :style="{backgroundImage: typeName == 'ZOOM_OUT' && videoFlag?'url(../../static/videoControlIcon/2.png)':'url(../../static/videoControlIcon/1.png)'}" @click="controlVideoFn(0,0,-0.2,'ZOOM_OUT')"></view> <view class="zoom zoomin"
<view class="zoom zoomout" :style="{backgroundImage: typeName == 'ZOOM_IN' && videoFlag?'url(../../static/videoControlIcon/4.png)':'url(../../static/videoControlIcon/3.png)'}" @click="controlVideoFn(0,0,0.2,'ZOOM_IN')"></view> :style="{backgroundImage: typeName == 'ZOOM_OUT' && videoFlag?'url(../../static/videoControlIcon/2.png)':'url(../../static/videoControlIcon/1.png)'}"
@click="controlVideoFn(0,0,-0.2,'ZOOM_OUT')"></view>
<view class="zoom zoomout"
:style="{backgroundImage: typeName == 'ZOOM_IN' && videoFlag?'url(../../static/videoControlIcon/4.png)':'url(../../static/videoControlIcon/3.png)'}"
@click="controlVideoFn(0,0,0.2,'ZOOM_IN')"></view>
</view> </view>
<view class="video-playback" v-if="videoConfig.videoType != 1" @click="toBackList"> <view class="video-playback" v-if="videoConfig.videoType != 1" @click="toBackList">
视频回放 视频回放
@ -59,18 +76,26 @@
<script> <script>
import headers from '../../components/headers/headers.vue' import headers from '../../components/headers/headers.vue'
import UNumberBox from "../../components/u-number-box/u-number-box.vue" import UNumberBox from "../../components/u-number-box/u-number-box.vue"
import MyPlayerM3u8 from '@/components/my-player-m3u8/my-player-m3u8.vue';
export default { export default {
components:{headers, UNumberBox}, components: {
headers,
UNumberBox,
MyPlayerM3u8
},
data() { data() {
return { return {
url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream url: '', //rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
videoInfo:{videoName:'',videoType:null}, videoInfo: {
videoName: '',
videoType: null
},
streamType: 1, //1是子码流 2是主码流 streamType: 1, //1是子码流 2是主码流
opSize: 20, opSize: 20,
videoResponseInfo: {}, videoResponseInfo: {},
videoFlag: false, videoFlag: false,
typeName: "", typeName: "",
videoConfig:{}, videoConfig: {},
projectSn: "", projectSn: "",
tempSpeed: 20, tempSpeed: 20,
}; };
@ -79,23 +104,23 @@
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn; this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标 //videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
// this.url = options.url // this.url = options.url
this.videoInfo=uni.getStorageSync('videoInfo'); this.videoInfo = uni.getStorageSync('videoInfo');
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn; this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
this.opSize = Number(uni.getStorageSync('videoOpSize') || 20); this.opSize = Number(uni.getStorageSync('videoOpSize') || 20);
if(this.videoInfo.videoType==2){ if (this.videoInfo.videoType == 2) {
this.url= this.videoInfo.liveRadioUrl this.url = this.videoInfo.liveRadioUrl
}else{ } else {
this.getPlayUrl() this.getPlayUrl()
} }
this.getUseProjectVideoConfig(); this.getUseProjectVideoConfig();
}, },
onReady(){ onReady() {
this.$nextTick(() => { // this.$nextTick(() => {
this.setHeight() // this.setHeight()
}) // })
}, },
computed: { computed: {
playUrlFilter(){ playUrlFilter() {
// //
// let url = ""; // let url = "";
// if(this.videoConfig && this.videoConfig.videoType == 1) { // if(this.videoConfig && this.videoConfig.videoType == 1) {
@ -104,9 +129,9 @@
// url = 'rtsp://42.180.188.17' + this.url.substring(20); // url = 'rtsp://42.180.188.17' + this.url.substring(20);
// } // }
// console.log(url); // console.log(url);
return this.url return this.url
}, },
isYsy(){ isYsy() {
console.info(this.videoInfo?.videoType, '======') console.info(this.videoInfo?.videoType, '======')
return this.videoInfo?.videoType == 1 return this.videoInfo?.videoType == 1
}, },
@ -115,7 +140,7 @@
return `https://open.ys7.com/ezopen/h5/iframe?url=${this.playUrlFilter}&template=simple&autoplay=1&accessToken=${this.accessToken}` return `https://open.ys7.com/ezopen/h5/iframe?url=${this.playUrlFilter}&template=simple&autoplay=1&accessToken=${this.accessToken}`
} }
}, },
methods:{ methods: {
handleSaveSpeed() { handleSaveSpeed() {
this.opSize = this.tempSpeed this.opSize = this.tempSpeed
this.$refs.speedPopup.close() this.$refs.speedPopup.close()
@ -125,7 +150,7 @@
console.info(data, this.opSize) console.info(data, this.opSize)
this.tempSpeed = data.value this.tempSpeed = data.value
}, },
setSpeed(){ setSpeed() {
this.tempSpeed = this.opSize this.tempSpeed = this.opSize
this.$refs.speedPopup.open() this.$refs.speedPopup.open()
}, },
@ -145,45 +170,53 @@
}) })
}, },
// 跳转到录像回放列表 // 跳转到录像回放列表
toBackList(){ toBackList() {
uni.navigateTo({ uni.navigateTo({
url: './playBackList?obj=' + JSON.stringify({...this.videoResponseInfo,...this.videoInfo}) url: './playBackList?obj=' + JSON.stringify({
...this.videoResponseInfo,
...this.videoInfo
})
}) })
}, },
changeStreamFn(){ changeStreamFn() {
if(this.streamType==1){ if (this.streamType == 1) {
this.streamType=2 this.streamType = 2
}else{ } else {
this.streamType=1 this.streamType = 1
} }
this.getPlayUrl() this.getPlayUrl()
}, },
getPlayUrl(){ getPlayUrl() {
var that = this var that = this
var json ={itemId:this.videoInfo.itemId} var json = {
if(this.videoInfo.videoType==3){ itemId: this.videoInfo.itemId
json.streamType=this.streamType }
json.type='rtsp' //rtsp或者hls if (this.videoInfo.videoType == 3) {
json.streamType = this.streamType
json.type = 'rtsp' //rtsp或者hls
} }
this.sendRequest({ this.sendRequest({
url: "xmgl/videoItem/getVideoItemInfo", url: "xmgl/videoItem/getVideoItemInfo",
data: json, data: json,
method: "post", method: "post",
success(res){ success(res) {
switch (that.videoInfo.videoType){ switch (that.videoInfo.videoType) {
case 1: case 1:
// that.url=res.result.videoInfo.hdFlvAddress // that.url=res.result.videoInfo.hdFlvAddress
that.url=res.result.videoInfo that.url = res.result.videoInfo
that.accessToken = res.result.accessToken that.accessToken = res.result.accessToken
break; break;
default: default:
that.url=res.result.videoInfo.url that.url = res.result.videoInfo.url
break; break;
} }
// console.log(that.url,res.result.videoInfo.hdFlvAddress,that.videoInfo.videoType,res.result.projectVideoConfig.videoType) // console.log(that.url,res.result.videoInfo.hdFlvAddress,that.videoInfo.videoType,res.result.projectVideoConfig.videoType)
that.videoResponseInfo = {...res.result.projectVideoConfig,...res.result.videoInfo}; that.videoResponseInfo = {
for(let i in that.videoResponseInfo){ ...res.result.projectVideoConfig,
if(!that.videoResponseInfo[i]){ ...res.result.videoInfo
};
for (let i in that.videoResponseInfo) {
if (!that.videoResponseInfo[i]) {
delete that.videoResponseInfo[i] delete that.videoResponseInfo[i]
} }
} }
@ -194,39 +227,39 @@
this.typeName = opType this.typeName = opType
if (this.videoFlag) { if (this.videoFlag) {
uni.showToast({ uni.showToast({
title:'不要重复点击', title: '不要重复点击',
icon:'none' icon: 'none'
}) })
return return
} }
if(this.videoInfo.deviceType!=2){ if (this.videoInfo.deviceType != 2) {
uni.showToast({ uni.showToast({
title:'该设备不是球机，不支持此操作', title: '该设备不是球机，不支持此操作',
icon:'none' icon: 'none'
}) })
return false return false
} }
switch (this.videoInfo.videoType){ switch (this.videoInfo.videoType) {
case 3: case 3:
this.videoFlag = true; this.videoFlag = true;
this.controlVideoFn_isc(opType) this.controlVideoFn_isc(opType)
break; break;
case 4: case 4:
this.videoFlag = true; this.videoFlag = true;
this.controlVideoFn_dh(pan, tilt, zoom) this.controlVideoFn_dh(pan, tilt, zoom)
break; break;
default: default:
uni.showToast({ uni.showToast({
title:'暂不支持', title: '暂不支持',
icon:'none' icon: 'none'
}) })
break; break;
} }
}, },
controlVideoFn_isc(opType){ controlVideoFn_isc(opType) {
let json = { let json = {
// cameraId: this.videoInfo.deviceSerial, // cameraId: this.videoInfo.deviceSerial,
itemId:this.videoInfo.itemId, itemId: this.videoInfo.itemId,
opType: opType, opType: opType,
opSize: this.opSize, opSize: this.opSize,
opCode: 1 opCode: 1
@ -236,10 +269,10 @@
url: "xmgl/videoItem/getHikPtzControl", url: "xmgl/videoItem/getHikPtzControl",
data: json, data: json,
method: "post", method: "post",
success(res){ success(res) {
uni.showToast({ uni.showToast({
title:'控制成功', title: '控制成功',
icon:'none' icon: 'none'
}) })
}, },
complete() { complete() {
@ -247,7 +280,7 @@
} }
}) })
}, },
controlVideoFn_dh(pan, tilt, zoom){ controlVideoFn_dh(pan, tilt, zoom) {
var code = ''; var code = '';
var jsonStr = { var jsonStr = {
pan: pan, pan: pan,
@ -269,10 +302,10 @@
url: "xmgl/video/putPTZ", url: "xmgl/video/putPTZ",
data: json, data: json,
method: "get", method: "get",
success(res){ success(res) {
uni.showToast({ uni.showToast({
title:'控制成功', title: '控制成功',
icon:'none' icon: 'none'
}) })
}, },
complete() { complete() {
@ -285,202 +318,221 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* #ifdef H5 */ /deep/ .m3u8-player,
.fullHeight{ .player-m3u8{
background-color: #F4F5FD;
height: 100vh;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.fullHeight{
background-color: #F4F5FD;
height: 100vh;
}
/* #endif */
/* #ifdef APP-PLUS */
.fullHeight{
background-color: #F4F5FD;
height: auto;
padding-bottom: 60rpx;
}
/* #endif */
.videoBox{
width: 100%;
}
.videoName{
font-size: 16px;
color: $uni-text-color;
font-weight: bold;
margin: 10px 15px;
position: relative;
.changeBtn{
position: absolute;
right: 0;
top: 0;
font-size: 12px;
}
}
.set-speed {
margin: 48rpx 96rpx;
height: 108rpx;
}
.video-playback{
width: 454rpx;
height: 108rpx;
background: #FFFFFF;
border-radius: 31rpx;
text-align: center;
line-height: 108rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 40rpx;
color: #8D8D8D;
margin: 0 auto;
margin-top: 80rpx;
// position: fixed;
// bottom: 80rpx;
// left: 145rpx;
}
.videoOperateBox {
position: relative;
text-align: center;
padding-top: 10px;
.bg{
width: 220px;
height: 220px;
}
}
.videoOperateBox .box {
position: relative;
display: inline-block;
margin: auto;
height: 220px;
}
.videoOperateBox .pic {
position: absolute;
cursor: pointer;
}
.videoOperateBox .zoom {
width: 106px;
height: 69px;
display: inline-block;
cursor: pointer;
}
.videoOperateBox .zoomin:hover {
background: url("../../static/videoControlIcon/4.png");
}
.videoOperateBox .zoomout:hover {
background: url("../../static/videoControlIcon/2.png");
}
.videoOperateBox .zoomin {
background: url("../../static/videoControlIcon/3.png");
}
.videoOperateBox .zoomout {
background: url("../../static/videoControlIcon/1.png");
}
.videoOperateBox .left {
width: 28px;
height: 33px;
background: url("../../static/videoControlIcon/left.png");
left: 25px;
top: 50%;
margin-top: -16px;
}
.videoOperateBox .left:hover {
background: url("../../static/videoControlIcon/left-active.png");
}
.videoOperateBox .right:hover {
background: url("../../static/videoControlIcon/right-active.png");
}
.videoOperateBox .top:hover {
background: url("../../static/videoControlIcon/top-active.png");
}
.videoOperateBox .bottom:hover {
background: url("../../static/videoControlIcon/bottom-active.png");
}
// .videoOperateBox .center:hover {
// background: url("../../static/videoControlIcon/center-active.png");
// }
.videoOperateBox .right {
width: 28px;
height: 33px;
background: url("../../static/videoControlIcon/right.png");
right: 25px;
top: 50%;
margin-top: -16px;
}
.videoOperateBox .top {
width: 33px;
height: 28px;
background: url("../../static/videoControlIcon/top.png");
top: 25px;
left: 50%;
margin-left: -16px;
}
.videoOperateBox .bottom {
width: 33px;
height: 28px;
background: url("../../static/videoControlIcon/bottom.png");
bottom: 25px;
left: 50%;
margin-left: -16px;
}
// .videoOperateBox .center {
// width: 44px;
// height: 40px;
// background: url("../../static/videoControlIcon/center.png");
// left: 50%;
// top: 50%;
// margin-top: -20px;
// margin-left: -22px;
// }
.desc {
text-align: right;
position: absolute;
top: -12rpx;
font-size: 32rpx;
left: 28rpx;
}
.speed_wrap {
width: 550rpx;
height: 300rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.s_title {
color: #000;
font-weight: 600;
line-height: 40rpx;
font-size: 36rpx;
margin: 24rpx 0;
}
.s_btn {
width: 100%; width: 100%;
&:after { height: 420rpx;
border-radius: 0; }
/* #ifdef H5 */
.fullHeight {
background-color: #F4F5FD;
height: 100vh;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.fullHeight {
background-color: #F4F5FD;
height: 100vh;
}
/* #endif */
/* #ifdef APP-PLUS */
.fullHeight {
background-color: #F4F5FD;
height: auto;
padding-bottom: 60rpx;
}
/* #endif */
.videoBox {
width: 100%;
}
.videoName {
font-size: 16px;
color: $uni-text-color;
font-weight: bold;
margin: 10px 15px;
position: relative;
.changeBtn {
position: absolute;
right: 0;
top: 0;
font-size: 12px;
} }
} }
}
</style> .set-speed {
margin: 48rpx 96rpx;
height: 108rpx;
}
.video-playback {
width: 454rpx;
height: 108rpx;
background: #FFFFFF;
border-radius: 31rpx;
text-align: center;
line-height: 108rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 40rpx;
color: #8D8D8D;
margin: 0 auto;
margin-top: 80rpx;
// position: fixed;
// bottom: 80rpx;
// left: 145rpx;
}
.videoOperateBox {
position: relative;
text-align: center;
padding-top: 10px;
.bg {
width: 220px;
height: 220px;
}
}
.videoOperateBox .box {
position: relative;
display: inline-block;
margin: auto;
height: 220px;
}
.videoOperateBox .pic {
position: absolute;
cursor: pointer;
}
.videoOperateBox .zoom {
width: 106px;
height: 69px;
display: inline-block;
cursor: pointer;
}
.videoOperateBox .zoomin:hover {
background: url("../../static/videoControlIcon/4.png");
}
.videoOperateBox .zoomout:hover {
background: url("../../static/videoControlIcon/2.png");
}
.videoOperateBox .zoomin {
background: url("../../static/videoControlIcon/3.png");
}
.videoOperateBox .zoomout {
background: url("../../static/videoControlIcon/1.png");
}
.videoOperateBox .left {
width: 28px;
height: 33px;
background: url("../../static/videoControlIcon/left.png");
left: 25px;
top: 50%;
margin-top: -16px;
}
.videoOperateBox .left:hover {
background: url("../../static/videoControlIcon/left-active.png");
}
.videoOperateBox .right:hover {
background: url("../../static/videoControlIcon/right-active.png");
}
.videoOperateBox .top:hover {
background: url("../../static/videoControlIcon/top-active.png");
}
.videoOperateBox .bottom:hover {
background: url("../../static/videoControlIcon/bottom-active.png");
}
// .videoOperateBox .center:hover {
// background: url("../../static/videoControlIcon/center-active.png");
// }
.videoOperateBox .right {
width: 28px;
height: 33px;
background: url("../../static/videoControlIcon/right.png");
right: 25px;
top: 50%;
margin-top: -16px;
}
.videoOperateBox .top {
width: 33px;
height: 28px;
background: url("../../static/videoControlIcon/top.png");
top: 25px;
left: 50%;
margin-left: -16px;
}
.videoOperateBox .bottom {
width: 33px;
height: 28px;
background: url("../../static/videoControlIcon/bottom.png");
bottom: 25px;
left: 50%;
margin-left: -16px;
}
// .videoOperateBox .center {
// width: 44px;
// height: 40px;
// background: url("../../static/videoControlIcon/center.png");
// left: 50%;
// top: 50%;
// margin-top: -20px;
// margin-left: -22px;
// }
.desc {
text-align: right;
position: absolute;
top: -12rpx;
font-size: 32rpx;
left: 28rpx;
}
.speed_wrap {
width: 550rpx;
height: 300rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.s_title {
color: #000;
font-weight: 600;
line-height: 40rpx;
font-size: 36rpx;
margin: 24rpx 0;
}
.s_btn {
width: 100%;
&:after {
border-radius: 0;
}
}
}
</style>