SwipeVideo

Free viewpoint video HTML5 player

$3

Build Setup

``bash

`install dependencies`


npm install
serve with hot reload at localhost:8080

npm run dev
build for production with minification

npm run build
build for production and view the bundle analyzer report

npm run build --report
run unit tests

npm run unit
run e2e tests

npm run e2e
run all tests

npm test


For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Usage

Upload dist/player/* to static server  
Upload static/bear_cub/ under the uploaded dist/player/
example.com  
└player  
    ├index.html   
    ├index.min.css  
    ├index.min.js  
    └bear_cub  
        ├aanp1knmp3  
        ├ak1dq9o6mn  
        ︙  
        └info.json

Embed tags into your website.`HTML

Embed manually`HTML


$3
| name                 | description                                              | value type   | default value |
|----------------------|----------------------------------------------------------|--------------|---------------|
| data-src             | URL of contents root                                     | URL          | null          |
| data-cid             | content relative dirpath from data-src                   | path         | null          |
| data-loop            | enable loop playback                                     | boolean      | false         |
| data-muted           | disable audio playback                                   | boolean      | false         |
| data-controls        | display controls box                                     | boolean      | true          |
| data-title           | display title bar                                        | boolean      | true          |
| data-head            | head index of video list                                 | number       | 0             |
| data-lazyload        | using lazysizes  | boolean      | false         |
| data-autoplay        | play automatically                                       | boolean      | false         |
| data-ref             | reference of operation object                            | string       | null          |
| data-filter          | using CSSgram          | filter name  | null          |
| data-poster          | set poster image timing ratio                            | float        | 0             |
| data-iconcolor       | select background color of playing icon                  | color string | #E60014       |
| data-iconhover       | playing icon hover animaton enabled only PC              | boolean      | false         |
| data-allowfullscreen | enabled fullscreen mode                                  | boolean      | true          |
| data-autoswipe       | enabled swiping animation when scrolling and hovering    | boolean      | true          |
| data-jyroswipe       | enabled swiping animation by device jyro sensor          | boolean      | false         |
| data-stereoview      | enabled stereo view effect when landscape orientation    | boolean      | false         |
API

 JavaScript
// same as 

var container = document.createElement('div');
container.style.width = '300px';
document.body.appendChild(container);
// className is unnecessary
var player = swipevideo.attach(container, {
  src: 'http://example.com/player/index.html',
  cid: 'bear_cub',
  ref: 'player',
});

console.log(player === swipevideo.refs.player); // true`

`Operation API`

 HTML


Module for build tools

 bash
npm install --save swipevideo

 JavaScript
import swipevideo from 'swipevideo';
var container = document.createElement('div');
container.style.width = '300px';
document.body.appendChild(container);

swipevideo.attach(container, { src: 'http://example.com/player/index.html', cid: 'bear_cub', });``

License

MIT