156 lines
3.3 KiB
Vue
156 lines
3.3 KiB
Vue
<template>
|
|
<view v-if="videoShow" class="pos-f pos-full x-c" style="background: #000; z-index: 99999;" @dblclick="videoExit">
|
|
<video @play="videoPlay" @pause="videoPause" @ended="videoEnded" @click="videoTap"
|
|
@fullscreenchange="videoChange" autoplay enable-play-gesture id="use-video" :src="src"
|
|
:vslide-gesture-in-fullscreen="false" :direction="0" :show-play-btn="false" :show-fullscreen-btn="false"
|
|
style="width: 100%;height: 100%;"></video>
|
|
|
|
<!-- 暂停播放图标 -->
|
|
<cover-image v-if="videoShow && !videoPlaying" src="/static//common/bofang.svg"
|
|
class="border-radius-c pos-a pos-tl-c x-c" style="width: 100rpx; height: 100rpx;" @click="videoTap">
|
|
</cover-image>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<cover-image v-if="videoShow" src="/static/common/close.png"
|
|
class="border-radius-c pos-a pos-bottom pos-right x-c use-close" @click="videoExit"></cover-image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "use-video",
|
|
props: {
|
|
src: {
|
|
type: String
|
|
},
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
videoShow: false,
|
|
videoContext: null,
|
|
videoPlaying: false,
|
|
videoDblClick: false,
|
|
touchTime: new Date().getTime()
|
|
};
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
console.log('watch', val);
|
|
this.videoShow = val;
|
|
if(val) {
|
|
setTimeout(() => {
|
|
this.videoPlay()
|
|
}, 100)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description 超时
|
|
*/
|
|
timerout(callback, timer = 1000) {
|
|
let _timer = setTimeout(() => {
|
|
if (typeof callback === 'function') {
|
|
callback();
|
|
}
|
|
clearTimeout(_timer);
|
|
}, timer);
|
|
},
|
|
videoPlay(event) {
|
|
console.log('video-play', event);
|
|
this.videoPlaying = true;
|
|
},
|
|
videoPause(event) {
|
|
console.log('video-pause', event);
|
|
this.videoPlaying = false;
|
|
},
|
|
videoEnded(event) {
|
|
console.log('video-ended', event);
|
|
},
|
|
videoTap(event) {
|
|
console.log('video-tap', event);
|
|
this.videoDblClick = false;
|
|
|
|
this.timerout(() => {
|
|
if (new Date().getTime() - this.touchTime < 260) {
|
|
this.videoDblClick = true;
|
|
console.log('dblclick', this.videoContext);
|
|
|
|
this.videoExit();
|
|
} else if (!this.videoDblClick) {
|
|
console.log('click', this.videoContext);
|
|
|
|
if (this.videoPlaying) {
|
|
this.videoContext.pause();
|
|
} else {
|
|
this.videoContext.play();
|
|
}
|
|
}
|
|
}, 260);
|
|
|
|
this.touchTime = new Date().getTime();
|
|
},
|
|
videoExit() {
|
|
this.videoContext.stop();
|
|
this.videoContext.pause();
|
|
this.videoShow = false;
|
|
this.$emit('exit');
|
|
},
|
|
videoChange(event) {
|
|
console.log('video-change', event);
|
|
}
|
|
},
|
|
created() {
|
|
this.videoShow = this.value;
|
|
},
|
|
mounted() {
|
|
this.videoContext = uni.createVideoContext('use-video', this);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.pos-a {
|
|
position: absolute;
|
|
}
|
|
|
|
.pos-f {
|
|
position: fixed;
|
|
z-index: 1;
|
|
}
|
|
.pos-right {right: 0}
|
|
|
|
.pos-tl-c {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.pos-bottom {
|
|
bottom: 0
|
|
}
|
|
|
|
.pos-full {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.border-radius-c {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.use-close {
|
|
right: 30rpx;
|
|
bottom: 88rpx;
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
background: rgba(0, 0, 0, .58);
|
|
}
|
|
</style>
|