README.md 3.1 KB
Newer Older
martinforell's avatar
martinforell committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
# 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      |
67 68 69

### Example
The example of the KIT: Artifical Intelligence - Start-Up auvisus: (https://www.sek.kit.edu/kivideo/index.html)
andreas.sexauer's avatar
andreas.sexauer committed
70

71
[![Watch the video](https://git.scc.kit.edu/zml/interactive-videoplayer/raw/master/VideoplayerThumbnail.png)](https://www.sek.kit.edu/kivideo/index.html)