Skip to content

GitLab

Commit b5e78b7c authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files
Options

rewrite video player, now using videre

parent a4aaa34c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 943 additions and 70 deletions
about.html
View file @ b5e78b7c
......@@ -30,7 +30,7 @@
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center">
<h3 class="meta__title">Jonas Mangler</h3>
<span class="quiet small">Autor</span>
<span class="quiet small">Autor, Schnitt, Kamera</span>
</div>
</span>
<span class="grid__item">
......@@ -57,14 +57,14 @@
<span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center">
<h3 class="meta__title">Hannah Luise Stetter</h3>
<h3 class="meta__title">Hanna Stetter</h3>
<span class="quiet small">Moderation</span>
</div>
</span>
<span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center">
<h3 class="meta__title">Hannah Eßer</h3>
<h3 class="meta__title">Hanna Eßer</h3>
<span class="quiet small">Autor</span>
</div>
</span>
......@@ -78,18 +78,21 @@
<span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center">
<h3 class="meta__title">Oleksander</h3>
<span class="quiet small">-</span>
<h3 class="meta__title">Oleksander Levchenko</h3>
<span class="quiet small">Dokumentation</span>
</div>
</span>
<span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center">
<h3 class="meta__title">Lukas</h3>
<span class="quiet small">Moderation</span>
<span class="quiet small">Konzeptplanung</span>
</div>
</span>
</section>
Wir danken auch:
<a href=https://www.zak.kit.edu target=new><img src="images/logo_zak_whitened.png" width=100%></a>
<a href=https://www.kit.edu target=new><img src="images/logo_kit_whitened.png" width=100%></a>
</div>
</body>
......
geojson/museum.geojson
View file @ b5e78b7c
{
{
"features": [
{
"type": "Feature",
"properties": {
"type": "painting",
"link": "video/video4.html",
"description": "<strong>In der Schenke</strong><p>von David Teniers d. J. (1648), Kunsthalle</p>"
"description": "David Teniers d. J.: <strong>In der Schenke</strong> (1648), Kunsthalle Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -21,7 +21,7 @@
"properties": {
"type": "painting",
"url": "video/video",
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>"
"description": "Matthias Grünewald: <strong>Heilige Märtyrerin</strong> (1511/12), Kunsthalle Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -476,7 +476,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>",
"description": "Wolfgang Münch/Kioyoshi Furukawa: <strong>Bubbles</strong> (2000), ZKM Karlsruhe",
"link": "video/video"
},
"geometry": {
......@@ -493,7 +493,7 @@
"properties": {
"link": "video/video6.html",
"type": "painting",
"description": "<strong>Dorffest</strong><p>von David Teniers d. J. (1648), Kunsthalle</p>"
"description": "David Teniers d. J.: <strong>Dorffest</strong> (1648), Kunsthalle Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -508,7 +508,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"description": "<strong>Van Gogh im schwarzen Schein</strong><p>von Arnulf Rainer (1977-79), Städtische Gallerie</p>",
"description": "Arnulf Rainer: <strong>Van Gogh als verkannter Hochstapler</strong> (1979), Städtische Gallerie Karlsruhe",
"link": "video/video"
},
"geometry": {
......@@ -525,7 +525,7 @@
"properties": {
"type": "painting",
"link": "video/video2.html",
"description": "<strong>Dynamische Struktur</strong><p>von Heinz Mack (1958), Orangerie</p>"
"description": "Heinz Mack: <strong>Dynamische Struktur</strong> (1958), Orangerie Kunsthalle Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -614,7 +614,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"description": "<strong>Take a long break I, II</strong><p>von Marijke van Warmerdam (2006), ZKM</p>",
"description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe",
"link": "video/video"
},
"geometry": {
......@@ -630,7 +630,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"description": "<strong>Überfall auf einen Geleitzug</strong><p>von Sebastian Vrancx (1618), Kunsthalle</p>",
"description": "Sebastian Vrancx: <strong>Überfall auf einen Geleitzug</strong> (1618), Kunsthalle Karlsruhe",
"link": "video/video3.html"
},
"geometry": {
......@@ -647,7 +647,7 @@
"properties": {
"type": "painting",
"link": "video/video",
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>"
"description": "Hans Baldung, gen. Grien: <strong>Markgraf Christoph I. von Baden mit seiner Familie in Anbetung vor der heiligen Anna Selbdritt</strong> (um 1510), Kunsthalle Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -1085,7 +1085,7 @@
"properties": {
"link": "video/video",
"type": "painting",
"description": "<strong>Van Gogh als verkannter Hochstapler</srong><p>von Arnulf Rainer (1979), Städtische Gallerie</p>"
"description": "Arnulf Rainer: <strong>Van Gogh im schwarzen Schein</strong> (1977-79), Städtische Gallerie Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -1101,7 +1101,7 @@
"properties": {
"type": "painting",
"link": "video/video5.html",
"description": "<strong>Abendessen in der Scheune</strong><p>von David Teniers d. J. (1634), Kunsthalle</p>"
"description": "David Teniers d. J.: <strong>Abendessen in der Scheune</strong> (1634), Kunsthalle Karlsruhe"
},
"geometry": {
"coordinates": [
......@@ -1190,7 +1190,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"description": "<strong>Take a long break I, II</strong><p>von Marijke van Warmerdam (2006), ZKM</p>",
"description": "Marijke van Warmerdam: <strong>Take a long break I, II</strong> (2006), ZKM Karlsruhe",
"link": "video/"
},
"geometry": {
......@@ -1205,7 +1205,7 @@
{
"type": "Feature",
"properties": {
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>",
"description": "Max Beckmann: <strong>Großes Stillleben mit Kerzen und Spiegel</strong> (1930), Orangerie Karlsruhe",
"type": "painting",
"link": "video/"
},
......@@ -1222,7 +1222,7 @@
"type": "Feature",
"properties": {
"type": "painting",
"description": "<strong>Großes Stillleben mit Kerzen und Spiegel</strong><p>von Max Beckmann (1930), Orangerie</p>",
"description": "Matthias Grünewald: <strong>Die heilige Elisabeth von Thüringen</strong> (1511/12), Kunsthalle Karlsruhe",
"link": "video/video"
},
"geometry": {
......@@ -1239,7 +1239,7 @@
"properties": {
"type": "painting",
"link": "video/video1.html",
"description": "<strong>Ehrung des Quadrats: Gelbes Zentrum</strong><p>von Josef Albers (1954), Orangerie</p>"
"description": "Josef Albers: <strong>Ehrung des Quadrats: Gelbes Zentrum</strong> (1954), Orangerie Kunsthalle Karlsruhe</p>"
},
"geometry": {
"coordinates": [
......
index.html
View file @ b5e78b7c
......@@ -6,9 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ausstellung-Virtuell | Folge und Varianz</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/player.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" 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">
</head>
<body>
......@@ -29,32 +31,6 @@
</map>
<content>
<div id="video-container">
<div class="overlay"></div>
<video id="video" width="100%" height="100%" poster="images/video1_poster.png">
<source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
<p>Error: your browser doesn't support HTML5 video.</p>
</video>
<div id="video-controls">
<div class="controls">
<button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
<p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
<div class="seek-bar-wrapper" id="seek-bar-wrapper">
<input id="seek-bar" type="range" value="0" step="0.001">
</div>
<button type="button" id="mute" class="text mute">100</button>
<input type="range" id="volume-bar" value="100">
<button type="button" class="icon full-screen" id="fullscreen">
<img class="icon-screen" src=images/icon_fullscreen.png>
</button>
<!-- <span class="icon-screen" aria-hidden="true"></span> -->
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p>
......@@ -72,7 +48,7 @@
<script src='js/mapbox-gl-0.43.0.js'></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/player.js"></script>
<script src="tests/js/videre.js"></script>
<script src="js/map.js"></script>
<script src="js/main.js"></script>
......
tests/css/app.css 0 → 100644
View file @ b5e78b7c
#player {
width: 100%;
}
tests/css/videre.css 0 → 100644
View file @ b5e78b7c
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; }
.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; }
/*# sourceMappingURL=videre.css.map */
tests/css/videre.css.map 0 → 100644
View file @ b5e78b7c
{
"version": 3,
"mappings": "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",
"sources": ["videre.sass"],
"names": [],
"file": "videre.css"
}
tests/css/videre.sass 0 → 100644
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