You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.6 KiB
108 lines
2.6 KiB
<template>
|
|
<view class="" :style="boxStyle">
|
|
<view class="goods-video" v-show="switchMedia == 'video'">
|
|
<video :id="videoId" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)"
|
|
:style="videoWarpCss + boxStyle" objectFit="contain" :controls="true" :show-fullscreen-btn="true"
|
|
:auto-pause-if-navigate="false" :auto-pause-if-open-native="false" :show-mute-btn="true" :autoplay="autoplay"
|
|
@pause="pauseVideo()"></video>
|
|
</view>
|
|
<view style="position: relative;" v-show="switchMedia == 'img'" @click="changeType()">
|
|
<img class="play_icon" :src="$util.img('upload/weapp/user/play_icon.png')" alt="">
|
|
<image class="goods-img" :style="videoWarpCss + boxStyle" :src="$util.img(value.imageUrl)" mode="scaleToFill"
|
|
style="width: 100%;">
|
|
</image>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 视频
|
|
export default {
|
|
name: 'diy-video',
|
|
props: {
|
|
value: {
|
|
type: Object
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
videoId: 'video' + this._uid,
|
|
switchMedia: "img",
|
|
autoplay: false,
|
|
videoKey: 1,
|
|
boxStyle: {},
|
|
videoContext: null
|
|
};
|
|
},
|
|
|
|
created() {
|
|
uni.$on('videoStop', () => {
|
|
this.pauseVideo()
|
|
})
|
|
// uni.$on('videoStart', () => {
|
|
// this.changeType()
|
|
// })
|
|
this.videoContext = uni.createVideoContext(this.videoId)
|
|
},
|
|
computed: {
|
|
videoWarpCss: function () {
|
|
var obj = '';
|
|
if (this.value.componentAngle == 'round') {
|
|
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
}
|
|
this.calcStyle()
|
|
return obj;
|
|
}
|
|
},
|
|
methods: {
|
|
calcStyle() {
|
|
// uni.getSystemInfo({
|
|
// success: res => {
|
|
// const { screenWidth, screenHeight, ratio } = res
|
|
// }
|
|
// });
|
|
this.$nextTick(() => {
|
|
this.boxStyle = `width: 100%; height: ${this.value.imgHeight / (this.value.imgWidth / 690)}rpx;`
|
|
// this.boxStyle = {
|
|
// width: '100%',
|
|
// height: this.value.imgHeight / (this.value.imgWidth / 690) + 'rpx'
|
|
// }
|
|
})
|
|
},
|
|
changeType() {
|
|
this.switchMedia = "video";
|
|
this.autoplay = true;
|
|
this.videoContext.play();
|
|
},
|
|
pauseVideo() {
|
|
this.switchMedia = "img";
|
|
this.autoplay = false;
|
|
|
|
this.videoContext.pause();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
video {
|
|
width: 100%;
|
|
}
|
|
|
|
.play_icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
|