Commit 6467f2c9 authored by lilei's avatar lilei

cutter组件拆解

parent ebc6e850
<template>
<div class="video-change" @click="changeVideo">
替换视频
</div>
</template>
<script>
export default {
methods: {
changeVideo() {
this.$emit('changeVideo')
}
}
}
</script>
<style lang="scss" scoped>
.video-change {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #dddddd;
border-radius: 4px;
user-select: none;
cursor: pointer;
}
</style>
<template>
<div class="video-control">
<div class="video-play-btn" @click="play()">播放</div>
<div class="video-time-content">
<div class="now-time">{{ duration | formatTime }}</div>
<span>/</span>
<div class="total-time">{{ duration | formatTime }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
props: ['duration', 'nowTime'],
methods: {
play() {
this.$emit('play')
}
},
filters: {
formatTime(duration) {
if (duration <= 0) return '00:00'
if (!duration) return '--:--'
let min = ~~(duration / 60)
min = (min + '').length === 1 ? '0' + min : min
let sec = Math.floor(duration % 60)
sec = (sec + '').length === 1 ? '0' + sec : sec
min = min || '00'
sec = sec || '00'
return min + ':' + sec
}
}
}
</script>
<style lang="scss" scoped>
.video-control {
display: flex;
justify-content: flex-start;
align-self: center;
width: 200px;
user-select: none;
}
.video-play-btn {
border: 1px solid #dddddd;
width: 30px;
height: 30px;
border-radius: 100%;
margin-right: 10px;
cursor: pointer;
}
.video-time-content {
display: flex;
> div,
span {
line-height: 30px;
color: #474261;
}
}
</style>
......@@ -14,20 +14,45 @@ export default {
},
mounted() {
this.$bus.on('videoPlayer.play', (data) => {
console.log(data)
// if(data.state)
if (data.time !== undefined) {
this.currentTime(data.time)
}
if (data.play) {
this.play()
} else {
this.pause()
}
})
this.$nextTick(() => {
this.$refs.videoDom.addEventListener('canplay', () => {
this.canPlay = true
this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
this.$refs.videoDom.addEventListener('ended', () => {
this.$emit('ended')
})
})
},
methods: {
canPlayFunc() {
this.canPlay = true
let from = this.$parent.$options.name || 'videoPlayer'
this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
},
play() {
if (!this.canPlay) return
this.$refs.videoDom.play()
this.$emit('currentTime', this.$refs.videoDom.currentTime)
},
pause() {
if (!this.canPlay) return
this.$refs.videoDom.pause()
},
currentTime(time) {
if (!this.canPlay) return
this.$refs.videoDom.currentTime = time
}
},
beforeDestroy() {
this.$refs.videoDom.removeEventListener('canplay')
this.$refs.videoDom.removeEventListener('ended')
}
}
</script>
......
<template>
<div class="video-cutter">
<div class="video-content">
<video-player></video-player>
<VideoPlayer @currentTime="changeTime" @end="playEnd" />
</div>
<div class="video-btn">
<videoChange @changeVideo="changeVideo" />
<videoControl :duration="duration" :nowTime="nowTime" @play="videoPlay" />
<div></div>
</div>
<div></div>
<div></div>
<div></div>
</div>
......@@ -11,17 +15,59 @@
<script>
import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
import VideoChange from '@/components/videoCutter/videoChange.vue'
import VideoControl from '@/components/videoCutter/videoControl.vue'
export default {
components: {
VideoPlayer
VideoPlayer,
VideoChange,
VideoControl
},
name: 'videoCutter',
data() {
return {
name: ''
name: '',
nowTime: 0,
duration: 0,
playing: false,
canPlay: false
}
},
created() {},
mounted() {}
mounted() {
this.$bus.on('videoCutter.canPlay', this.canPlayFunc)
},
methods: {
changeVideo() {
console.log('todo change video, <-----lilei')
},
canPlayFunc(data) {
this.duration = data
this.canPlay = true
},
videoPlay() {
if (!this.canPlay) return
let ob = {}
if (this.playing) {
ob.play = false
} else {
ob.play = true
if (this.nowTime >= this.duration) {
ob.time = 0
}
}
this.playing = !this.playing
this.$bus.emit('videoPlayer.play', ob)
},
changeTime(data) {
console.log(data)
},
playEnd() {
this.playing = false
this.nowTime = this.duration
}
}
}
</script>
......@@ -35,4 +81,8 @@ export default {
width: 100%;
height: 700px;
}
.video-btn {
display: flex;
justify-content: space-between;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment