<template>
<view class="container">
<view class="control-view">
<view class="switch">
<image class="img" src="@/static/icon/common/pause.png"></image>
</view>
<text class="time-process">{{timeFormat(playDuration)}}</text>
<slider class="slider" :value="playDuration" min="0" :max="videoTotalDuration" block-color="#FFFFFF"
activeColor="#ebebeb" backgroundColor="#949494"
@change="durationSliderChange" block-size="14" />
<text class="time-total">{{timeFormat(videoTotalDuration)}}</text>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
videoTotalDuration: 18 * 1000,
playDuration: 0,
}
},
onLoad(pars) {
},
onShow() {
},
onBackPress() {
},
onHide() {
},
onUnload() {
},
computed: {
},
methods: {
timeFormat(time) {
if (util.isNullOrEmpty(time)) {
return "00:00";
}
let second = parseInt(time/1000);
let minSecond = time%1000;
if (minSecond > 500) {
second += 1;
}
if (second < 60) {
return "00:"+(second < 10 ? ("0"+second):second);
}
let minute = parseInt(second/60);
second = second%60;
if (minute < 60) {
return (minute < 10 ? ("0"+minute):minute)+":"+(second < 10 ? ("0"+second):second);
}
let hour = parseInt(minute/60);
minute = minute%60;
return (hour < 10 ? ("0"+hour):hour)
+":"+(minute < 10 ? ("0"+minute):minute)
+":"+(second < 10 ? ("0"+second):second);
},
seekTo(millisecond) {
console.log(`MediaPlayer SeekTo: ${millisecond}`);
this.playDuration = millisecond;
},
}
}
</script>
<style lang='scss' scoped>
.container {
flex-direction: column;
flex: 1;
background: #000000;
}
.control-view {
background-color: #bcbcbc;
width: 750rpx;
position: fixed;
bottom: 400rpx;
left: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.switch {
width: 40prx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.img {
width: 25prx;
height: 25prx;
}
}
.time-process {
color: #ffffff;
width: 45prx;
font-size: 30rpx;
text-align: right;
}
.time-total {
color: #ffffff;
width: 100rpx;
font-size: 30rpx;
text-align: left;
}
.slider {
width: 500rpx;
}
}
</style>