uni-app发布为微信小程序 视频格式为mp4格式
<template> <view> <video class="videoPart" :src="src" controls loop :show-fullscreen-btn="false" id="video_${src}" ref="video_${src}" @timeupdate="timeupdate">
</video></view>
</template>
<script>
export default{
props:{
src:{
type:String,
default:''
},
play:{
type:Boolean,
default:false
},
initialTime:{
type:Number,
default:0
},
},
data(){
return{
time:0,
duration:0,
playFirst:true
}
},
mounted() {
this.videoCtx = uni.createVideoContext(video_${this.src},this)
},
methods:{
timeupdate(event){
this.duration = event.detail.duration
if(!this.play) return
if(this.time>=this.duration) this.time=0
this.time = event.detail.currentTime
},
videoPlay(){
if(this.play){
this.videoCtx.play();
if(this.playFirst){
this.videoCtx.seek(this.startTime)
this.playFirst = false
}
}else{
this.videoCtx.pause();
this.$emit('pause',this.time)
}
},
},
watch:{
play(newVal,oldVal){
this.videoPlay()
},
startTime:{
immediate: true,
handler(newVal,oldVal){
this.time = newVal
}
},
},
computed:{
startTime(){
return this.initialTime
}
}
}
</script>
