Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ubezi
web-ausstellung-virtuell.de
Commits
a457f854
Commit
a457f854
authored
Dec 23, 2017
by
Jonas Heinrich
Browse files
added background color gradient overlay to player
parent
7592d889
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/player.css
View file @
a457f854
...
...
@@ -48,6 +48,18 @@ video::-webkit-media-controls-enclosure {
width
:
100%
;
vertical-align
:
middle
;
}
#video-container
.overlay
{
height
:
100%
;
width
:
100%
;
position
:
absolute
;
top
:
0px
;
left
:
0px
;
z-index
:
2
;
opacity
:
0.7
;
background
:
linear-gradient
(
to
top
,
rgba
(
0
,
0
,
0
,
1
),
rgba
(
0
,
0
,
0
,
0
)
70%
);
}
#video-container
#video-controls
{
position
:
absolute
;
left
:
0
;
...
...
@@ -55,6 +67,7 @@ video::-webkit-media-controls-enclosure {
bottom
:
4px
;
z-index
:
2147483647
;
}
#video-controls
.controls
{
padding
:
0
;
}
...
...
index.html
View file @
a457f854
...
...
@@ -29,6 +29,7 @@
<content>
<div
id=
"video-container"
>
<div
class=
"overlay"
></div>
<video
id=
"video"
width=
"100%"
height=
"100%"
>
<!-- Video here -->
...
...
js/player.js
View file @
a457f854
...
...
@@ -17,6 +17,7 @@ window.onload = function() {
var
video
=
document
.
getElementById
(
"
video
"
),
videoContainer
=
$
(
"
#video-container
"
),
controls
=
$
(
"
#video-controls
"
),
overlay
=
$
(
"
.overlay
"
),
playButton
=
$
(
"
#play-pause
"
),
muteButton
=
$
(
"
#mute
"
),
fullScreenButton
=
$
(
"
#fullscreen
"
),
...
...
@@ -28,8 +29,9 @@ window.onload = function() {
timeoutId
=
0
;
videoContainer
.
mousemove
(
function
()
{
controls
.
fadeIn
(
'
400
'
);
overlay
.
fadeIn
(
'
400
'
);
clearTimeout
(
timeoutId
);
timeoutId
=
window
.
setTimeout
(
function
(){
controls
.
fadeOut
(
'
100
'
);},
4000
);
timeoutId
=
window
.
setTimeout
(
function
(){
controls
.
fadeOut
(
'
100
'
);
overlay
.
fadeOut
(
'
100
'
);
},
4000
);
});
video
.
addEventListener
(
"
click
"
,
function
(){
...
...
@@ -117,9 +119,11 @@ window.onload = function() {
});
videoContainer
.
mouseleave
(
function
(){
controls
.
fadeOut
(
'
400
'
);
overlay
.
fadeOut
(
'
400
'
);
});
videoContainer
.
mouseenter
(
function
(){
controls
.
fadeIn
(
'
400
'
);
overlay
.
fadeIn
(
'
400
'
);
});
timeDuration
.
text
(
formatTime
(
video
.
duration
));
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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