Free viewpoint video HTML5 player
npm install swipevideoFree viewpoint video HTML5 player
`` bashinstall dependencies
npm install
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 unnecessaryvar 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',
});
``Copyright (c) 2017-present, AMATELUS Inc.