Commit d5f0926f authored by martinforell's avatar martinforell

Initial commit

parents
# Node
node_modules
test/results
test/coverage
dist
## OS X
.DS_Store
._*
.Spotlight-V100
.Trashes
\ No newline at end of file
# Default ignored files
/workspace.xml
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
<component name="ProjectDictionaryState">
<dictionary name="eh2321">
<words>
<w>audioplayer</w>
<w>currenttime</w>
<w>videoplayer</w>
<w>videostream</w>
</words>
</dictionary>
</component>
\ No newline at end of file
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
<Languages>
<language minSize="56" name="JavaScript" />
</Languages>
</inspection_tool>
</profile>
</component>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/VideoProject_3_Streams.iml" filepath="$PROJECT_DIR$/.idea/VideoProject_3_Streams.iml" />
</modules>
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
language: node_js
node_js:
- "7"
before_script:
- npm install --global gulp-cli
script: gulp
\ No newline at end of file
# The MIT License (MIT)
Copyright (c) Go Make Things, LLC
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
# Interactive Videoplayer
This is the repository for the interactive videoplayer used by SEK and ZML.
## Getting Started
This project uses [Gulp boilerplate](https://github.com/cferdinandi/gulp-boilerplate).
If this boilerplate has not been used before, you have to install the following dependencies first:
### Dependencies
*__Note:__ if you've previously installed Gulp globally, run `npm rm --global gulp` to remove it. [Details here.](https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467)*
Make sure these are installed first:
- [Node.js](http://nodejs.org)
- [Gulp Command Line Utility](http://gulpjs.com) `npm install --global gulp-cli`
### Quick Start
1. In bash/terminal/command line, `cd` into your project directory.
2. Run `npm install` to install required files and dependencies.
3. When it's done installing, run one of the task runners to get going:
- `gulp` manually compiles files.
- `gulp watch` automatically compiles files and applies changes using [BrowserSync](https://browsersync.io/) when you make changes to your source files.
## Documentation
Add your source files to the appropriate `src` subdirectories. Gulp will process and and compile them into `dist`.
- JavaScript files in the `src/js` directory will be compiled to `dist/js`.
- `main`folder: Contains the code used for the videoplayer.
- `vendor`: Contains compressed files of `jQuery` and `Howlerjs`.
- `audioworker.js` and `videoworker.js` are the web workers for the video- and audioplayer
- Files in the `src/sass` directory will be compiled to `dist/css`.
- `components` folder: Contains all the different css files.
- `main.scss`: Contains imports for the files in `components`.
- SVG files placed in the `src/svg` directory will be optimized with SVGO and compiled into `dist/svg`.
- Files and folders placed in the `copy` directory will be copied as-is into the `dist` directory.
- `files`: Contains all external files needed for the videoplayer
- `audio`: Contains the audio files.
- `video`: Contains the video files in different qualities (HD and SD) and the placeholder image named poster.png.
- `config.json`: Is the config file used by the videoplayer to import the video and audio files.
- `fonts`: Contains the font used by this project (open sans).
- `index.html`: Main HTML file.
### config.json
The `config.json` file contains the import details used by the videoplayer:
```json
{
"video": {
"url-hd": "files/video/hd.mp4",
"url-sd": "files/video/sd.mp4"
},
"audio": {
"url-0": "files/audio/a1.mp3",
"url-1": "files/audio/a2.mp3",
"url-2": "files/audio/a3.mp3"
},
"streams": 3
}
```
### Video settings for 3 streams:
|Quality | Width | Height |
|:-----------------:|:-------------:|:---------------:|
| SD | 1280 | 2160 |
|HD | 640 | 1080 |
/**
* Settings
* Turn on/off build features
*/
var settings = {
clean: true,
scripts: true,
polyfills: true,
styles: true,
svgs: true,
copy: true,
reload: true
};
/**
* Paths to project folders
*/
var paths = {
input: 'src/',
output: 'dist/',
scripts: {
input: 'src/js/*',
polyfills: '.polyfill.js',
output: 'dist/js/'
},
styles: {
input: 'src/sass/**/*.{scss,sass}',
output: 'dist/css/'
},
svgs: {
input: 'src/svg/*.svg',
output: 'dist/svg/'
},
copy: {
input: 'src/copy/**/*',
output: 'dist/'
},
reload: './dist/'
};
/**
* Template for banner to add to file headers
*/
var banner = {
full:
'/*!\n' +
' * <%= package.name %> v<%= package.version %>\n' +
' * <%= package.description %>\n' +
' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
' * <%= package.license %> License\n' +
' * <%= package.repository.url %>\n' +
' */\n\n',
min:
'/*!' +
' <%= package.name %> v<%= package.version %>' +
' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
' | <%= package.license %> License' +
' | <%= package.repository.url %>' +
' */\n'
};
/**
* Gulp Packages
*/
// General
var {gulp, src, dest, watch, series, parallel} = require('gulp');
var del = require('del');
var flatmap = require('gulp-flatmap');
var lazypipe = require('lazypipe');
var rename = require('gulp-rename');
var header = require('gulp-header');
var package = require('./package.json');
// Scripts
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var concat = require('gulp-concat');
var uglify = require('gulp-terser');
var optimizejs = require('gulp-optimize-js');
// Styles
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-cssnano');
// SVGs
var svgmin = require('gulp-svgmin');
// BrowserSync
var browserSync = require('browser-sync');
/**
* Gulp Tasks
*/
// Remove pre-existing content from output folders
var cleanDist = function (done) {
// Make sure this feature is activated before running
if (!settings.clean) return done();
// Clean the dist folder
del.sync([
paths.output
]);
// Signal completion
return done();
};
// Repeated JavaScript tasks
var jsTasks = lazypipe()
.pipe(header, banner.full, {package: package})
.pipe(optimizejs)
.pipe(dest, paths.scripts.output)
.pipe(rename, {suffix: '.min'})
.pipe(uglify)
.pipe(optimizejs)
.pipe(header, banner.min, {package: package})
.pipe(dest, paths.scripts.output);
// Lint, minify, and concatenate scripts
var buildScripts = function (done) {
// Make sure this feature is activated before running
if (!settings.scripts) return done();
// Run tasks on script files
return src(paths.scripts.input)
.pipe(flatmap(function(stream, file) {
// If the file is a directory
if (file.isDirectory()) {
// Setup a suffix variable
var suffix = '';
// If separate polyfill files enabled
if (settings.polyfills) {
// Update the suffix
suffix = '.polyfills';
// Grab files that aren't polyfills, concatenate them, and process them
src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
.pipe(concat(file.relative + '.js'))
.pipe(jsTasks());
}
// Grab all files and concatenate them
// If separate polyfills enabled, this will have .polyfills in the filename
src(file.path + '/*.js')
.pipe(concat(file.relative + suffix + '.js'))
.pipe(jsTasks());
return stream;
}
// Otherwise, process the file
return stream.pipe(jsTasks());
}));
};
// Lint scripts
var lintScripts = function (done) {
// Make sure this feature is activated before running
if (!settings.scripts) return done();
// Lint scripts
return src(paths.scripts.input)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
};
// Process, lint, and minify Sass files
var buildStyles = function (done) {
// Make sure this feature is activated before running
if (!settings.styles) return done();
// Run tasks on all Sass files
return src(paths.styles.input)
.pipe(sass({
outputStyle: 'expanded',
sourceComments: true
}))
.pipe(prefix({
browsers: ['last 2 version', '> 0.25%'],
cascade: true,
remove: true
}))
.pipe(header(banner.full, { package : package }))
.pipe(dest(paths.styles.output))
.pipe(rename({suffix: '.min'}))
.pipe(minify({
discardComments: {
removeAll: true
}
}))
.pipe(header(banner.min, { package : package }))
.pipe(dest(paths.styles.output));
};
// Optimize SVG files
var buildSVGs = function (done) {
// Make sure this feature is activated before running
if (!settings.svgs) return done();
// Optimize SVG files
return src(paths.svgs.input)
.pipe(svgmin())
.pipe(dest(paths.svgs.output));
};
// Copy static files into output folder
var copyFiles = function (done) {
// Make sure this feature is activated before running
if (!settings.copy) return done();
// Copy static files
return src(paths.copy.input)
.pipe(dest(paths.copy.output));
};
// Watch for changes to the src directory
var startServer = function (done) {
// Make sure this feature is activated before running
if (!settings.reload) return done();
// Initialize BrowserSync
browserSync.init({
server: {
baseDir: paths.reload
}
});
// Signal completion
done();
};
// Reload the browser when files change
var reloadBrowser = function (done) {
if (!settings.reload) return done();
browserSync.reload();
done();
};
// Watch for changes
var watchSource = function (done) {
watch(paths.input, series(exports.default, reloadBrowser));
done();
};
/**
* Export Tasks
*/
// Default task
// gulp
exports.default = series(
cleanDist,
parallel(
buildScripts,
lintScripts,
buildStyles,
buildSVGs,
copyFiles
)
);
// Watch and reload
// gulp watch
exports.watch = series(
exports.default,
startServer,
watchSource
);
\ No newline at end of file
This diff is collapsed.
{
"name": "interactive-videoplayer",
"version": "1.0.0",
"description": "This is an interactive videoplayer.",
"main": "./dist/main.js",
"author": {
"name": "Zentrum für Mediales Lernen",
"url": "https://git.scc.kit.edu/zml"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://git.scc.kit.edu/zml/interactive-videoplayer.git"
},
"devDependencies": {
"browser-sync": "^2.26.7",
"del": "3.0.0",
"gulp": "4.0.0",
"gulp-autoprefixer": "6.0.0",
"gulp-concat": "2.6.1",
"gulp-cssnano": "2.1.3",
"gulp-flatmap": "1.0.2",
"gulp-header": "2.0.5",
"gulp-jshint": "2.1.0",
"gulp-optimize-js": "1.1.0",
"gulp-rename": "1.4.0",
"gulp-sass": "4.0.2",
"gulp-svgmin": "2.1.0",
"gulp-terser": "1.1.7",
"jshint": "2.9.6",
"jshint-stylish": "2.2.1",
"lazypipe": "1.0.1",
"howler": "^2.1.2"
}
}
{
"video": {
"url-hd": "files/video/hd.mp4",
"url-sd": "files/video/sd.mp4"
},
"audio": {
"url-0": "files/audio/a1.mp3",
"url-1": "files/audio/a2.mp3",
"url-2": "files/audio/a3.mp3"
},
"streams": 3
}
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>