Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Jannik Hellenkamp
website
Commits
2c869df7
Commit
2c869df7
authored
Aug 18, 2016
by
Andreas Valder
Browse files
added player
parent
db535aca
Changes
30
Expand all
Hide whitespace changes
Inline
Side-by-side
static/mediaelementjs/mediaelementplayer.css
0 → 100644
View file @
2c869df7
This diff is collapsed.
Click to expand it.
static/mediaelementjs/mediaelementplayer.js
0 → 100644
View file @
2c869df7
This diff is collapsed.
Click to expand it.
static/mediaelementjs/mediaelementplayer.min.css
0 → 100644
View file @
2c869df7
.mejs-offscreen
{
clip
:
rect
(
1px
1px
1px
1px
);
clip
:
rect
(
1px
,
1px
,
1px
,
1px
);
clip-path
:
polygon
(
0px
0
,
0
0
,
0
0
,
0
0
);
position
:
absolute
!important
;
height
:
1px
;
width
:
1px
;
overflow
:
hidden
}
.mejs-container
{
position
:
relative
;
background
:
#000
;
font-family
:
Helvetica
,
Arial
;
text-align
:
left
;
vertical-align
:
top
;
text-indent
:
0
}
.mejs-fill-container
,
.mejs-fill-container
.mejs-container
{
width
:
100%
;
height
:
100%
}
.mejs-fill-container
{
overflow
:
hidden
}
.mejs-container
:focus
{
outline
:
0
}
.me-plugin
{
position
:
absolute
}
.mejs-embed
,
.mejs-embed
body
{
width
:
100%
;
height
:
100%
;
margin
:
0
;
padding
:
0
;
background
:
#000
;
overflow
:
hidden
}
.mejs-fullscreen
{
overflow
:
hidden
!important
}
.mejs-container-fullscreen
{
position
:
fixed
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
overflow
:
hidden
;
z-index
:
1000
}
.mejs-container-fullscreen
.mejs-mediaelement
,
.mejs-container-fullscreen
video
{
width
:
100%
;
height
:
100%
}
.mejs-clear
{
clear
:
both
}
.mejs-background
{
position
:
absolute
;
top
:
0
;
left
:
0
}
.mejs-mediaelement
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
}
.mejs-poster
{
position
:
absolute
;
top
:
0
;
left
:
0
;
background-size
:
contain
;
background-position
:
50%
50%
;
background-repeat
:
no-repeat
}
:root
.mejs-poster
img
{
display
:
none
}
.mejs-poster
img
{
border
:
0
;
padding
:
0
;
border
:
0
}
.mejs-overlay
{
position
:
absolute
;
top
:
0
;
left
:
0
}
.mejs-overlay-play
{
cursor
:
pointer
}
.mejs-overlay-button
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
100px
;
height
:
100px
;
margin
:
-50px
0
0
-50px
;
background
:
url(bigplay.svg)
no-repeat
}
.no-svg
.mejs-overlay-button
{
background-image
:
url(bigplay.png)
}
.mejs-overlay
:hover
.mejs-overlay-button
{
background-position
:
0
-100px
}
.mejs-overlay-loading
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
80px
;
height
:
80px
;
margin
:
-40px
0
0
-40px
;
background
:
#333
;
background
:
url(background.png)
;
background
:
rgba
(
0
,
0
,
0
,
.9
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
50
,
50
,
50
,
.9
)),
to
(
rgba
(
0
,
0
,
0
,
.9
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.9
),
rgba
(
0
,
0
,
0
,
.9
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.9
),
rgba
(
0
,
0
,
0
,
.9
));
background
:
-o-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.9
),
rgba
(
0
,
0
,
0
,
.9
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.9
),
rgba
(
0
,
0
,
0
,
.9
));
background
:
linear-gradient
(
rgba
(
50
,
50
,
50
,
.9
),
rgba
(
0
,
0
,
0
,
.9
))}
.mejs-overlay-loading
span
{
display
:
block
;
width
:
80px
;
height
:
80px
;
background
:
transparent
url(loading.gif)
50%
50%
no-repeat
}
.mejs-container
.mejs-controls
{
position
:
absolute
;
list-style-type
:
none
;
margin
:
0
;
padding
:
0
;
bottom
:
0
;
left
:
0
;
background
:
url(background.png)
;
background
:
rgba
(
0
,
0
,
0
,
.7
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
50
,
50
,
50
,
.7
)),
to
(
rgba
(
0
,
0
,
0
,
.7
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
-o-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
linear-gradient
(
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
height
:
30px
;
width
:
100%
}
.mejs-container
.mejs-controls
div
{
list-style-type
:
none
;
background-image
:
none
;
display
:
block
;
float
:
left
;
margin
:
0
;
padding
:
0
;
width
:
26px
;
height
:
26px
;
font-size
:
11px
;
line-height
:
11px
;
font-family
:
Helvetica
,
Arial
;
border
:
0
}
.mejs-controls
.mejs-button
button
{
cursor
:
pointer
;
display
:
block
;
font-size
:
0
;
line-height
:
0
;
text-decoration
:
none
;
margin
:
7px
5px
;
padding
:
0
;
position
:
absolute
;
height
:
16px
;
width
:
16px
;
border
:
0
;
background
:
transparent
url(controls.svg)
no-repeat
}
.no-svg
.mejs-controls
.mejs-button
button
{
background-image
:
url(controls.png)
}
.mejs-controls
.mejs-button
button
:focus
{
outline
:
dotted
1px
#999
}
.mejs-container
.mejs-controls
.mejs-time
{
color
:
#fff
;
display
:
block
;
height
:
17px
;
width
:
auto
;
padding
:
10px
3px
0
;
overflow
:
hidden
;
text-align
:
center
;
-moz-box-sizing
:
content-box
;
-webkit-box-sizing
:
content-box
;
box-sizing
:
content-box
}
.mejs-container
.mejs-controls
.mejs-time
a
{
color
:
#fff
;
font-size
:
11px
;
line-height
:
12px
;
display
:
block
;
float
:
left
;
margin
:
1px
2px
0
0
;
width
:
auto
}
.mejs-controls
.mejs-play
button
{
background-position
:
0
0
}
.mejs-controls
.mejs-pause
button
{
background-position
:
0
-16px
}
.mejs-controls
.mejs-stop
button
{
background-position
:
-112px
0
}
.mejs-controls
div
.mejs-time-rail
{
direction
:
ltr
;
width
:
200px
;
padding-top
:
5px
}
.mejs-controls
.mejs-time-rail
span
,
.mejs-controls
.mejs-time-rail
a
{
display
:
block
;
position
:
absolute
;
width
:
180px
;
height
:
10px
;
-webkit-border-radius
:
2px
;
-moz-border-radius
:
2px
;
border-radius
:
2px
;
cursor
:
pointer
}
.mejs-controls
.mejs-time-rail
.mejs-time-total
{
margin
:
5px
;
background
:
#333
;
background
:
rgba
(
50
,
50
,
50
,
.8
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
30
,
30
,
30
,
.8
)),
to
(
rgba
(
60
,
60
,
60
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
-o-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
linear-gradient
(
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
))}
.mejs-controls
.mejs-time-rail
.mejs-time-buffering
{
width
:
100%
;
background-image
:
-o-linear-gradient
(
-45deg
,
rgba
(
255
,
255
,
255
,
.15
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
.15
)
50%
,
rgba
(
255
,
255
,
255
,
.15
)
75%
,
transparent
75%
,
transparent
);
background-image
:
-webkit-gradient
(
linear
,
0
100%
,
100%
0
,
color-stop
(
0.25
,
rgba
(
255
,
255
,
255
,
.15
)),
color-stop
(
0.25
,
transparent
),
color-stop
(
0.5
,
transparent
),
color-stop
(
0.5
,
rgba
(
255
,
255
,
255
,
.15
)),
color-stop
(
0.75
,
rgba
(
255
,
255
,
255
,
.15
)),
color-stop
(
0.75
,
transparent
),
to
(
transparent
));
background-image
:
-webkit-linear-gradient
(
-45deg
,
rgba
(
255
,
255
,
255
,
.15
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
.15
)
50%
,
rgba
(
255
,
255
,
255
,
.15
)
75%
,
transparent
75%
,
transparent
);
background-image
:
-moz-linear-gradient
(
-45deg
,
rgba
(
255
,
255
,
255
,
.15
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
.15
)
50%
,
rgba
(
255
,
255
,
255
,
.15
)
75%
,
transparent
75%
,
transparent
);
background-image
:
-ms-linear-gradient
(
-45deg
,
rgba
(
255
,
255
,
255
,
.15
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
.15
)
50%
,
rgba
(
255
,
255
,
255
,
.15
)
75%
,
transparent
75%
,
transparent
);
background-image
:
linear-gradient
(
-45deg
,
rgba
(
255
,
255
,
255
,
.15
)
25%
,
transparent
25%
,
transparent
50%
,
rgba
(
255
,
255
,
255
,
.15
)
50%
,
rgba
(
255
,
255
,
255
,
.15
)
75%
,
transparent
75%
,
transparent
);
-webkit-background-size
:
15px
15px
;
-moz-background-size
:
15px
15px
;
-o-background-size
:
15px
15px
;
background-size
:
15px
15px
;
-webkit-animation
:
buffering-stripes
2s
linear
infinite
;
-moz-animation
:
buffering-stripes
2s
linear
infinite
;
-ms-animation
:
buffering-stripes
2s
linear
infinite
;
-o-animation
:
buffering-stripes
2s
linear
infinite
;
animation
:
buffering-stripes
2s
linear
infinite
}
@-webkit-keyframes
buffering-stripes
{
from
{
background-position
:
0
0
}
to
{
background-position
:
30px
0
}}
@-moz-keyframes
buffering-stripes
{
from
{
background-position
:
0
0
}
to
{
background-position
:
30px
0
}}
@-ms-keyframes
buffering-stripes
{
from
{
background-position
:
0
0
}
to
{
background-position
:
30px
0
}}
@-o-keyframes
buffering-stripes
{
from
{
background-position
:
0
0
}
to
{
background-position
:
30px
0
}}
@keyframes
buffering-stripes
{
from
{
background-position
:
0
0
}
to
{
background-position
:
30px
0
}}
.mejs-controls
.mejs-time-rail
.mejs-time-loaded
{
background
:
#3caac8
;
background
:
rgba
(
60
,
170
,
200
,
.8
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
44
,
124
,
145
,
.8
)),
to
(
rgba
(
78
,
183
,
212
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
44
,
124
,
145
,
.8
),
rgba
(
78
,
183
,
212
,
.8
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
44
,
124
,
145
,
.8
),
rgba
(
78
,
183
,
212
,
.8
));
background
:
-o-linear-gradient
(
top
,
rgba
(
44
,
124
,
145
,
.8
),
rgba
(
78
,
183
,
212
,
.8
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
44
,
124
,
145
,
.8
),
rgba
(
78
,
183
,
212
,
.8
));
background
:
linear-gradient
(
rgba
(
44
,
124
,
145
,
.8
),
rgba
(
78
,
183
,
212
,
.8
));
width
:
0
}
.mejs-controls
.mejs-time-rail
.mejs-time-current
{
background
:
#fff
;
background
:
rgba
(
255
,
255
,
255
,
.8
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
255
,
255
,
255
,
.9
)),
to
(
rgba
(
200
,
200
,
200
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
-o-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
linear-gradient
(
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
width
:
0
}
.mejs-controls
.mejs-time-rail
.mejs-time-handle
{
display
:
none
;
position
:
absolute
;
margin
:
0
;
width
:
10px
;
background
:
#fff
;
-webkit-border-radius
:
5px
;
-moz-border-radius
:
5px
;
border-radius
:
5px
;
cursor
:
pointer
;
border
:
solid
2px
#333
;
top
:
-2px
;
text-align
:
center
}
.mejs-controls
.mejs-time-rail
.mejs-time-float
{
position
:
absolute
;
display
:
none
;
background
:
#eee
;
width
:
36px
;
height
:
17px
;
border
:
solid
1px
#333
;
top
:
-26px
;
margin-left
:
-18px
;
text-align
:
center
;
color
:
#111
}
.mejs-controls
.mejs-time-rail
.mejs-time-float-current
{
margin
:
2px
;
width
:
30px
;
display
:
block
;
text-align
:
center
;
left
:
0
}
.mejs-controls
.mejs-time-rail
.mejs-time-float-corner
{
position
:
absolute
;
display
:
block
;
width
:
0
;
height
:
0
;
line-height
:
0
;
border
:
solid
5px
#eee
;
border-color
:
#eee
transparent
transparent
;
-webkit-border-radius
:
0
;
-moz-border-radius
:
0
;
border-radius
:
0
;
top
:
15px
;
left
:
13px
}
.mejs-long-video
.mejs-controls
.mejs-time-rail
.mejs-time-float
{
width
:
48px
}
.mejs-long-video
.mejs-controls
.mejs-time-rail
.mejs-time-float-current
{
width
:
44px
}
.mejs-long-video
.mejs-controls
.mejs-time-rail
.mejs-time-float-corner
{
left
:
18px
}
.mejs-controls
.mejs-fullscreen-button
button
{
background-position
:
-32px
0
}
.mejs-controls
.mejs-unfullscreen
button
{
background-position
:
-32px
-16px
}
.mejs-controls
.mejs-volume-button
{}
.mejs-controls
.mejs-mute
button
{
background-position
:
-16px
-16px
}
.mejs-controls
.mejs-unmute
button
{
background-position
:
-16px
0
}
.mejs-controls
.mejs-volume-button
{
position
:
relative
}
.mejs-controls
.mejs-volume-button
.mejs-volume-slider
{
display
:
none
;
height
:
115px
;
width
:
25px
;
background
:
url(background.png)
;
background
:
rgba
(
50
,
50
,
50
,
.7
);
-webkit-border-radius
:
0
;
-moz-border-radius
:
0
;
border-radius
:
0
;
top
:
-115px
;
left
:
0
;
z-index
:
1
;
position
:
absolute
;
margin
:
0
}
.mejs-controls
.mejs-volume-button
:hover
{
-webkit-border-radius
:
0
0
4px
4px
;
-moz-border-radius
:
0
0
4px
4px
;
border-radius
:
0
0
4px
4px
}
.mejs-controls
.mejs-volume-button
.mejs-volume-slider
.mejs-volume-total
{
position
:
absolute
;
left
:
11px
;
top
:
8px
;
width
:
2px
;
height
:
100px
;
background
:
#ddd
;
background
:
rgba
(
255
,
255
,
255
,
.5
);
margin
:
0
}
.mejs-controls
.mejs-volume-button
.mejs-volume-slider
.mejs-volume-current
{
position
:
absolute
;
left
:
11px
;
top
:
8px
;
width
:
2px
;
height
:
100px
;
background
:
#ddd
;
background
:
rgba
(
255
,
255
,
255
,
.9
);
margin
:
0
}
.mejs-controls
.mejs-volume-button
.mejs-volume-slider
.mejs-volume-handle
{
position
:
absolute
;
left
:
4px
;
top
:
-3px
;
width
:
16px
;
height
:
6px
;
background
:
#ddd
;
background
:
rgba
(
255
,
255
,
255
,
.9
);
cursor
:
N-resize
;
-webkit-border-radius
:
1px
;
-moz-border-radius
:
1px
;
border-radius
:
1px
;
margin
:
0
}
.mejs-controls
a
.mejs-horizontal-volume-slider
{
height
:
26px
;
width
:
56px
;
position
:
relative
;
display
:
block
;
float
:
left
;
vertical-align
:
middle
}
.mejs-controls
.mejs-horizontal-volume-slider
.mejs-horizontal-volume-total
{
position
:
absolute
;
left
:
0
;
top
:
11px
;
width
:
50px
;
height
:
8px
;
margin
:
0
;
padding
:
0
;
font-size
:
1px
;
-webkit-border-radius
:
2px
;
-moz-border-radius
:
2px
;
border-radius
:
2px
;
background
:
#333
;
background
:
rgba
(
50
,
50
,
50
,
.8
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
30
,
30
,
30
,
.8
)),
to
(
rgba
(
60
,
60
,
60
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
-o-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
));
background
:
linear-gradient
(
rgba
(
30
,
30
,
30
,
.8
),
rgba
(
60
,
60
,
60
,
.8
))}
.mejs-controls
.mejs-horizontal-volume-slider
.mejs-horizontal-volume-current
{
position
:
absolute
;
left
:
0
;
top
:
11px
;
width
:
50px
;
height
:
8px
;
margin
:
0
;
padding
:
0
;
font-size
:
1px
;
-webkit-border-radius
:
2px
;
-moz-border-radius
:
2px
;
border-radius
:
2px
;
background
:
#fff
;
background
:
rgba
(
255
,
255
,
255
,
.8
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
255
,
255
,
255
,
.9
)),
to
(
rgba
(
200
,
200
,
200
,
.8
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
-o-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
));
background
:
linear-gradient
(
rgba
(
255
,
255
,
255
,
.9
),
rgba
(
200
,
200
,
200
,
.8
))}
.mejs-controls
.mejs-horizontal-volume-slider
.mejs-horizontal-volume-handle
{
display
:
none
}
.mejs-controls
.mejs-captions-button
{
position
:
relative
}
.mejs-controls
.mejs-captions-button
button
{
background-position
:
-48px
0
}
.mejs-controls
.mejs-captions-button
.mejs-captions-selector
{
visibility
:
hidden
;
position
:
absolute
;
bottom
:
26px
;
right
:
-51px
;
width
:
85px
;
height
:
100px
;
background
:
url(background.png)
;
background
:
rgba
(
50
,
50
,
50
,
.7
);
border
:
solid
1px
transparent
;
padding
:
10px
10px
0
;
overflow
:
hidden
;
-webkit-border-radius
:
0
;
-moz-border-radius
:
0
;
border-radius
:
0
}
.mejs-controls
.mejs-captions-button
:hover
.mejs-captions-selector
{
visibility
:
visible
}
.mejs-controls
.mejs-captions-button
.mejs-captions-selector
ul
{
margin
:
0
;
padding
:
0
;
display
:
block
;
list-style-type
:
none
!important
;
overflow
:
hidden
}
.mejs-controls
.mejs-captions-button
.mejs-captions-selector
ul
li
{
margin
:
0
0
6px
;
padding
:
0
;
list-style-type
:
none
!important
;
display
:
block
;
color
:
#fff
;
overflow
:
hidden
}
.mejs-controls
.mejs-captions-button
.mejs-captions-selector
ul
li
input
{
clear
:
both
;
float
:
left
;
margin
:
3px
3px
0
5px
}
.mejs-controls
.mejs-captions-button
.mejs-captions-selector
ul
li
label
{
width
:
55px
;
float
:
left
;
padding
:
4px
0
0
;
line-height
:
15px
;
font-family
:
helvetica
,
arial
;
font-size
:
10px
}
.mejs-controls
.mejs-captions-button
.mejs-captions-translations
{
font-size
:
10px
;
margin
:
0
0
5px
}
.mejs-chapters
{
position
:
absolute
;
top
:
0
;
left
:
0
;
-xborder-right
:
solid
1px
#fff
;
width
:
10000px
;
z-index
:
1
}
.mejs-chapters
.mejs-chapter
{
position
:
absolute
;
float
:
left
;
background
:
#222
;
background
:
rgba
(
0
,
0
,
0
,
.7
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
50
,
50
,
50
,
.7
)),
to
(
rgba
(
0
,
0
,
0
,
.7
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
-o-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
background
:
linear-gradient
(
rgba
(
50
,
50
,
50
,
.7
),
rgba
(
0
,
0
,
0
,
.7
));
filter
:
progid
:
DXImageTransform
.
Microsoft
.
Gradient
(
GradientType
=
0
,
startColorstr
=
#323232
,
endColorstr
=
#000000
);
overflow
:
hidden
;
border
:
0
}
.mejs-chapters
.mejs-chapter
.mejs-chapter-block
{
font-size
:
11px
;
color
:
#fff
;
padding
:
5px
;
display
:
block
;
border-right
:
solid
1px
#333
;
border-bottom
:
solid
1px
#333
;
cursor
:
pointer
}
.mejs-chapters
.mejs-chapter
.mejs-chapter-block-last
{
border-right
:
0
}
.mejs-chapters
.mejs-chapter
.mejs-chapter-block
:hover
{
background
:
#666
;
background
:
rgba
(
102
,
102
,
102
,
.7
);
background
:
-webkit-gradient
(
linear
,
0
0
,
0
100%
,
from
(
rgba
(
102
,
102
,
102
,
.7
)),
to
(
rgba
(
50
,
50
,
50
,
.6
)));
background
:
-webkit-linear-gradient
(
top
,
rgba
(
102
,
102
,
102
,
.7
),
rgba
(
50
,
50
,
50
,
.6
));
background
:
-moz-linear-gradient
(
top
,
rgba
(
102
,
102
,
102
,
.7
),
rgba
(
50
,
50
,
50
,
.6
));
background
:
-o-linear-gradient
(
top
,
rgba
(
102
,
102
,
102
,
.7
),
rgba
(
50
,
50
,
50
,
.6
));
background
:
-ms-linear-gradient
(
top
,
rgba
(
102
,
102
,
102
,
.7
),
rgba
(
50
,
50
,
50
,
.6
));
background
:
linear-gradient
(
rgba
(
102
,
102
,
102
,
.7
),
rgba
(
50
,
50
,
50
,
.6
));
filter
:
progid
:
DXImageTransform
.
Microsoft
.
Gradient
(
GradientType
=
0
,
startColorstr
=
#666666
,
endColorstr
=
#323232
)}
.mejs-chapters
.mejs-chapter
.mejs-chapter-block
.ch-title
{
font-size
:
12px
;
font-weight
:
700
;
display
:
block
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
margin
:
0
0
3px
;
line-height
:
12px
}
.mejs-chapters
.mejs-chapter
.mejs-chapter-block
.ch-timespan
{
font-size
:
12px
;
line-height
:
12px
;
margin
:
3px
0
4px
;
display
:
block
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.mejs-captions-layer
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
text-align
:
center
;
line-height
:
20px
;
font-size
:
16px
;
color
:
#fff
}
.mejs-captions-layer
a
{
color
:
#fff
;
text-decoration
:
underline
}
.mejs-captions-layer
[
lang
=
ar
]
{
font-size
:
20px
;
font-weight
:
400
}
.mejs-captions-position
{
position
:
absolute
;
width
:
100%
;
bottom
:
15px
;
left
:
0
}
.mejs-captions-position-hover
{
bottom
:
35px
}
.mejs-captions-text
{
padding
:
3px
5px
;
background
:
url(background.png)
;
background
:
rgba
(
20
,
20
,
20
,
.5
);
white-space
:
pre-wrap
}
.me-cannotplay
{}
.me-cannotplay
a
{
color
:
#fff
;
font-weight
:
700
}
.me-cannotplay
span
{
padding
:
15px
;
display
:
block
}
.mejs-controls
.mejs-loop-off
button
{
background-position
:
-64px
-16px
}
.mejs-controls
.mejs-loop-on
button
{
background-position
:
-64px
0
}
.mejs-controls
.mejs-backlight-off
button
{
background-position
:
-80px
-16px
}
.mejs-controls
.mejs-backlight-on
button
{
background-position
:
-80px
0
}
.mejs-controls
.mejs-picturecontrols-button
{
background-position
:
-96px
0
}
.mejs-contextmenu
{
position
:
absolute
;
width
:
150px
;
padding
:
10px
;
border-radius
:
4px
;
top
:
0
;
left
:
0
;
background
:
#fff
;
border
:
solid
1px
#999
;
z-index
:
1001
}
.mejs-contextmenu
.mejs-contextmenu-separator
{
height
:
1px
;
font-size
:
0
;
margin
:
5px
6px
;
background
:
#333
}
.mejs-contextmenu
.mejs-contextmenu-item
{
font-family
:
Helvetica
,
Arial
;
font-size
:
12px
;
padding
:
4px
6px
;
cursor
:
pointer
;
color
:
#333
}
.mejs-contextmenu
.mejs-contextmenu-item
:hover
{
background
:
#2C7C91
;
color
:
#fff
}
.mejs-controls
.mejs-sourcechooser-button
{
position
:
relative
}
.mejs-controls
.mejs-sourcechooser-button
button
{
background-position
:
-128px
0
}
.mejs-controls
.mejs-sourcechooser-button
.mejs-sourcechooser-selector
{
visibility
:
hidden
;
position
:
absolute
;
bottom
:
26px
;
right
:
-10px
;
width
:
130px
;
height
:
100px
;
background
:
url(background.png)
;
background
:
rgba
(
50
,
50
,
50
,
.7
);
border
:
solid
1px
transparent
;
padding
:
10px
;
overflow
:
hidden
;
-webkit-border-radius
:
0
;
-moz-border-radius
:
0
;
border-radius
:
0
}
.mejs-controls
.mejs-sourcechooser-button
.mejs-sourcechooser-selector
ul
{
margin
:
0
;
padding
:
0
;
display
:
block
;
list-style-type
:
none
!important
;
overflow
:
hidden
}
.mejs-controls
.mejs-sourcechooser-button
.mejs-sourcechooser-selector
ul
li
{
margin
:
0
0
6px
;
padding
:
0
;
list-style-type
:
none
!important
;
display
:
block
;
color
:
#fff
;
overflow
:
hidden
}
.mejs-controls
.mejs-sourcechooser-button
.mejs-sourcechooser-selector
ul
li
input
{
clear
:
both
;
float
:
left
;
margin
:
3px
3px
0
5px
}
.mejs-controls
.mejs-sourcechooser-button
.mejs-sourcechooser-selector
ul
li
label
{
width
:
100px
;
float
:
left
;
padding
:
4px
0
0
;
line-height
:
15px
;
font-family
:
helvetica
,
arial
;
font-size
:
10px
}
.mejs-postroll-layer
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
background
:
url(background.png)
;
background
:
rgba
(
50
,
50
,
50
,
.7
);
z-index
:
1000
;
overflow
:
hidden
}
.mejs-postroll-layer-content
{
width
:
100%
;
height
:
100%
}
.mejs-postroll-close
{
position
:
absolute
;
right
:
0
;
top
:
0
;
background
:
url(background.png)
;
background
:
rgba
(
50
,
50
,
50
,
.7
);
color
:
#fff
;
padding
:
4px
;
z-index
:
100
;
cursor
:
pointer
}
div
.mejs-speed-button
{
width
:
46px
!important
;
position
:
relative
}
.mejs-controls
.mejs-button.mejs-speed-button
button
{
background
:
transparent
;
width
:
36px
;
font-size
:
11px
;
line-height
:
normal
;
color
:
#fff
}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
{
display
:
none
;
position
:
absolute
;
top
:
-100px
;
left
:
-10px
;
width
:
60px
;
height
:
100px
;
background
:
url(background.png)
;
background
:
rgba
(
50
,
50
,
50
,
.7
);
border
:
solid
1px
transparent
;
padding
:
0
;
overflow
:
hidden
;
-webkit-border-radius
:
0
;
-moz-border-radius
:
0
;
border-radius
:
0
}
.mejs-controls
.mejs-speed-button
:hover
>
.mejs-speed-selector
{
display
:
block
}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
ul
li
label
.mejs-speed-selected
{
color
:
rgba
(
33
,
248
,
248
,
1
)}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
ul
{
margin
:
0
;
padding
:
0
;
display
:
block
;
list-style-type
:
none
!important
;
overflow
:
hidden
}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
ul
li
{
margin
:
0
0
6px
;
padding
:
0
10px
;
list-style-type
:
none
!important
;
display
:
block
;
color
:
#fff
;
overflow
:
hidden
}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
ul
li
input
{
clear
:
both
;
float
:
left
;
margin
:
3px
3px
0
5px
;
display
:
none
}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
ul
li
label
{
width
:
60px
;
float
:
left
;
padding
:
4px
0
0
;
line-height
:
15px
;
font-family
:
helvetica
,
arial
;
font-size
:
11.5px
;
color
:
#fff
;
margin-left
:
5px
;
cursor
:
pointer
}
.mejs-controls
.mejs-speed-button
.mejs-speed-selector
ul
li
:hover
{
background-color
:
#c8c8c8
!important
;
background-color
:
rgba
(
255
,
255
,
255
,
.4
)
!important
}
.mejs-controls
.mejs-button.mejs-jump-forward-button
{
background
:
transparent
url(jumpforward.png)
no-repeat
;
background-position
:
3px
3px
}
.mejs-controls
.mejs-button.mejs-jump-forward-button
button
{
background
:
transparent
;
font-size
:
9px
;
line-height
:
normal
;
color
:
#fff
}
.mejs-controls
.mejs-button.mejs-skip-back-button
{
background
:
transparent
url(skipback.png)
no-repeat
;
background-position
:
3px
3px
}
.mejs-controls
.mejs-button.mejs-skip-back-button
button
{
background
:
transparent
;
font-size
:
9px
;
line-height
:
normal
;
color
:
#fff
}
\ No newline at end of file
static/mediaelementjs/mediaelementplayer.min.js
0 → 100644
View file @
2c869df7
This diff is collapsed.
Click to expand it.
static/mediaelementjs/mejs-skins.css
0 → 100644
View file @
2c869df7
/* TED player */
.mejs-container.mejs-ted
{
}
.mejs-ted
.mejs-controls
{
background
:
#eee
;
height
:
65px
;
}
.mejs-ted
.mejs-button
,
.mejs-ted
.mejs-time
{
position
:
absolute
;
background
:
#ddd
;
}
.mejs-ted
.mejs-controls
.mejs-time-rail
.mejs-time-total
{
background-color
:
none
;
background
:
url(controls-ted.png)
repeat-x
0
-52px
;
height
:
6px
;
}
.mejs-ted
.mejs-controls
.mejs-time-rail
.mejs-time-buffering
{
height
:
6px
;
}
.mejs-ted
.mejs-controls
.mejs-time-rail
.mejs-time-loaded
{
background-color
:
none
;
background
:
url(controls-ted.png)
repeat-x
0
-52px
;
width
:
0
;
height
:
6px
;
}
.mejs-ted
.mejs-controls
.mejs-time-rail
.mejs-time-current
{
width
:
0
;
height
:
6px
;
background-color
:
none
;
background
:
url(controls-ted.png)
repeat-x
0
-59px
;
}
.mejs-ted
.mejs-controls
.mejs-time-rail
.mejs-time-handle
{
display
:
block
;
margin
:
0
;
width
:
14px
;
height
:
21px
;
top
:
-7px
;
border
:
0
;
background
:
url(controls-ted.png)
no-repeat
0
0
;
}
.mejs-ted
.mejs-controls
.mejs-time-rail
.mejs-time-float
{
display
:
none
;
}
.mejs-ted
.mejs-controls
.mejs-playpause-button
{
top
:
29px
;
left
:
9px
;
width
:
49px
;
height
:
28px
;
}
.mejs-ted
.mejs-controls
.mejs-playpause-button
button
{
width
:
49px
;
height
:
28px
;
background
:
url(controls-ted.png)
no-repeat
-50px
-23px
;
margin
:
0
;
padding
:
0
;
}
.mejs-ted
.mejs-controls
.mejs-pause
button
{
background-position
:
0
-23px
;
}
.mejs-ted
.mejs-controls
.mejs-fullscreen-button
{
top
:
34px
;
right
:
9px
;
width
:
17px
;
height
:
15px
;
background
:
none
;
}
.mejs-ted
.mejs-controls
.mejs-fullscreen-button
button
{
width
:
19px
;
height
:
17px
;
background
:
transparent
url(controls-ted.png)
no-repeat
0
-66px
;
margin
:
0
;
padding
:
0
;
}
.mejs-ted
.mejs-controls
.mejs-unfullscreen
button
{
background
:
transparent
url(controls-ted.png)
no-repeat
-21px
-66px
;
margin
:
0
;
padding
:
0
;
}
.mejs-ted
.mejs-controls
.mejs-volume-button
{
top
:
30px
;
right
:
35px
;
width
:
24px
;
height
:
22px
;
}
.mejs-ted
.mejs-controls
.mejs-mute
button
{
background
:
url(controls-ted.png)
no-repeat
-15px
0
;
width
:
24px
;
height
:
22px
;
margin
:
0
;
padding
:
0
;
}
.mejs-ted
.mejs-controls
.mejs-unmute
button
{
background
:
url(controls-ted.png)
no-repeat
-40px
0
;
width
:
24px
;
height
:
22px
;
margin
:
0
;
padding
:
0
;
}
.mejs-ted
.mejs-controls
.mejs-volume-button
.mejs-volume-slider
{
background
:
#fff
;
border
:
solid
1px
#aaa
;
border-width
:
1px
1px
0
1px
;
width
:
22px
;
height
:
65px
;
top
:
-65px
;
}
.mejs-ted
.mejs-controls
.mejs-volume-button
.mejs-volume-total
{
background
:
url(controls-ted.png)
repeat-y
-41px
-66px
;
left
:
8px
;
width
:
6px
;
height
:
50px
;
}
.mejs-ted
.mejs-controls
.mejs-volume-button
.mejs-volume-current
{
left
:
8px
;
width
:
6px
;
background
:
url(controls-ted.png)
repeat-y
-48px
-66px
;
height
:
50px
;
}
.mejs-ted
.mejs-controls
.mejs-volume-button
.mejs-volume-handle
{
display
:
none
;
}
.mejs-ted
.mejs-controls
.mejs-time
span
{
color
:
#333
;
}
.mejs-ted
.mejs-controls
.mejs-currenttime-container
{
position
:
absolute
;
top
:
32px
;
right
:
100px
;
border
:
solid
1px
#999
;
background
:
#fff
;
color
:
#333
;
padding-top
:
2px
;
border-radius
:
3px
;
color
:
#333
;
}
.mejs-ted
.mejs-controls
.mejs-duration-container
{
position
:
absolute
;
top
:
32px
;
right
:
65px
;
border
:
solid
1px
#999
;
background
:
#fff
;
color
:
#333
;
padding-top
:
2px
;
border-radius
:
3px
;
color
:
#333
;
}
.mejs-ted
.mejs-controls
.mejs-time
button
{
color
:
#333
;
}
.mejs-ted
.mejs-controls
.mejs-captions-button
{
display
:
none
;
}
/* END: TED player */
/* WMP player */
.mejs-container.mejs-wmp
{
}
.mejs-wmp
.mejs-controls
{
background
:
transparent
url(controls-wmp-bg.png)
center
16px
no-repeat
;
height
:
65px
;
}
.mejs-wmp
.mejs-button
,
.mejs-wmp
.mejs-time
{
position
:
absolute
;
background
:
transparent
;
}
.mejs-wmp
.mejs-controls
.mejs-time-rail
.mejs-time-total
{
background-color
:
transparent
;
border
:
solid
1px
#ccc
;
height
:
3px
;
}
.mejs-wmp
.mejs-controls
.mejs-time-rail
.mejs-time-buffering
{
height
:
3px
;
}
.mejs-wmp
.mejs-controls
.mejs-time-rail
.mejs-time-loaded
{
background-color
:
rgba
(
255
,
255
,
255
,
0.3
);
width
:
0
;
height
:
3px
;
}
.mejs-wmp
.mejs-controls
.mejs-time-rail
.mejs-time-current
{
width
:
0
;
height
:
1px
;
background-color
:
#014CB6
;
border
:
solid
1px
#7FC9FA
;
border-width
:
1px
0
;
border-color
:
#7FC9FA
#fff
#619FF2
#fff
;
}
.mejs-wmp
.mejs-controls
.mejs-time-rail
.mejs-time-handle
{
display
:
block
;
margin
:
0
;
width
:
16px
;
height
:
9px
;
top
:
-3px
;
border
:
0
;
background
:
url(controls-wmp.png)
no-repeat
0
-80px
;
}
.mejs-wmp
.mejs-controls
.mejs-time-rail
.mejs-time-float
{
display
:
none
;
}
.mejs-wmp
.mejs-controls
.mejs-playpause-button
{
top
:
10px
;
left
:
50%
;
margin
:
10px
0
0
-20px
;
width
:
40px
;
height
:
40px
;
}
.mejs-wmp
.mejs-controls
.mejs-playpause-button
button
{
width
:
40px
;
height
:
40px
;
background
:
url(controls-wmp.png)
no-repeat
0
0
;
margin
:
0
;
padding
:
0
;
}
.mejs-wmp
.mejs-controls
.mejs-pause
button
{
background-position
:
0
-40px
;
}
.mejs-wmp
.mejs-controls
.mejs-currenttime-container
{
position
:
absolute
;
top
:
25px
;
left
:
50%
;
margin-left
:
-93px
;
}
.mejs-wmp
.mejs-controls
.mejs-duration-container
{
position
:
absolute
;
top
:
25px
;
left
:
50%
;
margin-left
:
-58px
;
}
.mejs-wmp
.mejs-controls
.mejs-volume-button
{
top
:
32px
;
right
:
50%
;
margin-right
:
-55px
;
width
:
20px
;
height
:
15px
;
}
.mejs-wmp
.mejs-controls
.mejs-volume-button
button
{
margin
:
0
;
padding
:
0
;
background
:
url(controls-wmp.png)
no-repeat
-42px
-17px
;
width
:
20px
;
height
:
15px
;
}
.mejs-wmp
.mejs-controls
.mejs-unmute
button
{
margin
:
0
;
padding
:
0
;
background
:
url(controls-wmp.png)
no-repeat
-42px
0
;
width
:
20px
;
height
:
15px
;
}
.mejs-wmp
.mejs-controls
.mejs-volume-button
.mejs-volume-slider
{
background
:
rgba
(
102
,
102
,
102
,
0.6
);
}
.mejs-wmp
.mejs-controls
.mejs-fullscreen-button
{
top
:
32px
;
right
:
50%
;
margin-right
:
-82px
;
width
:
15px
;
height
:
14px
;
}
.mejs-wmp
.mejs-controls
.mejs-fullscreen-button
button
{
margin
:
0
;
padding
:
0
;
background
:
url(controls-wmp.png)
no-repeat
-63px
0
;
width
:
15px
;
height
:
14px
;
}
.mejs-wmp
.mejs-controls
.mejs-captions-button
{
display
:
none
;
}
/* END: WMP player */
static/mediaelementjs/silverlightmediaelement.xap
0 → 100755
View file @
2c869df7
File added
static/mediaelementjs/skipback.png
0 → 100644
View file @
2c869df7
4.15 KB
static/style.css
View file @
2c869df7
.videopreview
li
:nth-child
(
odd
)
{
background
:
#f5f5f5
;
}
.mejs-container
{
height
:
80%
!important
;
width
:
100%
!important
;
position
:
fixed
!important
;
}
templates/macros.html
View file @
2c869df7
{% macro preview(lecture) %}
<li
class=
"list-group-item"
>
<div
class=
"row"
>
<a
href=
"
?view=player&
lectureid={{ lecture['id'] }}
#content
"
title=
"{{ lecture['coursetitle'] }}"
>
<a
href=
"
/play?
lectureid={{ lecture['id'] }}"
title=
"{{ lecture['coursetitle'] }}"
>
<img
class=
"col-xs-4"
src=
"https://videoag.fsmpi.rwth-aachen.de/{{ lecture['titlefile'] }}"
alt=
"Vorschaubild"
>
<div
class=
"col-xs-4"
>
<span
style=
"color: #000;"
><strong>
{{ lecture['short'] }}
</strong></span><br>
...
...
@@ -18,4 +19,12 @@
</div>
</li>
{% endmacro %}:
{% endmacro %}
{% macro player() %}
<script
src=
"static/mediaelementjs/mediaelement-and-player.min.js"
></script>
<link
rel=
"stylesheet"
href=
"static/mediaelementjs/mediaelementplayer.css"
/>
<video
class=
"mejs-player"
width=
"640"
height=
"360"
style=
"width: 100%; height: 80%;"
>
<source
type=
"video/mp4"
src=
"https://videoag.fsmpi.rwth-aachen.de/pub/16ss-dsal/16ss-dsal-160715-720p_1.mp4"
/>
</video>
{% endmacro %}
templates/play.html
0 → 100644
View file @
2c869df7
{% from 'macros.html' import player %}
{% extends "base.html" %}
{% block content %}
<div>
{{ player() }}
</div>
{% endblock %}
Prev
1
2
Next
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
