videoGL: 3D HTML5 video player with filters



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