Skip to content

GitLab

Commit af4b5dbc authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files

added custom player css

parent d1f61e1f
Expand all Hide whitespace changes
Inline Side-by-side
css/main.css
View file @ af4b5dbc
......@@ -60,10 +60,6 @@ map {
background-size: cover;
}
.player {
width: 100%;
}
.description {
padding: 15px 80px 15px 80px;
}
......@@ -81,7 +77,7 @@ h2 {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px 85px 300px 1fr;
grid-template-rows: 80px auto 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
......
css/player.css 0 → 100755
View file @ af4b5dbc
/* ==== Specific Entypo icons for interface ==== */
@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype'),
url('../fonts/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-play,.icon-pause,.icon-sun,.icon-sun-2,.icon-screen {
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-play:before {
content: "\e0ab";
}
.icon-pause:before {
content: "\e0ac";
}
.icon-sun:before {
content: "\e05c";
}
.icon-sun-2:before {
content: "\e05d";
}
.icon-screen:before {
content: "\e060";
}
/* ==== Player CSS ==== */
video {
cursor:pointer;
}
video::-webkit-media-controls-enclosure {
display: none;
}
#video-container {
position: relative;
width: 100%;
vertical-align: middle;
}
#video-container #video-controls {
position: absolute;
left: 0;
right: 0;
bottom: 4px;
z-index: 2147483647;
}
#video-controls .controls {
padding: 0;
}
#video-controls .controls .clearfix {
clear: both;
}
#video-controls .controls .time {
color: #777;
font-family: Arial;
float: right;
font-size: 11px;
line-height: 40px;
vertical-align: middle;
margin: 0 10px;
}
#video-controls .controls .time .current {
color: #FFF;
}
#video-controls input[type=range] {
-webkit-appearance: none;
width: 100%;
background-color: #FFF;
height: 6px;
margin: 0;
cursor:pointer;
}
#video-controls input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
#video-controls input[type=range]:focus {
outline: none;
}
#video-controls input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
#video-controls input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 6px;
width: 8px;
background: #fe4952;
border-radius: 0px;
cursor: pointer;
}
#video-controls input[type=range]::-moz-range-thumb {
height: 6px;
width: 8px;
background: #fe4952;
border-radius: 0px;
cursor: pointer;
}
#video-controls input[type=range]::-ms-thumb {
height: 6px;
width: 8px;
background: #fe4952;
border-radius: 0px;
cursor: pointer;
}
#video-controls .seek-bar-wrapper {
height: 6px;
}
#video-controls input#seek-bar {
position: absolute;
margin: 17px 0px 0px 10px;
width: 200px;
}
#video-controls button:hover {
cursor: pointer;
}
#video-controls button.text {
outline: none;
border: none;
color: #FFF;
background-color: transparent;
font-size: 11px;
line-height: 20px;
padding: 11px 10px 4px;
display: inline-block;
}
#video-controls button.text:hover {
color: #FFF;
}
#video-controls button.icon {
outline: none;
border: none;
color: #FFF;
background-color: transparent;
font-size: 20px;
line-height: 20px;
padding: 10px 10px 8px;
display: inline-block;
}
#video-controls button.play {
float: left;
}
#video-controls button.mute {
float: right;
text-align: right;
width: 60px;
}
#video-controls input#volume-bar {
float: right;
margin-top: 18px;
width: 60px;
}
#video-controls button.full-screen {
float: right;
}
fonts/entypo.svg 0 → 100755
View file @ af4b5dbc
This diff is collapsed.
index.html
View file @ af4b5dbc
......@@ -5,6 +5,7 @@
<meta data-react-helmet="true" charset="utf-8"/>
<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">
<script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
</head>
......@@ -26,7 +27,31 @@
<div id='map' style='width: 100%; height: 100%;'></div>
</map>
<content>
<video class="player" poster="images/player.png"></video>
<div id="video-container">
<video id="video" width="100%" height="100%">
<!-- Video here -->
<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>
<!-- Markup to replace default interface -->
<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>
<div class="seek-bar-wrapper" id="seek-bar-wrapper">
<input id="seek-bar" type="range" value="0" step="0.001">
</div>
<p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
<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"><span class="icon-screen" aria-hidden="true"></span></button>
<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>
......@@ -49,6 +74,8 @@
style: 'mapbox://styles/mapbox/light-v9'
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/player.js"></script>
</body>
......
js/player.js 0 → 100755
View file @ af4b5dbc
window.onload = function() {
var formatTime = function(rawTime) {
var sec_num = parseInt(rawTime, 10);
if(isNaN(sec_num)){
return '00:00:00';
}
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10){hours = '0' + hours;}
if (minutes < 10){minutes = '0' + minutes;}
if (seconds < 10){seconds = '0' + seconds;}
return hours + ':' + minutes + ':' + seconds;
}
// Keep video standard JS DOM element for HTML5 Video API
var video = document.getElementById("video"),
videoContainer = $("#video-container"),
controls = $("#video-controls"),
playButton = $("#play-pause"),
muteButton = $("#mute"),
fullScreenButton = $("#fullscreen"),
timeCurrent = $("#timeCurrent"),
timeDuration = $("#timeDuration"),
seekBar = $("#seek-bar"),
seekBarWrapper = $("#seek-bar-wrapper"),
volumeBar = $("#volume-bar"),
timeoutId = 0;
videoContainer.mousemove(function() {
controls.fadeIn('400');
clearTimeout(timeoutId);
timeoutId = window.setTimeout(function(){controls.fadeOut('100');}, 4000);
});
video.addEventListener("click", function(){
if (video.paused == true) {
video.play();
playButton.html('<span class="icon-pause" aria-hidden="true"></span>');
} else {
video.pause();
playButton.html('<span class="icon-play" aria-hidden="true"></span>');
}
}, false);
video.addEventListener("timeupdate", function() {
var value = (100 / video.duration) * video.currentTime;
seekBar.val(value);
timeCurrent.text(formatTime(video.currentTime));
if(timeDuration.text() == '00:00:00'){
timeDuration.text(formatTime(video.duration));
}
});
playButton.click(function() {
if (video.paused == true) {
video.play();
playButton.html('<span class="icon-pause" aria-hidden="true"></span>');
} else {
video.pause();
playButton.html('<span class="icon-play" aria-hidden="true"></span>');
}
});
muteButton.click(function() {
if (video.muted == false) {
video.muted = true;
muteButton.text("Muted");
} else {
if(video.volume != 0){
video.muted = false;
muteButton.text(video.volume*100);
}
}
});
fullScreenButton.click(function() {
if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if(video.requestFullscreen) {
video.requestFullscreen();
} else if(video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if(video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if(video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
});
seekBar.on('input', function() {
var time = video.duration * (seekBar.val() / 100);
video.currentTime = time;
});
seekBarWrapper.mousedown(function() {
video.pause();
playButton.html('<span class="icon-play" aria-hidden="true"></span>');
});
seekBarWrapper.mouseup(function() {
video.play();
playButton.html('<span class="icon-pause" aria-hidden="true"></span>');
});
volumeBar.on('input', function() {
video.volume = volumeBar.val()/100;
if(volumeBar.val() == 0){
video.muted = true;
muteButton.text("Muted")
}
else {
video.muted = false;
muteButton.text(volumeBar.val());
}
});
videoContainer.mouseleave(function(){
controls.fadeOut('400');
});
videoContainer.mouseenter(function(){
controls.fadeIn('400');
});
timeDuration.text(formatTime(video.duration));
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment