videoGL 3D HTML5 video player with filters

CodeCanyon videoGL 3D HTML5 video player with filters 7404949
Script \ JavaScript \ Media
VideoGL \ Filters \ VideoID \ Plugin \ Utilities \ JQuery \ Player \ Create \ Players

JavaScript - videoGL 3D HTML5 video player with filters 7404949 by biondifabio @ CodeCanyon

Script \ JavaScript \ Media

VideoGL jQuery plugin : 3D HTML5 videos with postprocessing filters
videoGL is a jQuery plugin to converts standard HTML5 <video> elements in 3D video players, giving you the ability to create interactive 3D animations, add reflections, apply post-processing filters such as sepia, grayscale, film and much more.


- videoGL website

- Live Demo

- Documentation
Create 3D video players
for websites, galleries, showcases, kiosks apps, fullscreen 3D videos and much more.

Post-processing video filters
Apply video filters such as: Sepia, Grayscale, RGB, Blur, Vignette and many others.

3D Tweens
Animate your video player with 3D transitions. Check the live demo.

Video Player utilities
Tools, utilities and examples in order to give you all the basics you need to create your own custom 3D video player: load videos (mp4, webm, ogg), Play, Pause, Stop, Rewind, Seek, Video Loop, Volume, custom video events and more…
3D, video and generic utilities
A lot of utilities such as: enable mouse rotation/pan/zoom, change colors, enable reflection, webgl/browser detectors, stats and more…
Online visual editor
A web application built to help videoGL users and can be very useful to set all the properties of your video player using a visual editor to generate most of the code syntax that you can simply copy/paste into your HTML website.

The plugin is responsive, it works with absolute and fixed layouts and any z-index.
videoGL takes advantage of jQuery, ThreeJS and WebGL.
WebGL is currently not (or partially) supported in most of mobile devices.
Furthermore while latest Chrome, Firefox and Safari versions should work fine, videoGL filters are automatically disabled by the plugin in IE11 and above and a Canvas renderer is used instead of the WebGL renderer.
If webGL is not completely supported, the browser will display the standard HTML5 <video> element instead of our enhanced 3D version.
Read the documentation for more info.

How to use

videoWidth ,
videoHeight ,
cameraX , cameraY , cameraZ ,
rotationX , rotationY


“cameraX”: -100,
“cameraY”: -80,
“cameraZ”: 250,
}, 1500, TWEEN.Easing.Quintic.InOut, 500);


$“videoID”, parameters);
$.videoGL.filters.sepia(“videoID”, parameters);


$.videoGL.enableMouseZoom(“videoID”, false);
$.videoGL.changeBackgroundColor(“videoID”, ”#000”);

Visit the plugin homepage for more info.

Last Update: 11 April 14; Compatible Browsers: IE9, IE10, IE11, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, HTML, CSS; Software Version: jQuery.

Real Time Image Presenter tool for Wordpress.

Keywords: 3d, filters, html5, jquery, players, video, webGl.