Skip to content

GitLab

W
web-ausstellung-virtuell.de
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
opacity: 0
pointer-events: none
// display: inline-block
&.hover
opacity: 1
pointer-events: auto
.item
padding: 0 10px
margin: 0 10px
.vid-volume-control
min-width: 45px
.vid-volume-slider
width: 0
height: 5px
margin-top: -2px
background-color: rgba(white,.6)
cursor: pointer
transition: $transition
transform-origin: left
.ui-slider-range
height: 100%
background-color: white
video::-webkit-media-controls
display: none !important
\ No newline at end of file
tests/index.html deleted 100644 → 0
View file @ b5e78b7c
<!DOCTYPE html>
<html>
<head>
<title>Videre</title>
<link rel="stylesheet" href="css/videre.css" />
<link rel="stylesheet" href="css/app.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="js/app.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="player" class="vid-wrapper videre-container mouse-entered">
<div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></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>