Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_video
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
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
template admin
ww_video
Commits
616826b2
Commit
616826b2
authored
Aug 12, 2020
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 背景图片
parent
f6905160
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
64 additions
and
33 deletions
+64
-33
play.component.html
src/app/play/play.component.html
+37
-33
play.component.scss
src/app/play/play.component.scss
+27
-0
player-bg.png
src/assets/player-bg.png
+0
-0
No files found.
src/app/play/play.component.html
View file @
616826b2
<div
class=
"p-courseware-video"
[
style
.
background-image
]="
hasVideo
?
''
:
'
url
(
assets
/
player
/
video-not-upload
.
jpg
)'"
>
<video
*
ngIf=
"hasVideo"
<div
class=
"body-bg"
></div>
[
src
]="
data
.
contentObj
.
video_url
"
<div
class=
"player-border"
>
width=
"100%"
height=
"100%"
<div
#
videoNode
(
click
)="
playVideo
()"
>
class=
"p-courseware-video"
</video>
[
style
.
background-image
]="
hasVideo
?
''
:
'
url
(
assets
/
player
/
video-not-upload
.
jpg
)'"
<div
class=
"video-cover"
*
ngIf=
"initCover && !isPlaying"
>
>
<img
*
ngIf=
"initCover"
[
src
]="
initCover
"
style=
"width:100%;height:100%;"
/>
<video
*
ngIf=
"hasVideo"
</div>
[
src
]="
data
.
contentObj
.
video_url
"
<div
class=
"k-play-btn"
*
ngIf=
"!isPlayStarted && hasVideo"
(
click
)="
playVideo
()"
>
width=
"100%"
height=
"100%"
<i
class=
"anticon anticon-play-circle-o"
></i>
#
videoNode
(
click
)="
playVideo
()"
>
</div>
</video>
<div
class=
"k-video-control"
*
ngIf=
"hasVideo"
>
<div
class=
"video-cover"
*
ngIf=
"initCover && !isPlaying"
>
<div
class=
"k-video-control-bg"
></div>
<img
*
ngIf=
"initCover"
[
src
]="
initCover
"
<div
class=
"k-video-control-time-past"
>
{{currentTime | time}}
</div>
style=
"width:100%;height:100%;"
/>
<div
#
videoProgress
class=
"k-video-control-progress"
(
mousedown
)="
onProgressMouseDown
($
event
)"
(
mousemove
)="
onProgressMouseMove
($
event
)"
(
mouseup
)="
onProgressMouseUp
($
event
)"
>
<div
class=
"i-bg"
></div>
<div
class=
"i-before-progress"
[
style
.
width
]="
progress
+
'%'"
></div>
<div
class=
"i-cursor"
[
style
.
left
]="
progress
+
'%'"
></div>
</div>
</div>
<div
class=
"k-video-control-time-total"
>
{{duration | time}}
</div>
<div
class=
"k-play-btn"
*
ngIf=
"!isPlayStarted && hasVideo"
(
click
)="
playVideo
()"
>
<div
class=
"k-video-control-tool"
>
<i
class=
"anticon anticon-play-circle-o"
></i>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
-10
)"
>
-10
</div>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
-5
)"
>
-5
</div>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
5
)"
>
+5
</div>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
10
)"
>
+10
</div>
</div>
</div>
<div
class=
"k-video-control"
*
ngIf=
"hasVideo"
>
<div
class=
"k-video-control-bg"
></div>
<div
class=
"k-video-control-time-past"
>
{{currentTime | time}}
</div>
<div
#
videoProgress
class=
"k-video-control-progress"
(
mousedown
)="
onProgressMouseDown
($
event
)"
(
mousemove
)="
onProgressMouseMove
($
event
)"
(
mouseup
)="
onProgressMouseUp
($
event
)"
>
<div
class=
"i-bg"
></div>
<div
class=
"i-before-progress"
[
style
.
width
]="
progress
+
'%'"
></div>
<div
class=
"i-cursor"
[
style
.
left
]="
progress
+
'%'"
></div>
</div>
<div
class=
"k-video-control-time-total"
>
{{duration | time}}
</div>
<div
class=
"k-video-control-tool"
>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
-10
)"
>
-10
</div>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
-5
)"
>
-5
</div>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
5
)"
>
+5
</div>
<div
class=
"i-tool-btn"
(
click
)="
onBtnQuickSeek
(
10
)"
>
+10
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/play/play.component.scss
View file @
616826b2
@import
'../style/common_mixin.scss'
;
@import
'../style/common_mixin.scss'
;
.body-bg
{
position
:
absolute
;
top
:
0px
;
left
:
0px
;
right
:
0px
;
bottom
:
0px
;
background-image
:
url('../../assets/player-bg.png')
!
important
;
background-size
:
100%
;
}
.player-border
{
position
:
absolute
;
left
:
calc
((
100%
-
100vh
*
1
.36
)
/
2
);
top
:
5vh
;
right
:
calc
((
100%
-
100vh
*
1
.36
)
/
2
);
bottom
:
5vh
;
text-align
:
center
;
// box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
border-radius
:
11px
;
border
:
20px
solid
#23b1c2
;
background-color
:
#fff
;
overflow
:
hidden
;
color
:
#303133
;
transition
:
.3s
;
}
.p-courseware-video
{
.p-courseware-video
{
height
:
100%
;
height
:
100%
;
overflow
:
hidden
;
overflow
:
hidden
;
...
...
src/assets/player-bg.png
0 → 100644
View file @
616826b2
47.2 KB
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