SwipeVideo

Free viewpoint video HTML5 player

Examples available here: https://swipe.video/

Build Setup

# 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.

<script src="https://unpkg.com/swipevideo/dist/swipevideo.min.js"></script>
<div class="swipevideo" style="width: 300px;" data-src="http://example.com/player/index.html" data-cid="bear_cub"></div>

Embed manually

<script src="https://unpkg.com/swipevideo/dist/swipevideo.min.js"></script>
<script>
swipevideo.config.autoEmbed = false;
setTimeout(function() {
  swipevideo.attach(document.querySelector('.swipevideo'));
}, 5000);
</script>
<div class="swipevideo" style="width: 300px;" data-src="http://example.com/player/index.html" data-cid="bear_cub"></div>

Attributes

| 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

// same as <div class="swipevideo" data-src="http://example.com/player/index.html" data-cid="bear_cub"></div>
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

<script src="https://unpkg.com/swipevideo/dist/swipevideo.min.js"></script>
<div class="swipevideo" data-ref="player" style="width: 300px;" data-src="http://example.com/player/index.html" data-cid="bear_cub"></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
  swipevideo.refs.player
    .getInfo(function(info) {
      console.log('Title: ' + e.value.title);
      console.log('ReadyState: ' + this.readyState); // loadedinfo
    })
    .on('loadedinfo', function(e) {
      console.log('Title: ' + e.value.title);
      console.log('ReadyState: ' + this.readyState); // loadedinfo
    })
    .on('mounted', function() {
      console.log('ReadyState: ' + this.readyState); // mounted
      this.play()
        .pause()
        .addSrcIndex(1) // swiped left effect
        .addSrcIndex(-1) // swiped right effect
        .setSrcIndex(5) // show the sixth src (The src index starts at 0)
        .seek(5.5) // second
        .requestFullscreen()
        .exitFullscreen();
    })
    .one('play', function() {
      console.log('first play');
      this.on('play', () => {
        console.log('play');
      });
    })
    .on('pause', function() {
      console.log('pause');
    })
    .on('ended', function() {
      console.log('ended');
    })
    .on('fullscreenchange', function(e) {
      console.log(`fullscreenchange ${e.value}`);
    })
    .on('swipe', function(e) {
      console.log(`swiped src index:${e.value}`);
    });
}, false);
</script>

Module for build tools

npm install --save swipevideo

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

Copyright (c) 2017-present, AMATELUS Inc.