短视频直播源码，视频计时效果，可随时按键暂停

短视频直播源码，视频计时效果，可随时按键暂停

HTML部分:

 

<template>
<view>
<view>
{{formatTime()}}
</view>
<button @click="swichType">{{buttonText}}</button>
</view>
</template>

​

js:

 

<script>
import moment from "moment"
export default {
data() {
return {
buttonText: '开始',
icon: "play-circle-fill",
buttonType: true, //true为开始， flase为结束
realTime: 0,
interval: '',
}
},
onLoad() {
 
},
methods: {
formatTime() {
return moment(moment.duration(this.realTime, 'seconds') 
 ['_milliseconds']).utc().format('HH:mm:ss',)
},
timeIncrease() {
this.interval = setInterval(_ => {
this.realTime += 1;
}, 1000)
},
swichType() {
if (this.buttonType) {
this.buttonText = "暂停"
this.timeIncrease()
} else {
this.buttonText = "开始"
clearInterval(this.interval)
}
this.buttonType = !this.buttonType
},
}
}
</script>

以上就是 短视频直播源码，视频计时效果，可随时按键暂停，更多内容欢迎关注之后的文章