Giter Club home page Giter Club logo

valiant360's Introduction

Valiant 360 (beta)

A browser-based video player for 360 degree panorama videos and photos.

Example - Development Log

About

The aim of this project is to provide a free, minimalist 360 degree video WebGL player for modern browsers. It is implemented as a jQuery plugin, with a limited interface for controlling video playback, and mouse/scrollwheel controls for zooming and panning.

There is currently no mobile support, but as Chrome and Safari mobile editions enable WebGL, this should be forwards-compatible with them.

Usage

See the demo folder or the example. Moving the mouse will pan the camera, and the scroll wheel will zoom in and out.

Markup

On the HTML side, create a div to act as your container, and add a data-video-src attribute pointing to the video file you wish to play.

	<div class="valiantContainer" data-video-src="videos/my-video.mp4"></div>

Or, if you wish to use it to view a photo (note: currently must be powers-of-2 resolution (ie. 2048x1024):

	<div class="valiantContainer" data-photo-src="videos/my-photo.jpg"></div>

Javascript

More detailed api documentation pending, for now the below explains about all you can do.

	// initialize plugin, default options shown
	$('.valiantContainer').Valiant360({
		clickAndDrag: false,	// use click-and-drag camera controls
		flatProjection: false,	// map image to appear flat (often more distorted)
		fov: 35, 				// initial field of view
		hideControls: false,	// hide player controls
		lon: 0, 				// initial lon for camera angle
		lat: 0, 				// initial lat for camera angle
		loop: "loop", 			// video loops by default
		muted: true,			// video muted by default
		autoplay: true			// video autoplays by default
	});

	// play video
	$('.valiantContainer').Valiant360('play');

	// pause video
	$('.valiantContainer').Valiant360('pause');

	// load new video file
	$('.valiantContainer').Valiant360('loadVideo', 'path/to/file.mp4');

	// load new photo file
	$('.valiantContainer').Valiant360('loadPhoto', 'path/to/file.jpg');

3rd party libraries and their licenses

The following assets are used in this tool's creation.

valiant360's People

Contributors

flimshaw avatar jvanja avatar

Watchers

Cyrille avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.