Skip to content

GitLab

Commit 30a47e6f authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files
Options

integrated new rewritten videre video player

parent b5e78b7c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 342 deletions
css/videre.css 0 → 100644
View file @ 30a47e6f
body *, * {
padding: 0;
margin: 0;
outline: none;
box-sizing: border-box;
font-family: "Proxima Nova"; }
.flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex; }
.justify-center {
justify-content: center; }
.align-center {
-ms-align-items: center;
align-items: center; }
.align-end {
-ms-align-items: flex-end;
align-items: flex-end; }
button {
background-color: transparent;
border: none;
cursor: pointer; }
/* components end */
.vid-wrapper {
position: relative;
cursor: none; }
.vid-wrapper.is-fullscreen .vid-toggle-layer {
z-index: 999999999998; }
.vid-wrapper.is-fullscreen .vid-controls-bottom, .vid-wrapper.is-fullscreen .vid-shadow-layer, .vid-wrapper.is-fullscreen .vid-info-layer, .vid-wrapper.is-fullscreen .vid-quality-selector {
z-index: 999999999999; }
.vid-wrapper.is-fullscreen .vid-bottom-progress-bar {
z-index: 999999999999;
opacity: 0.2; }
.vid-wrapper.mouse-entered, .vid-wrapper.paused {
cursor: default; }
.vid-wrapper.mouse-entered .vid-bottom-progress-bar, .vid-wrapper.paused .vid-bottom-progress-bar {
opacity: 0; }
.vid-wrapper.mouse-entered .vid-controls-bottom, .vid-wrapper.paused .vid-controls-bottom {
opacity: 1; }
.vid-wrapper.mouse-entered .vid-shadow-layer, .vid-wrapper.paused .vid-shadow-layer {
opacity: 0.8; }
.vid-wrapper.mouse-entered .vid-info-layer .vid-info-wrapper h1, .vid-wrapper.mouse-entered .vid-info-layer .vid-info-wrapper p, .vid-wrapper.mouse-entered .vid-info-layer .vid-info-wrapper h2, .vid-wrapper.paused .vid-info-layer .vid-info-wrapper h1, .vid-wrapper.paused .vid-info-layer .vid-info-wrapper p, .vid-wrapper.paused .vid-info-layer .vid-info-wrapper h2 {
opacity: 1; }
.vid-wrapper.mouse-entered .vid-quality-selector, .vid-wrapper.paused .vid-quality-selector {
opacity: 1;
visibility: hidden; }
.vid-wrapper .vid-html5 {
position: relative;
z-index: 1; }
.vid-wrapper .vid-html5 video {
display: block;
background-color: black; }
.vid-wrapper .vid-controls-bottom {
z-index: 2;
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
height: 60px;
opacity: 0;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-controls-wrapper {
margin: 0 -20px;
width: 100%; }
.vid-wrapper .vid-toggle-layer, .vid-wrapper .vid-shadow-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; }
.vid-wrapper .vid-bottom-progress-bar {
position: absolute;
width: 100%;
height: 2px;
z-index: 2;
bottom: 0;
left: 0;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-bottom-progress-bar .progress-bg, .vid-wrapper .vid-bottom-progress-bar .progress-fg {
height: 100%;
position: absolute;
top: 0;
left: 0; }
.vid-wrapper .vid-bottom-progress-bar .progress-bg {
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
z-index: 1; }
.vid-wrapper .vid-bottom-progress-bar .progress-fg {
width: 0%;
background-color: white; }
.vid-wrapper .vid-info-layer {
position: absolute;
bottom: 80px;
left: 0;
z-index: 3;
width: 100%; }
.vid-wrapper .vid-info-layer .vid-info-wrapper {
width: 90%;
margin: 0 auto;
padding: 0 20px; }
.vid-wrapper .vid-info-layer .vid-info-wrapper h1 {
color: white;
opacity: 0;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-info-layer .vid-info-wrapper h2 {
color: white;
opacity: 0;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-info-layer .vid-info-wrapper p {
color: rgba(255, 255, 255, 0.6);
opacity: 0;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-info-layer .vid-info-wrapper .view-count {
margin-left: auto; }
.vid-wrapper .vid-shadow-layer {
pointer-events: none;
z-index: 2;
opacity: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100 */
background: transparent;
background: -moz-linear-gradient(top, transparent 50%, #000000 90%);
background: -webkit-linear-gradient(top, transparent 50%, #000000 90%);
background: linear-gradient(to bottom, transparent 50%, #000000 90%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#000000',GradientType=0 );
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-quality-selector {
position: absolute;
top: 40%;
right: 30px;
z-index: 3;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-quality-selector button {
background-color: rgba(34, 34, 34, 0.5);
padding: 13px 20px;
font-weight: 700;
font-size: 16px;
color: white; }
.vid-wrapper .vid-quality-selector button.active {
background-color: white;
color: #222; }
.vid-wrapper .vid-controls-contents {
width: 90%;
margin: 0 auto; }
.vid-wrapper .vid-controls-contents span {
margin: 0 10px;
font-size: 13px;
min-width: 45px;
display: flex;
justify-content: center;
color: rgba(255, 255, 255, 0.7); }
.vid-wrapper .vid-controls-contents button {
color: rgba(255, 255, 255, 0.7);
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
.vid-wrapper .vid-controls-contents button:hover {
color: white; }
.vid-wrapper .vid-controls-contents button i {
font-size: 28px; }
.vid-wrapper .vid-controls-contents .vid-progress {
position: relative;
width: 100%;
height: 5px;
margin: 0 20px;
margin-top: -2px;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
cursor: pointer; }
.vid-wrapper .vid-controls-contents .vid-progress:hover {
height: 13px; }
.vid-wrapper .vid-controls-contents .vid-progress .progress-bg, .vid-wrapper .vid-controls-contents .vid-progress .progress-fg, .vid-wrapper .vid-controls-contents .vid-progress .progress-loaded {
height: 100%;
position: absolute;
top: 0;
left: 0; }
.vid-wrapper .vid-controls-contents .vid-progress .progress-bg {
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
z-index: 1; }
.vid-wrapper .vid-controls-contents .vid-progress .progress-loaded {
pointer-events: none;
width: 0%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 2; }
.vid-wrapper .vid-controls-contents .vid-progress .progress-fg {
width: 0%;
background-color: white; }
.vid-wrapper .vid-controls-contents .vid-progress .progress-hovertime {
position: absolute;
top: -35px;
padding: 5px 10px;
font-size: 12px;
transform: translateX(-50%);
color: white;
background-color: #333;
opacity: 0;
pointer-events: none; }
.vid-wrapper .vid-controls-contents .vid-progress .progress-hovertime.hover {
opacity: 1;
pointer-events: auto; }
.vid-wrapper .vid-controls-contents .item {
padding: 0 10px;
margin: 0 10px; }
.vid-wrapper .vid-volume-control {
min-width: 45px; }
.vid-wrapper .vid-volume-slider {
width: 0;
height: 5px;
margin-top: -2px;
background-color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
transform-origin: left; }
.vid-wrapper .vid-volume-slider .ui-slider-range {
height: 100%;
background-color: white; }
video::-webkit-media-controls {
display: none !important; }
video {
object-fit: cover;
}
/*# sourceMappingURL=videre.css.map */
index.html
View file @ 30a47e6f
......@@ -8,9 +8,12 @@
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/overview.css">
<link rel="stylesheet" type="text/css" href="css/mapbox-gl-0.43.0.css">
<link rel="stylesheet" type="text/css" href="tests/css/videre.css">
<link rel="stylesheet" type="text/css" href="css/videre.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/videre.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
......@@ -31,6 +34,39 @@
</map>
<content>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/oceans.mp4" id="html-player" style="width: 100%;" poster="images/video1_poster.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
<div class="vid-controls-bottom flex align-center justify-center">
<div class="vid-controls-wrapper">
<div class="vid-controls-contents flex align-center justify-center">
<button class="vid-play-btn item"><i class="ion-ios-play flex align-center"></i></button>
<div class="vid-volume-container flex align-center">
<button class="vid-volume-control item"><i class="ion-android-volume-up flex align-center"></i></button>
<div id="vol-control" class="vid-volume-slider"></div>
</div>
<span class="vid-current-time"></span>
<div class="vid-progress">
<div class="progress-bg"></div>
<div class="progress-loaded"></div>
<div class="progress-fg"></div>
<div class="progress-hovertime"></div>
</div>
<span class="vid-duration"></span>
<button class="vid-request-fullscreen item"><i class="ion-android-expand flex align-center"></i></button>
</div>
</div>
</div>
<div class="vid-bottom-progress-bar">
<div class="progress-fg"></div>
</div>
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p>
......@@ -47,11 +83,15 @@
</div>
<script src='js/mapbox-gl-0.43.0.js'></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="tests/js/videre.js"></script>
<script src="js/map.js"></script>
<script src="js/main.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#player').videre();
});
</script>
</body>
</html>
js/map.js
View file @ 30a47e6f
......@@ -8,7 +8,7 @@ var bounds = [
mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
style: 'mapbox://styles/mapbox/light-v9',
center: [8.404, 49.0150],
zoom: 14,
pitch: 0,
......
tests/js/videre.js → js/videre.js
View file @ 30a47e6f
......@@ -86,7 +86,6 @@ if (typeof Object.create !== "function") {
var base = this;
$('.vid-play-btn').unbind().click(function(){
console.log('clicked')
base.togglePlay();
});
......@@ -173,8 +172,8 @@ if (typeof Object.create !== "function") {
} else {
element.find('i').removeClass().addClass('ion-android-volume-up flex align-center');
}
media.volume = base.options.audio.volume / 100;
$('#vol-control').slider({value: base.options.audio.volume});
media.volume = 50 / 100;
$('#vol-control').slider({value: 50});
}
},
......@@ -186,12 +185,11 @@ if (typeof Object.create !== "function") {
$('#vol-control').slider({
min: 0,
max: 100,
value: media.volume === 0 ? 0 : base.options.audio.volume,
value: media.volume === 0 ? 0 : 50,
range: "min",
animate: false,
slide: function(event, ui) {
media.volume = ui.value / 100;
base.options.audio.volume = ui.value;
if ( ui.value >= 50) {
$('.vid-volume-control i').removeClass().addClass('ion-android-volume-up flex align-center');
currentVolumeIcon = 'ion-android-volume-up flex align-center';
......@@ -312,14 +310,5 @@ if (typeof Object.create !== "function") {
return Video.init(options, $(this[0]));
};
// default options
$.fn.videre.options = {
currentTime: null,
audio: {
volume: 50
},
bottomProgressBar: true
};
}(jQuery, window, document));
tests/css/app.css deleted 100644 → 0
View file @ b5e78b7c
#player {
width: 100%;
}
tests/css/videre.css
View file @ 30a47e6f
......@@ -31,7 +31,6 @@ button {
/* components end */
.vid-wrapper {
position: relative;
height: 100%;
cursor: none; }
.vid-wrapper.is-fullscreen .vid-toggle-layer {
z-index: 999999999998; }
......@@ -230,4 +229,8 @@ button {
video::-webkit-media-controls {
display: none !important; }
video {
object-fit: cover;
}
/*# sourceMappingURL=videre.css.map */
tests/css/videre.css.map deleted 100644 → 0
View file @ b5e78b7c
{
"version": 3,
"mappings": "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",
"sources": ["videre.sass"],
"names": [],
"file": "videre.css"
}
tests/css/videre.sass deleted 100644 → 0
View file @ b5e78b7c
$transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
body *, *
padding: 0
margin: 0
outline: none
box-sizing: border-box
font-family: 'Proxima Nova'
.flex
display: -webkit-flex
display: -moz-flex
display: -ms-flex
display: -o-flex
display: flex
.justify-center
justify-content: center
.align-center
-ms-align-items: center
align-items: center
.align-end
-ms-align-items: flex-end
align-items: flex-end
button
background-color: transparent
border: none
cursor: pointer
/* components end */
.vid-wrapper
position: relative
height: 100%
cursor: none
&.is-fullscreen
.vid-toggle-layer
z-index: 999999999998
.vid-controls-bottom, .vid-shadow-layer, .vid-info-layer, .vid-quality-selector
z-index: 999999999999
.vid-bottom-progress-bar
z-index: 999999999999
opacity: .2
&.mouse-entered, &.paused
cursor: default
.vid-bottom-progress-bar
opacity: 0
.vid-controls-bottom
opacity: 1
.vid-shadow-layer
opacity: 0.8
.vid-info-layer .vid-info-wrapper
h1, p, h2
opacity: 1
.vid-quality-selector
opacity: 1
.vid-html5
position: relative
z-index: 1
video
display: block
background-color: black
.vid-controls-bottom
z-index: 2
position: absolute
bottom: 20px
left: 0
width: 100%
height: 60px
opacity: 0
transition: $transition
.vid-controls-wrapper
margin: 0 -20px
width: 100%
.vid-toggle-layer, .vid-shadow-layer
position: absolute
bottom: 0
left: 0
width: 100%
height: 100%
z-index: 1
.vid-bottom-progress-bar
position: absolute
width: 100%
height: 2px
z-index: 2
bottom: 0
left: 0
transition: $transition
.progress-bg, .progress-fg,
height: 100%
position: absolute
top: 0
left: 0
.progress-bg
width: 100%
background-color: rgba(white,.4)
z-index: 1
.progress-fg
width: 0%
background-color: white
.vid-info-layer
position: absolute
bottom: 80px
left: 0
z-index: 3
width: 100%
.vid-info-wrapper
width: 90%
margin: 0 auto
padding: 0 20px
h1
color: white
opacity: 0
transition: $transition
h2
color: white
opacity: 0
transition: $transition
p
color: rgba(white,.6)
opacity: 0
transition: $transition
.view-count
margin-left: auto
.vid-shadow-layer
pointer-events: none
z-index: 2
opacity: 0
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100 */
background: transparent /* Old browsers */
background: -moz-linear-gradient(top, transparent 50%, #000000 90%) /* FF3.6-15 */
background: -webkit-linear-gradient(top, transparent 50%,#000000 90%) /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, transparent 50%,#000000 90%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#000000',GradientType=0 ) /* IE6-9 */
transition: $transition
.vid-quality-selector
position: absolute
top: 40%
right: 30px
z-index: 3
flex-direction: column
border-radius: 5px
overflow: hidden
opacity: 0
transition: $transition
button
background-color: rgba(#222,0.5)
padding: 13px 20px
font-weight: 700
font-size: 16px
color: white
&.active
background-color: white
color: #222
.vid-controls-contents
width: 90%
margin: 0 auto
span
margin: 0 10px
font-size: 13px
min-width: 45px
display: flex
justify-content: center
color: rgba(white, .7)
button
color: rgba(white, .7)
transition: $transition
&:hover
color: white
i
font-size: 28px
.vid-progress
position: relative
width: 100%
height: 5px
margin: 0 20px
margin-top: -2px
transition: $transition
cursor: pointer
&:hover
height: 13px
.progress-bg, .progress-fg, .progress-loaded
height: 100%
position: absolute
top: 0
left: 0
.progress-bg
width: 100%
background-color: rgba(white,.4)
z-index: 1
.progress-loaded
pointer-events: none
width: 0%
background-color: rgba(white,.3)
z-index: 2
.progress-fg
width: 0%
background-color: white
.progress-hovertime
position: absolute
top: -35px
padding: 5px 10px
font-size: 12px
transform: translateX(-50%)
color: white
background-color: #333