Skip to content

W
web-ausstellung-virtuell.de
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
/* 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 0 → 100644
View file @ b5e78b7c
<!DOCTYPE html>
<html>
<head>
<title>Videre</title>
<link rel="stylesheet" href="css/videre.css" />
<link rel="stylesheet" href="css/app.css" />