• krpano 1.18 News
• krpano 1.18 Release Notes
• krpano 1.18 Download

Panoramic Video support for HTML5 (WebGL)

• Using videos as panoramic image is now supported also in the krpano HTML5 viewer.
• Depending on the system, the browser and the graphics hardware the video-playback can be much smoother and faster with HTML5 than with Flash.
• Another nice feature of the HTML5 support is the 'free seeking' (or also called 'pseudo-streaming) - this makes it possible to seek within the video, even to parts that haven't already loaded yet. This can also be used to switch any time dynamically between several video files with different quality, resolution and bandwidth.
• Technically the HTML5 panoramic video support will be only available and usable on systems and browsers that are supporting WebGL and the usage of videos as WebGL textures. This presumes modern and fast GPUs and up-to-date operating systems, browsers and graphic card drivers.
  Systems that are basically supported are:
  • Desktop: Chrome, Firefox, Opera, IE11, Mac Safari 8
  • Android: Chrome, Firefox, Opera
  • iOS: iPhones and iPads with iOS 8.0 or higher - for the iPhone krpano has a very special kind of support - normally Apple doesn't allow to show a video not as fullscreen video, but krpano uses a trick to bypass this restriction.
  Not capable systems (like iOS before 8.0 or older Android browsers) still can play the videos as flat-panos (with zooming and panning support by custom xml code).
• From usage/xml perspective everything works basically just like in the Flash version. All interfaces are the same. All different panoramic projections (e.g. little planet, fisheye, pannini) and also all projection transitions (e.g. the spherical to flat transition) are supported and working the same in HTML5.
• Additionally there is a new panoramic video interface skin (videointerface.xml) and an improved videoplayer plugin to utilize the new possibilities. The new videointerface skin provides:
  • A layout for desktop, tablet and mobile devices.
  • A loading / seek bar with direct click-to and dragging seeking.
  • An extendible and customizable menu interface - used in the default skin for control changing (move, drag, gyro), video quality changing and a menu for different panoramic projections.
  • An alternative flat-pano display and control mode (zooming and panning) when panoramic videos are not supported by the browser (no WebGL or no Video-to-WebGL support).
• Some notes - please note that WebGL and WebGL+video is an emerging technology and so expect several browser and system related support-/rendering- or performance-problems. Here a list of known browser problems. The video to WebGL transfer is currently too slow in many browsers (especially in Safari). It would be surely possible to address and to improve these problems, but this would need to be done by the browser developers. The krpano WebGL rendering code itself is already highly optimized and very fast.

• krpano 1.18 Panoramic Video on an iPhone 6
• krpano 1.18 Panoramic Video on a Samsung Galaxy S5 (Android Chrome)

Spherical and cylindrical image support for HTML5 (WebGL)

• Because of the new panoramic video support, where the flat videos were rendered as spherical pano, the krpano HTML5 viewer supports now also the direct usage of spherical and cylindrical images as panos. Any kind of partial pano (via the hfov, vfov and voffset settings) is supported too.
• Using and rendering these images will be only possible when the browser is supporting WebGL. Even when supported now, such images should be used only for simplified or special usage cases. For the best image quality, the best rendering performance and the best multi-device, multi-browser support, the usage of cubical images would be still recommended.
• Currently only single, non-tiled, non-multires spherical or cylindrical images are supported. Support for tiled/multires images support will come with the next krpano versions.

Polygonal hotspot support for HTML5

• The polygonal hotspots are supported also in HTML5 now.
• Together with the new HTML5 support, the default colors and the way how the hotspots are working have been slightly changed (in Flash too) to provide more control (touch behavior) and more possibilities:
  • Now the colors / style of a polygonal hotspot will not change automatically on mouse hovering.
  • To change the colors on some user interaction (like mouse hovering), the onover and onout (or ondown and onup) events and the tween() action should be used now (the tween action can now change also colors).
  • For backward-compatibility the old automatic color changing on hovering and the old default colors are still supported in the Flash viewer, but only when the version number in the xml is lower than 1.18.
  • Because of technical reasons, the polygonal hotspots are always layered behind the image hotspots in HTML5.
• The polygonal hotspots are supported and working on all systems and browsers, but their rendering performance can be a bit reduced on older mobile/tablet devices in some cases.
• Examples:
  

showtext() support for HTML5

• There is a new 'xml-only' plugin that adds showtext() support also for HTML5: showtext plugin.
• Just include the plugin via:

  <include url="showtext.xml" />

  and the showtext() action will be available also in HTML5. The usage itself is the same as in Flash.
• The showtext xml plugin is based on the textfield plugin and some xml code and will override the build-in showtext() action. This way the same code can be used for Flash and HTML5 and the plugin itself is easier to maintain and to extend.
• The new showtext() action will work identically in Flash and HTML5, except for the effect settings - due basic technical differences, it's not possible to do exactly the same as in Flash, but the HTML5 viewer tries to emulate that setting as good as possible. But by using the new shadow/textshadow settings instead of the effects setting, it would be possible to achieve the same results in both viewers.
• The showtext.xml plugin provides additional <textstyle> settings:
  • css - add custom CSS settings
  • width, height - set fixed sizes instead of the automatic ones
  • vcenter - vertical centering within fixed heights
  • padding - custom padding settings
  • roundedge - rounded background edges
  • backgroundalpha - custom background color transparency
  • borderalpha - custom background color transparency
  • borderwidth - custom border line width
  • shadow, shadowrange, shadowangle, shadowcolor, shadowalpha
  • textshadow, textshadowrange, textshadowangle, textshadowcolor, textshadowalpha
  • embeddedfonts - enable the usage of embedded fonts (Flash only)
• Example: Showtext / Textstyles example

Contextmenu for touch devices + Customizable look/style

• The contextmenu is now (optionally) also available on touch devices - by pressing down for ~500ms without any movement the contextmenu can be opened.
• There are different default contextmenu styles - one for Windows and Linux, one for Mac and one larger-one for touch devices.
• Creating a custom contextmenu style is possible too, but only for HTML5 and without Branding Free License only for touch devices. For using a custom contextmenu style also on Desktop systems, the Branding Free License would be required.
• Customizing examples:
  

  The default Windows/Linux Contextmenu style The default Mac OSX Contextmenu style The default Mobile/Tablet Contextmenu style Windows 7 Native Look Contextmenu style

XML - Device checks for attributes

• Often it can be useful to be able to define a certain attribute only for a specific device. Currently this was only possible by defining an additional xml element and using the devices attribute. With version 1.18 it's now possible to do device checks directly at the attribute definition.
• This works by adding a dot

  .

  character at the end of the attribute name and by defining there on which devices this attribute should be used. For example:
  

  videourl.desktop="video.mp4|video.webm"

  videourl.mobile.or.tablet="video-small.mp4"

• The syntax:
  
  • Everything before the first dot belongs to the name of the attribute itself and everything after the first dot belongs to the device check.
  • All the same devices as in the devices attribute can be used for the device checking.
  • Mixing several devices via logical AND, OR and NOT operators is possible too, but because of the xml-character-limitations with a slightly different syntax:
    • An

      .and.

      can be used as AND operator to check if all given devices settings are matching (like the

      +

      character in the devices attribute).
    • An

      .or.

      can be used as OR operator to check if one of the given devices settings is matching (like the

      |

      character in the devices attribute).
    • A

      no-

      prefix before a devices setting can be used to check if the given devices setting is NOT set (like the

      !

      character in the devices attribute).
    • This new syntax can be used also in the devices attribute itself now.
  • Important to know: The order of xml-attributes is random and can differ each time! That means the order how the attributes were defined in the xml file don't need to be the same how they will be get loaded/parsed. Therefore never redefine attributes again with other devices settings that should override previous definitions!
    That means - DO NOT something like here:

    videourl="video.mp4"

    videourl.mobile="video-small.mp4"

    Correct would be:

    videourl.no-mobile="video.mp4"

    videourl.mobile="video-small.mp4"

• The documentation:
  http://krpano.com/docu/xml/#devicechecksforattributes
• Examples:
  

  scale.no-mobile="1.0" (the same as: scale.desktop.or.tablet="1.0")

  scale.mobile="0.5"

  url.flash="plugin.swf"

  url.html5="plugin.js"

  width.desktop="200"

  width.tablet="150"

  width.mobile="100"

  visible.fullscreensupport="true"

  visible.no-fullscreensupport="false"

  visible.html5.and.webgl.or.flash="true"

  visible.html5.and.no-webgl="false"

XML - Improved Actions / Scripting possibilities

• The if() action is supporting

  AND

  ,

  OR

  and

  !

  operators and

  (...)

  parenthesis now.
  Examples:

  if(var1 == 1 AND var2 == 2, ... );

  if(device.mobile OR device.tablet, ... );

  if(!anysetting, ... );

  if((num GT 1) AND (num LT 10), ... );

• Automatic running / starting <action> via the new autorun setting.
• The tween() action can now change several variables with one call and it can correctly tween/interpolate 32bit ARGB color values.
• The new callwith() action can be used to run actions or code within the calling context/scope of <layer>, <plugin> or <layer> elements - e.g. to call and run an event from such element.
• The new screentolayer(layer,sx,sy,lx,ly) and layertoscreen(layer,lx,ly,sx,sy) actions can be used to convert coordinates between the screen and a layer.
• New wheeldelta_touchscale variable for getting the relative scale from a zoom touch gesture. This can be used for scaling custom images via the mouse wheel or via touch gestures - example
• Other new actions: tohex(), tolower(), toupper(), clamp()

XML - Improved Layer / Container elements

• The container <layer> elements are now supporting borders, rounded edges and shadows (with several customizable options).
• There are min/max settings for the layer width and height. This can be useful when using percent values for the width or height settings and limiting their resulting pixel sizes.

Improved Gyroscope Support

• The gyroscope plugin supports now also Android Chrome / Opera, Android Firefox and Windows Phone 8/IE11.
• The Gyroscope sensor data in Android Chrome itself is still buggy, but when the device provides also acceleration and gravity-acceleration data, then the gyroscope plugin will be able to use that data to calculate and to simulate a proper gyroscope orientation.

More news...

• An embedded Youtube player example for Flash and HTML5.
• A simple Videoplayer example.
• Customizable languages for the Bing and Google map plugins.
• A new fps plugin (xml-only).
• Many detail improvements and fixes.
• Updated and improved documentations and examples.
• And many things more - please have a look at the Release Notes for more.
  

Zitat von »rey«

Still waiting for html5 multi-res object

Zitat von »JamesR«

However I can't get the sample panoramic videos to load in Chrome on my Samsung S5:
...
ERROR: parsing "../../plugins/videoplayer.js" failed: SyntaxError: Unexpected token <

Zitat von »chboggiss«

Really nice performance on Iphone 6! congratulations!

Zitat von »chboggiss«

I tried some video files It plays audio on desktop but I couldn't listen on the iphone!