Introducing Kolor Eyes, an HTML5/WebGL player for 360° video by Yann Gilquin, developer

  |   Labs   |   7 Comments

This is a very, very old post dating back to 2011!

If you are interested in an online HTML5 player for 360° video, check out ForgeJS: our new open-source framework to create awesome immersive experiences !


KolorEyes overview


Kolor Eyes video player

Kolor Eyes is a web video player designed to allow user to immerge himself into the scene during viewing. Video footage is in spherical format and consists in frames with fields of view of 360×180°. User can turn in every direction and zoom in order to position where he aims anytime. It’s now up to you to decide where to look at in the video.


Live version and demo video

You can try online version here.

Here is a demo video showing what is possible to do with Kolor Eyes. Remember to enable closed caption (CC button) to get live explanations.


Technologies behind Kolor Eyes

Kolor Eyes video player is based on 2 recent major technologies of the Internet:

  • HTML5Video content is broadcasted through a <video> tag which is part of HTML5 specification. Data decoding is done by the browser, without any need for some additional plug-in.
  • WebGLView frame is inside a <canvas> element with a 3D WebGL context. This brand new technology is specified by Khronos Group. It’s a set of graphical 3D features made available directly in the web page by the browser and taking advantage of the capacities of the graphical card.


No need for additional plug-in

As said earlier, the browser does give access to these technologies, thus user does not need to install any third party plug-in. All market leader browsers does not enable these technologies yet. Nevertheless, Firefox 4.0 or Chrome 10 do implement them and give the best user experiences with Kolor Eyes video player. Opera 11 will support it, and Safari enables it with a special setting. Khronos Group maintains a web page listing current available implementations of WebGL for every platform.


High level of integration

Proprietary technologies well deployed over the Internet today suffer of a lack of integration with web page content. Kolor Eyes video player breaks this statement offering new possibilities as it relies on standards. Player’s code runs directly into the browser and can access all enabled API. This allows web page developers to create better interaction between the player and online resources. We demonstrate this with snapshot feature in version 1.0.



Kolor Eyes video player features
A video player

Kolor Eyes is a video player. It has a complete set of common features: playback and audio settings control, preloading, stream quality selector, playlist, full windowed or reduced display modes. Fullscreen mode is reachable by a simple user action, depending on the browser. More features can be developed, 1.0 version embeds as an example of HTML5 capabilities a take snapshot button allowing to capture instant frame to save and share it wherever the user wants to. Kolor Eyes video player also enables camera autorotation.

Player controls



Different controls are available from right column sliding menus. They expose useful camera and view settings. Projection distance makes it possible to change distance to projection plane for pannini and little planet projection modes. View controls
Camera has several settings allowing user to have a real custom experience. Zoom speed sets the zoom actions intensity and camera speed the repositioning velocity. Camera has a spring simulating physics when moving into the scene, to give user a strong natural feeling. Two important spring settings are exposed: damping and harshness. It’s also possible to set autorotation speed in degrees per second. Positive values makes it turn to the right and negative values to the left.
All these controls are also reachable by presets assigned on projection mode change. When user selects a projection mode, some predefined settings are automatically applied to the view presenting what we think is the most interesting scene. Then it’s up to the user to modify them to create his own view.



Kolor Eyes video player allows to set the projection mode. As any other controls, it’s available anytime during playing. Projection computation is done by graphical card and reaches a precision to the pixel. This means there is no distortion in image. 6 modes are today proposed by the player.

Projection orthographic This projection mode shows the spherical video. This means fields of view of 360×180°.
This projection mode is a standard lens. It’s the default mode. Projection rectilinear
Projection pannini Pannini is a large field of view planar projection that allows to display large field of view while keeping lines straight.
Little planet
Also called polar projection, everything is wrapped around a small ball. Projection little planet
Projection fisheye This mode corresponds to the projection given by a 180° fisheye lens.
Mirror ball
If you had a perfect spherical mirror ball, you’ll get this view. Projection mirror ball


More information

Kolor Eyes video player is at the moment at the demonstration level, and still evolving in our lab. If you’re interesting in this technology, in a futur product or if you wish to know more about this technology, please contact us with following form

  • Mike Hoover | Apr 17, 2011 at 20 h 38 min

    I am interested in hearing more about this technology. We currently use Autopano Giga and Panotour and we are wanting to do the “street view” kind of thing you are doing here. What are the requirements and how do we get the photos to snap while driving?
    Thank you in advance.

  • Eduard | Apr 19, 2011 at 10 h 45 min

    I am interested in your technology (Kolor Eyes)

  • zack | Apr 25, 2011 at 21 h 17 min

    what kind of hardware are you using to film such video?

  • Garrett | May 7, 2011 at 15 h 26 min

    The player is great, but I’d like to create the content and more information on the filming equipment required would help developers envision how they can use your player. The “immersive media” 360 camera is over $25,000 and they aren’t currently making them. Do you have other options because a still camera probably isn’t the tool used to capture 360 while moving.

    • Rami | May 10, 2011 at 9 h 29 min

      Hi Garrett,
      The only low-cost solution is currently to mount several GoPro cameras on a rig, and stitch the videos using a dedicated solution from Kolor.
      Maybe other solutions will come out in the next few months.

  • Thesing | Feb 25, 2012 at 12 h 18 min

    I don’t think Flash is the one that requires a lot of computing power, it’s the fact of decompressing and decoding a very complex data in real time called “Digital Video”, Flash makes transparent the hardware calls implementation for the developers, with swf to html5 converter you will need to deal with conversion of flash to html5 players by rendering a lot of hardware engines, then multi-platform apps will be a true headache for the developers, the same problem than always: HTML hacks for each browser but with a more complex technology: HTML5

  • Simon | May 15, 2015 at 2 h 47 min

    Very interested in this technology, please can we know more. We would like to embed 360 pano videos into a self hosted series of webpages on a local platform. Please can we have this HTML 5 player ASAP