cansnow
108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<template>
|
|
<u-overlay
|
|
v-if="previewVideoFlag"
|
|
:show="previewVideoFlag"
|
|
opacity="1"
|
|
:custom-style="customMaskStyle">
|
|
<view @tap.stop="quitPlay"
|
|
class="playBox"
|
|
style="height:100vh;width:100vw;">
|
|
<video
|
|
v-if="previewVideoFlag"
|
|
:style="{height:videoHeight+'vw',width:'100vw'}"
|
|
:controls="true"
|
|
:show-fullscreen-btn="false"
|
|
:autoplay="true"
|
|
:src="previewVideoSrc"
|
|
@ended="play_end">
|
|
</video>
|
|
<view class="quitBox" @click="quitPlay">
|
|
<u-icon name="close-circle" color="#FFF" size="32"></u-icon>
|
|
<!-- <cover-view class="icon"></cover-view> -->
|
|
</view>
|
|
</view>
|
|
</u-overlay>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"videoPlayer",
|
|
props:{
|
|
previewVideoFlag:{
|
|
type:Boolean,
|
|
default:false,
|
|
required:true
|
|
},
|
|
previewVideoSrc:{
|
|
type:String,
|
|
default:"",
|
|
required:true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
customMaskStyle:{
|
|
display:"flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
videoHeight:100,
|
|
winHeight:0,
|
|
winWidth:0
|
|
};
|
|
},
|
|
watch:{
|
|
previewVideoSrc(nv,ov){
|
|
const _this = this;
|
|
console.log(nv,ov);
|
|
if(nv && nv != ov){
|
|
uni.getVideoInfo({
|
|
src:nv,
|
|
success(res) {
|
|
_this.videoHeight = res.width/ res.height * 100;
|
|
},
|
|
complete(res) {
|
|
console.log(res);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
created:function(){
|
|
this.winHeight=this.$u.sys().windowHeight;
|
|
this.winWidth=this.$u.sys().windowWidth;
|
|
},
|
|
methods:{
|
|
play_end(res){
|
|
console.log(res);
|
|
},
|
|
quitPlay:function(){
|
|
console.log('quit');
|
|
this.$emit("quitPlay");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.playBox{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.quitBox{
|
|
position: absolute;
|
|
z-index: 9999;
|
|
right: 5%;
|
|
top: 10%;
|
|
.icon{
|
|
color: #f00;
|
|
font-size: 32px;
|
|
font-family: uicon-iconfont;
|
|
}
|
|
}
|
|
</style>
|