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.