Commit d5f0926f authored by martinforell's avatar martinforell
Browse files

Initial commit

parents
This diff is collapsed.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<script src="js/vendor.polyfills.js"></script>
</head>
<body>
<div id="container">
<!-- The Modal -->
<div id="share-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeModal()">&times;</span>
<h3>Video teilen</h3>
</div>
<div class="modal-body">
<div id="share-menu" class="flex ">
<div id="url-btn-container" class="tab-container show">
<button id="share-url-btn" onclick="showTab( 'link-container')">
<span id="link-icon"></span>
</button>
<p class="btn-text">URL</p>
</div>
<div id="embed-btn-container" class="tab-container m-left show">
<button id="share-embed-btn" class="active" onclick="showTab( 'embed-container')">
<span id="embed-icon"></span>
</button>
<p class="btn-text">Einbetten</p>
</div>
</div>
<div id="link-container" class="hide">
<p>Sie können die Url des Videos kopieren:</p>
<div id="share-url-container" class="flex flex-auto">
<input id="share-url" readonly placeholder="https://zml.kit.edu">
<button class="flex-end" onclick="copyUrl('share-url')">Kopieren</button>
</div>
</div>
<div id="embed-container" class="show">
<p>Sie können das Video mittels iFrame auf Ihrer Homepage einbetten:</p>
<div id="share-embed-container" class="flex flex-auto">
<textarea id="share-embed" autocomplete="off" rows="3" placeholder="text"></textarea>
<div id="share-embed-btn-container">
<button id="embed-button" onclick="copyUrl('share-embed')">Kopieren</button>
</div>
</div>
</div>
<p id="disclaimer">Der interaktive Vidoeplayer für diese besondere Form von synchronisierten Videos ist
eine gemeinsame
Entwicklung am KIT von <a target="_blank" href="https://www.sek.kit.edu">SEK</a>
und <a target="_blank" href="http://www.zml.kit.edu/">ZML</a>.
Er kann als Open Source mit einer CC-BY Lizenz
auch durch Dritte verwendet werden. Mehr dazu <a target="_blank" href="http://www.zml.kit.edu/videoplayer">hier</a>.
</p>
</div>
<div class="modal-footer flex ">
<div style="width: 100%;" class="flex flex-center ">
<a href="https://www.kit.edu" target="_blank" style="margin-right: 32px">
<img src="svg/kit_logo_color.svg" style="display: block; height: 72px; margin: auto;">
</a>
<a href="https://zml.kit.edu" target="_blank">
<img src="svg/zml_textlogo.svg" style="display: block; height: 64px; margin: auto;">
</a>
</div>
</div>
</div>
</div>
<div id="container-loader" class="hide">
<div class="flex center-items loader-container">
<div class="lds-default">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div><!--END DIV LOADER-->
<!-- <div id="container-loader" class="hide">-->
<!-- <div class="circle-loader"></div>-->
<!-- </div>-->
<div id="placeholder" class="show">
<div class="flex center-items placeholder-container">
<button id="start-video" onclick="initVideo()"><span id="start-video-icon"></span></button>
</div><!--END DIV PLACEHOLDER-CONTAINER-->
<img id="placeholder-img" src="files/video/poster.png" alt="placeholder image">
</div><!--END DIV PLACEHOLDER-->
<div class="container-video" id="container-video">
<div id="container-navigation" class="row hide">
<div class="column" id="left">
<button id="video-1" onclick="changePosition('left')">
</button>
</div>
<div class="column" id="right">
<button id="video-2" onclick="changePosition('right')">
</button>
</div>
</div><!--END DIV CONTAINER-NAVIGATION-->
<video class="videoplayer hide" id="player" muted preload="metadata" playsinline="true"
webkit-playsinline="true">
</video>
</div><!--END DIV CONTAINTER-VIDEO-->
<div class="container-controls hide" id="container-controls">
<div style="height: 100%">
<div class="video-slider video-slider__player">
<time id="time-change"></time>
<progress id="video-buffer" class="video-slider__buffer" value="0" max="100"></progress>
<progress id="video-progress" class="video-slider__progress" value="0" max="100"></progress>
<input id="video-progress-bar" type="range" class="video-slider__slider slider" min="0" max="100"
value="0">
</div>
<div id="video-controls" class="flex center-items">
<button type="button" id="play-pause" onclick="startStopVideo()">
<span id="play-pause-icon"></span>
</button>
<div class="flex flex-auto center-items m-both">
<time id="time-up">00:00</time>
<time class="m-left" id="time-duration"></time>
</div><!--END DIV CONTROLS-SEEKBAR-TIME -->
<div class="flex flex-auto">
<div id="video-stream-icon">
<div class="flex flex-auto" id="monitor">
<button onclick="changeVideo(1)"></button>
<button onclick="changeVideo(2)"></button>
<button onclick="changeVideo(3)"></button>
</div>
</div>
</div>
<button id="volume" onclick="Audioplayer.mute()" class="m-both">
<span id="volume-icon"></span>
</button>
<input id="volume-slider" class="slider" type="range" min="0" max="100" step="1"
value="100">
<button id="hd-sd" onclick="changeVideoQuality()" class="m-left"><span id="hd-sd-icon"></span></button>
<button id="fullscreen" onclick="fullScreen()" class="m-left"><span id="fullscreen-icon"></span>
</button>
<button id="share-button" onclick="openModal()" class="m-left">
<span id="share-icon"></span>
</button>
<button id="kit-logo" onclick="window.open('https://www.kit.edu')" class="m-both"><span
id="kit-icon"></span></button>
</div>
</div><!--END DIV VIDEO-CONTROLS-->
</div> <!--END DIV CONTAINTER-CONTROLS-->
</div>
<!-- Scripts -->
<script src="js/main.polyfills.js"></script>
</body>
</html>
\ No newline at end of file
addEventListener('message', ({data}) => {
// console.log("ACTION", data.action)
let diff;
let fading = false;
let interval;
switch (data.action) {
case 'timeupdate':
diff = data.data.video - data.data.audio;
if (Math.abs(diff) > 0.2) {
postMessage({
action: 'timeupdate',
needed: true
})
}
break;
case 'play':
diff = data.data.video - data.data.audio;
// console.log("AUDIOWORKER:", diff)
if (Math.abs(diff) > 0.12) {
postMessage({
action: 'timeupdate',
needed: true
})
}
break;
}
});
\ No newline at end of file
/**
* Element.matches() polyfill (simple version)
* https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
*/
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
addEventListener('message', ({data}) => {
let val;
switch (data.action) {
case "timeupdate":
val = Math.floor((100 / data.data.duration) * data.data.currentTime);
let progress = (data.data.currentTime / data.data.duration) * 100;
postMessage({
action: 'timeupdate',
value: val,
progress: progress,
time: calcTime(val)
});
break;
case "duration":
postMessage({
action: 'duration',
time: calcTime(data.data)
});
break;
case "mousemove":
val = Math.floor((data.data.offset / data.data.width) * 100);
postMessage({
action: 'mousemove',
value: val,
offset: data.data.offset,
time: calcTime(data.data.duration * (val / 100))
});
break;
}
});
function calcTime(seconds) {
return new Date(seconds * 1000).toISOString().substr(14, 5);
}
\ No newline at end of file
@import "colors";
@import "svg_path";
body {
font-size: 62.5%;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Open Sans", sans-serif;
color: $white;
}
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('../fonts/open-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
*:fullscreen,
:-ms-fullscreen {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: contain;
}
:-webkit-full-screen {
background: black;
}
:-moz-full-screen {
background: black;
}
:-ms-fullscreen {
background: black;
width: 90%;
margin: 1em auto;
object-fit: contain;
}
:fullscreen { /* spec */
background: black;
}
#container {
overflow: hidden;
width: 100%;
background-color: black;
position: relative;
max-height: 100vh;
}
#container #container-video {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
overflow: hidden;
}
.videoplayer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
}
video {
pointer-events: none !important;
}
video:fullscreen {
pointer-events: none !important;
}
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
p {
font-size: 1.1rem;
}
\ No newline at end of file
$blue_primary: #1976d2;
$blue_dark: #004ba0;
$blue-light: #63a4ff;
$yello_primary: #ffeb3b;
$yellow_light: #ffff72;
$gray-light: #d3d3d3;
$kit_green_dark: #004233;
$kit_green_light: #27C196;
$white: #fff;
$black: #000;
$blue_light_4: #C6DCFF;
$blue_light_3: rgba(165, 188, 255, 0.31);
$blue_light_2: #859EE9;
$blue_light_1: #6680C9;
$blue: #4664AA;
$blue_dark1: #005791;
$blue_dark2: #2A3C66;
$blue_dark3: #1C2844;
$green_light_4: #E6FFF8;
$green_light_3: #ABE6DB;
$green_light_2: #57CDB7;
$green_light_1: #27C196;
$kit_green: #009682;
$green_dark_1: #007966;
$green_dark_2: #396552;
$green_dark_3: #004233;
$yellow_light: #FFF594;
$yellow: #FCE500;
$yellow_dark: #AD9E00;
$mai_green_light: #CEE2A7;
$mai_green: #8CB63C;
$mai_green_dark: #5E7B28;
$orange_light: #F3D69F;
$orange: #DF9B1B;
$orange_dark: #9B6C13;
$red_light: #DC5659;
$red: #A22223;
$red_dark: #611415;
$flieder_light: #D2AFD9;
$flieder: #954CA4;
$flieder_dark: #65346F;
$lila_light: #EF5CC8;
$lila: #A3107C;
$lila_dark: #5D0947;
$cyan_light: #9FD9F4;
$cyan: #19A1E0;
$cyan_dark: #4664AA;
$brown_light: #E0C78F;
$brown: #A7822E;
$brown_dark: #443513;
$bg_1:#E2E3E9;
$bg_2:#A7AABC;
$bg_3:#434656;
\ No newline at end of file
@import "svg_path";
@import "colors";
@import "helper_variables";
//Icons for buttons
#container-controls span {
cursor: pointer;
display: inline-block;
height: $video_controls_height;
width: $video_controls_height;
}
#container-controls #kit-logo span {
width: $kit_logo_width;
}
#container-controls span#play-pause-icon {
background: url($ic_play_outline) no-repeat top left;
background-size: contain;
}
#container-controls span#mute-icon {
background: url($ic_mute) no-repeat top left;
background-size: contain;
}
#container-controls span#volume-icon {
background: url($ic_vol_up) no-repeat top left;
background-size: contain;
}
#container-controls span#volume-down-icon {
background: url($ic_vol_down) no-repeat top left;
background-size: contain;
}
#container-controls span#fullscreen-icon {
background: url($ic_fullscreen) no-repeat top left;
background-size: contain;
}
#container-controls span#switch-icon {
background: url($ic_switch_video) no-repeat top left;
background-size: contain;
}
#container-controls span#hd-sd-icon {
background: url($ic_hd) no-repeat top left;
background-size: contain;
}
#container-controls span#volume-icon {
background: url($ic_vol_up) no-repeat top left;
background-size: contain;
}
#container-controls span#zml-icon {
background: url($zml_logo) no-repeat center;
background-size: contain;
}
#container-controls span#kit-icon {
background: url($kit_logo) no-repeat center;
background-size: contain;
}
#container-controls span#share-icon {
background: url($ic_share) no-repeat center;
background-size: contain;
}
button {
background-color: transparent;
border: none;
}
#container-controls #fullscreen-icon {
transition: width .2s ease-in-out;
}
#container-controls #fullscreen:hover #fullscreen-icon {
transform: scale(0.9);
-webkit-transform: scale(0.9, 0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
--ms-transform: scale(0.9);
}
#container:hover #container-controls {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
--ms-transform: translateY(0);
}
#container-controls time {
font-size: 1.2rem;
}
//#container:hover #container-controls {
// opacity: 0.9;
//}
#container #container-controls {
height: $container_controls_height;
z-index: 5;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0.9;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
transform: translateY(100%) translateY(-0.5rem);
-webkit-transform: translateY(100%) translateY(-0.5rem);
-moz-transform: translateY(100%) translateY(-0.5rem);
-o-transform: translateY(100%) translateY(-0.5rem);
--ms-transform: translateY(100%) translateY(-0.5rem);
}
#container #video-controls {
position: relative;
background-color: $bg_3;
height: $video_controls_height;
}
#time-up::after {
content: "/";
margin-left: 0.8rem;
}
#monitor button {
height: $monitor_height_width;
width: $monitor_height_width;
cursor: pointer;
}
#monitor button:hover {
background: url($monitor) no-repeat center;
background-size: cover;
opacity: 1;
}
#video-stream-icon {
background: url($video_stream_1) no-repeat center;
background-size: cover;
width: $monitor_container;
}
#video-controls button {
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
@import "colors";
#container nav {
z-index: 2;
position: