<template>
|
<view class="jvideo-root" :style="{width,height}">
|
<image :style="{width,height}" class="jvideo-posterImg" :src="posterUrl" mode="aspectFit"></image>
|
<view class="jvideo-text">
|
<text style="justify-content: flex-end;">{{durationStr}}</text>
|
</view>
|
<view v-if="!isTransit" :style="{width,height}" @click="clickPaly" class="jvideo-box">
|
<image class="jvideo-playIcon" src="../static/play.png" mode="widthFix"></image>
|
</view>
|
<!-- <video :id="videoId" controls ref="videoMsg" :style="{height,width:state?width:'0rpx'}" @pause="state=0"
|
@timeupdate="timeupdate" @play="onPlay" @fullscreenchange="fullscreenchange" @error="videoErrorCallback"
|
class="jvideo-video" :src="urlVideo"></video> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
computed: {
|
posterUrl() {
|
if (this.poster) return this.poster
|
return this.defaultIco
|
},
|
durationStr() {
|
if(this.duration)
|
{
|
let min = parseInt(this.duration / 60);
|
let sec = this.duration % 60;
|
min = min < 10 ? '0' + min : min;
|
sec = sec < 10 ? '0' + sec : sec;
|
return min + ':' + sec;
|
}
|
|
return ""
|
}
|
},
|
created() {
|
const app = getApp()
|
this.defaultIco = "/static/logo.png"
|
this.videoId = Date.now() + Math.ceil(Math.random() * 10000000) + "";
|
},
|
mounted() {
|
|
if (this.url) {
|
//#ifdef MP-DINGTALK
|
this.urlVideo = this.url
|
//#endif
|
//#ifndef MP-DINGTALK
|
this.urlVideo = decodeURIComponent(this.url)
|
//#endif
|
}
|
this.duration = this.len || 0
|
this.VideoContext = uni.createVideoContext(this.videoId, this)
|
},
|
methods: {
|
fullscreenchange(e) {
|
this.state = e.detail.fullScreen
|
},
|
onPlay(e) {
|
console.log("onPlay", e, this.urlVideo);
|
//this.state = e.detail.fullScreen
|
},
|
|
timeupdate(e) {
|
console.log("timeupdate", e.detail);
|
let duration = parseInt(e.detail.duration)
|
if (duration != this.duration)
|
this.duration = duration
|
//this.currentTime = e.detail.currentTime
|
},
|
clickPaly() {
|
// this.state = !this.state
|
this.$emit('play')
|
},
|
|
videoErrorCallback(e) {
|
console.log('onPlayError, e=' + JSON.stringify(e));
|
},
|
|
},
|
watch: {
|
state(state, oldValue) {
|
console.log(state, 'state');
|
if (!state) {
|
//this.$refs.videoMsg.pause()
|
this.VideoContext.pause()
|
} else {
|
console.log('state videoId', this.videoId);
|
console.log('state play', this.VideoContext);
|
//this.$refs.videoMsg.play()
|
this.VideoContext.requestFullScreen({
|
direction: this.direction
|
})
|
this.VideoContext.play()
|
|
/* this.$nextTick(()=>{
|
console.log('state requestFullScreen',this.direction);
|
//this.$refs.videoMsg.requestFullScreen({direction:this.direction})
|
this.VideoContext.requestFullScreen({direction:this.direction})
|
}) */
|
}
|
},
|
len(value, oldValue) {
|
console.log(value, 'len');
|
this.duration = value
|
},
|
url(value, oldValue) {
|
//#ifdef MP-DINGTALK
|
this.urlVideo = value
|
//#endif
|
//#ifndef MP-DINGTALK
|
this.urlVideo = decodeURIComponent(value)
|
//#endif
|
console.log(value, 'url');
|
|
}
|
},
|
data() {
|
return {
|
VideoContext: {},
|
state: false,
|
currentTime: 0,
|
duration: 0,
|
videoId: '',
|
defaultIco: '',
|
urlVideo: '',
|
};
|
},
|
props: {
|
poster: {
|
type: [String, Boolean],
|
default () {
|
return ''
|
}
|
},
|
url: {
|
type: String,
|
default () {
|
return ''
|
}
|
},
|
direction: {
|
type: Number,
|
default () {
|
return 0
|
}
|
},
|
len: {
|
type: Number,
|
default () {
|
return 0
|
}
|
},
|
width: {
|
type: String,
|
default () {
|
return "750rpx";
|
}
|
},
|
height: {
|
type: String,
|
default () {
|
return "450rpx";
|
}
|
},
|
isTransit: {
|
type: Boolean,
|
default () {
|
return false
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.jvideo-root {
|
position: relative;
|
width: 750rpx;
|
height: 300px;
|
overflow: hidden;
|
border-radius: 10rpx;
|
}
|
|
.jvideo-posterImg {
|
display: flex;
|
width: 750rpx;
|
height: 300px;
|
position: absolute;
|
}
|
|
.jvideo-box {
|
display: flex;
|
width: 750rpx;
|
height: 300px;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
}
|
|
.jvideo-text {
|
display: flex;
|
bottom: 10rpx;
|
right: 10rpx;
|
height: 20px;
|
color: #ddd;
|
font-size: 12px;
|
position: absolute;
|
}
|
|
.jvideo-video {
|
display: flex;
|
width: 750rpx;
|
height: 300px;
|
position: absolute;
|
}
|
|
.jvideo-playIcon {
|
width: 100rpx;
|
}
|
</style>
|
