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.
LINKS
- videoGL website
- Live Demo
- Documentation
FEATURES
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.
Responsive
The plugin is responsive, it works with absolute and fixed layouts and any z-index.
Dependencies
videoGL takes advantage of jQuery, ThreeJS and WebGL.
Compatibility
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
// BASIC USAGE
$(”#wrapperID”).videoGL({
videoID”,
videoWidth,
videoHeight,
cameraX, cameraY, cameraZ,
rotationX, rotationY
});
// TWEEN and ANIMATIONS
jQuery.videoGL.tween(“video”,
{
“cameraX”: -100,
“cameraY”: -80,
“cameraZ”: 250,
rotationX
}, 1500, TWEEN.Easing.Quintic.InOut, 500);
// FILTERS
$.videoGL.filters.film(“videoID”, parameters);
$.videoGL.filters.sepia(“videoID”, parameters);
…
// UTILS
$.videoGL.enableMouseZoom(“videoID”, false);
$.videoGL.changeBackgroundColor(“videoID”, ”#000”);
$.videoGL.enableReflection(“videoID”,true);
….
Visit the plugin homepage for more info.