wechat_yxcl/pages/severpartVideo/severpartVideo.vue
2021-12-10 20:18:59 +08:00

208 lines
5.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page-view">
<live-player :src="videoMsg.url" autoplay
:orientation="isfullScreen ? 'horizontal': 'vertical'" class="live-player"
muted="false"
@fullscreenchange="fullscreenchange" :style="isfullScreen? `width: 750rpx;height:${windowHeight}px;`:'width:750rpx;'"
@statechange="videoChange"
@audiovolumenotify="audiovolumenotify"
>
</live-player>
<cover-image
src="/static/images/video/full-video.png"
@click="isfullScreen=!isfullScreen"
class="screen-ico"
v-if="!isfullScreen"
style="right:40rpx" ></cover-image>
<cover-image
v-else
src="/static/images/video/orgin-video.png"
@click="isfullScreen=!isfullScreen"
class="screen-ico"
style="left: 40rpx;"></cover-image>
<!-- <cover-view class="uni-icon uni-icon-scan" @click="isfullScreen=!isfullScreen"></cover-view> -->
</view>
</template>
<script>
export default {
data() {
let appinfo = uni.getSystemInfoSync()
return {
requestData: {
accessToken:"at.4ese57m70n5g281n9wlpfsyz4a4btbiw-58g0eoe6h4-02jhrfk-idxvwfdhh",
deviceSerial:"F79721547", //679417149
channelNo: "1",
protocol: 3,
type: "2",
startTime:"",//"2021-06-10 11:00:00",
stopTime:"",// "2021-06-10 11:30:00",
quality: 2,
supportH265: 0,
},
windowHeight: appinfo.windowHeight,
isfullScreen: false,
videoSrc: null,
videoMsg: null
}
},
methods: {
videoChange(detail){
console.log(detail)
},
audiovolumenotify(detail){
console.log(detail)
},
getVideo () {
let {requestData} = this
uni.request({
url:"https://open.ys7.com/api/lapp/v2/live/address/get",
method: "POST",
data: requestData,
header:{
"Content-Type": "application/x-www-form-urlencoded"
},
success:(response)=>{
console.log(response.data)
if(response.data.code!='200') {
uni.showModal({
title: "温馨提示",
content: "播放失败!错误码:"+response.data.code+""+response.data.msg
})
}
this.videoMsg = response.data.data
}
})
}
},
onLoad(option) {
let {sc, hd, bt, et, token} = option
this.requestData.startTime= bt
this.requestData.stopTime= et
this.requestData.deviceSerial= sc
this.requestData.channelNo= hd
this.requestData.accessToken= token
// this.videoSrc = `ezopen://open.ys7.com/${sc}/${hd}.rec?begin=20210610110000&end=20210610110130`
this.getVideo()
}
}
</script>
<style scoped>
.page-view{
position: relative;
}
.live-player {
width: 750rpx;
}
.screen-ico {
position: absolute;
bottom: 40rpx;
right: 40rpx;
color: #fff;
width: 48rpx;
height: 48rpx;
z-index: 99;
}
.uni-icon-scan {
color: #444;
position: relative;
/* top: -68rpx;
margin-left: 40rpx; */
fnot-size: 24rpx;
}
</style>
<!--
<template>
<div>
<div
id="video-container"
style="width: 750rpx;height:7rem;"
></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
let width = uni.upx2px(750);
let height = width * 9 / 16;
return {
width: width,
height: height,
player: null,
isplay: true
}
},
onLoad(option) {
console.group('mounted 组件挂载完毕状态===============》');
let _this = this
setTimeout(function() {
_this.createPlay(option); // 方法调用示例10秒后关闭视频
}, 100)
},
methods: {
createPlay(option) {
let {sc, hd, bt, et, token} = option
let url = `ezopen://open.ys7.com/${sc}/${hd}.rec?begin=${bt}&end=${et}`
console.log(url)
let width = this.width
let height = this.height
let player = this.player = this.$util.playVideo({
autoplay: true,
id: 'video-container',
accessToken: token, // 'at.4ese57m70n5g281n9wlpfsyz4a4btbiw-58g0eoe6h4-02jhrfk-idxvwfdhh',
url: url,
// url: 'ezopen://open.ys7.com/F79721547/1.rec?begin=20210603211700&end=20210603233159',
// simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
template: 'simple',
// 视频上方头部控件
// controls: ['play', 'voice', 'fullScreen'],
// 如果templete参数不为simple,该字段将被覆盖
// header: ['capturePicture', 'save', 'zoom'],
// plugin: ['talk'], // 加载插件talk-对讲
// 视频下方底部控件
footer: ['fullScreen'], // 如果template参数不为simple,该字段将被覆盖'talk', 'broadcast', 'hd',
audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
openSoundCallBack: data => console.log('开启声音回调', data),
closeSoundCallBack: data => console.log('关闭声音回调', data),
startSaveCallBack: data => console.log('开始录像回调', data),
stopSaveCallBack: data => console.log('end录像回调', data),
capturePictureCallBack: data => console.log('截图成功回调', data),
fullScreenCallBack: data => console.log('全屏回调', data),
getOSDTimeCallBack: data => console.log('获取OSDTime回调', data),
handleError: (data) => { console.log('错误', data) },
width: width,
height: height
});
console.log('player', player);
// setTimeout(() => {
// player.stop()
// }, 4 * 60 * 1000)
}
}
};
</script>
<style scoped>
.video-box {
width: 10rem;
height: 12.5rem;
}
</style>
-->