Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mould-vuecli3
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lhfe
mould-vuecli3
Commits
6467f2c9
Commit
6467f2c9
authored
Aug 27, 2020
by
lilei
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
cutter组件拆解
parent
ebc6e850
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
172 additions
and
9 deletions
+172
-9
videoChange.vue
src/components/videoCutter/videoChange.vue
+26
-0
videoControl.vue
src/components/videoCutter/videoControl.vue
+62
-0
videoPlayer.vue
src/components/videoCutter/videoPlayer.vue
+29
-4
videoCutter.vue
src/views/videoCutter.vue
+55
-5
No files found.
src/components/videoCutter/videoChange.vue
0 → 100644
View file @
6467f2c9
<
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
>
src/components/videoCutter/videoControl.vue
0 → 100644
View file @
6467f2c9
<
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
>
src/components/videoCutter/videoPlayer.vue
View file @
6467f2c9
...
...
@@ -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
>
...
...
src/views/videoCutter.vue
View file @
6467f2c9
<
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
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment