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

added profile images

parent 5e821768
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"),
overlay = $(".overlay"),
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');
overlay.fadeIn('400');
clearTimeout(timeoutId);
timeoutId = window.setTimeout(function(){controls.fadeOut('100'); overlay.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');
overlay.fadeOut('400');
});
videoContainer.mouseenter(function(){
controls.fadeIn('400');
overlay.fadeIn('400');
});
timeDuration.text(formatTime(video.duration));
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video> <video src="video/video1.webm" id="html-player" style="width: 100%;" poster="video/video1.png"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="description"> <div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2> <h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p> <p class="prose-big">Öl auf Hartfaserplatte, 109,5 x 109,5 cm</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video> <video src="video/video10.webm" id="html-player" style="width: 100%;" poster="video/video10.png"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="description"> <div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2> <h2>Wolfgang Münch/Kiyoshi Furukawa - Bubbles (2000)</h2>
<p class="prose-big">Bla bla</p> <p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video> <video src="video/video2.webm" id="html-player" style="width: 100%;"poster="video/video2.png"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
</div> </div>
<div class="description"> <div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2> <h2>Heinz Mack - Dynmaische Struktur (1958)</h2>
<p class="prose-big">Bla bla</p> <p class="prose-big">Kunstharzfarben auf Nessel</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
......
video1.png
\ No newline at end of file
video1.webm
\ No newline at end of file
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="https://vjs.zencdn.net/v/oceans.mp4?HD" id="html-player" style="width: 100%;"></video> <video src="video/video3.webm" id="html-player" style="width: 100%;" poster="video/video3.png"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="description"> <div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2> <h2>Sebastian Vrancx - Überfall auf einen Geleitzug (1618)</h2>
<p class="prose-big">Bla bla</p> <p class="prose-big">Bla bla</p>
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
......
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