The <dl8-live-video> element lets users enjoy 360°/180° and regular live streams with the UI and features tailored towards the live use case. The element works much like a regular <dl8-video> tag and builds upon all of the existing video markup and API (see the <dl8-video> documentation).

The <dl8-live-video> element works with HLS and MPEG/DASH stream sources (see adaptive streaming) and supports optional history seeking. In the future this element will become even more specialized to the live streaming use case with features like multi-cam, live chat and WebRTC support.

 <dl8-live-video title="Example Live Stream" poster="poster.jpg" author="John Doe"
             format="STEREO_180_LR" seekable>
    <source src="example-hls.m3u8" type="application/x-mpegurl" />

seekable [optional]

A Boolean attribute; if specified users are able to seek back in time as far as the live stream is recorded and kept via the seeking bar. When clicking on the LIVE button users can jump back to the live broadcast.



The <dl8-video> element is a video player that can playback all kinds of different video content in VR as well as on desktop and mobile. From an API standpoint the element tries to mirror the native video element as closely as possible. Video sources are described by child elements <source> with an URI and a type (see MDN Docs for more information)

 <dl8-video title="Example Video" author="Jane Doe" format="STEREO_180_LR"
            poster="example.jpg" display-mode="inline" loop>
    <source src="example.mp4" type="video/mp4" />
    <source src="example.webm" type="video/webm" />

format="<string>" [mandatory]

Defines the mono or stereo format the video is provided in. Delight VR supports all common stereo/mono 360/180 equirectangular and spherical formats, as well as 2D flat video and stereoscopic 3D flat video.

  • STEREO_180_LR: A 180 degree stereo equirectangular mapping, left and right eye being side by side.
  • STEREO_180_LR_SPHERICAL: A 180 degree stereo spherical mapping, left and right eye being side by side.
  • STEREO_180_TB: A 180 degree stereo equirectangular mapping, left and right eye being on top and bottom respectively.
  • STEREO_180_TB_SPHERICAL: A 180 degree stereo spherical mapping, left and right eye being on top and bottom respectively.
  • STEREO_360_TB: A 360 degree stereo equirectangular mapping, left and right eye being on top and bottom respectively.
  • STEREO_360_LR: A 360 degree stereo equirectangular mapping, left and right eye being side by side.
  • MONO_360: A 360 degree mono equirectangular mapping.
  • MONO_FLAT: A monoscopic 2D flat video.
  • STEREO_FLAT_LR: A stereoscopic 3D flat video, left and right eye being side by side. The pixel aspect ratio follows the video aspect ratio.
  • STEREO_FLAT_LR_SQUARE: A stereoscopic 3D flat video, left and right eye being side by side. The pixel aspect ratio is square (1:1).
  • STEREO_FLAT_TB: A stereoscopic 3D flat video, left and right eye being on top and bottom respectively. The pixel aspect ratio follows the video aspect ratio.
  • STEREO_FLAT_TB_SQUARE: A stereoscopic 3D flat video, left and right eye being on top and bottom respectively. The pixel aspect ratio is square (1:1).

On top of that Delight VR supports custom fisheye distortions. To configure these custom distortions you first have to define the format with the following meta tag:

 <meta name="dl8-custom-format" content='{"name": "MY_CUSTOM_FORMAT","base":"STEREO_FISHEYE_LR","params":{"fov": 180, "magnification": 1.0 }}'>

The name then can be used on all relevant elements (format=”MY_CUSTOM_FORMAT”). The “base” attribute controls where the custom format extends its base functionality from. At the time of writing “STEREO_FISHEYE_LR” is the only custom base format. The most common use case is VR180 camera output (two side-by-side mounted wide-angle fisheye lenses) from live streaming cameras that output the raw feed and don’t encode the video in equirectangular. The base format has “fov” (field of view) and “magnification” as params.

loop [optional]

A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.

disable-3d-hud [optional]

A Boolean attribute; if specified the 3d hud for controlling videos in VR is disabled.

muted [optional]

A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played. Note that this attribute is deliberately unsupported on iOS devices. See Safari Developer Library for further details.

preload="<auto|metadata|none>" [optional]

Setting this attribute to “auto” (the default) informs the browser that video data should be prefetched when the page loads so that an optimal playback experience can be guaranteed once the user hits play. Note that this is only a preload hint for the browser. Each browser will interpret this hint as it sees fit. Some mobile browsers for example won’t prefetch any data to save bandwidth.

Setting to “metadata” only prefetches important metadata like duration and dimensions but not the actual video content.

Setting the attribute to “none” won’t prefetch any data before hitting play. Choose this option if minimum server traffic as well as conservation of your users bandwidth is more important in your use case than an optimal playback experience.

fps="<number>" [optional]

Specifies the frames per second that the video should playback. To avoid over- or undersampling please set this to the framerate of the video file. Setting a lower fps value may improve playback performance. The default is 30.

crossorigin="<string>" [optional]

Specify the CORS settings for the video. See the MDN documentation for more information on possible values and implications.

cors-fallback-url="<URL>" [optional]

Add this attribute with an URL as a value to the dl8-video element if your content is hosted on a different server but you want to fallback in case the users browser doesn’t support cross origin video (IE, Safari). Once the player encounters the CORS issue it will automatically redirect to that fallback URL and auto-open the Delight VR player on there. Therefore the URL should point to a special page where Delight VR is embedded and the videos are hosted from the same domain, if possible. If you don’t specify this attribute the user will just be presented with a message that CORS Video is not supported on Safari/IE. See the video caveats section for more information on CORS issues with videos.

cors-fallback-redirect-confirmation [optional]

This attribute determines what happens if the CORS fallback is triggered. If the boolean attribute “cors-fallback-redirect-confirmation” is set a confirmation prompt will be shown to the user asking him to confirm the redirect to the fallback URL. If nothing is set (the default) or the attribute is set to false the user will be automatically redirected.

cors-fallback-no-autostart [optional]

You can prevent autostart of the CORS fallback source by setting this attribute.

Progressive Streaming

Quality Selection

To define multiple qualities for your video you can add sources with different encodings and dimensions to the video element and flag them with the attribute “quality” like so:

 <dl8-video format="STEREO_180_LR">
    <source src="example-4k.mp4" type="video/mp4" quality="4k" />
    <source src="example-4k.webm" type="video/webm" quality="4k" />
    <source src="example-1080p.mp4" type="video/mp4" quality="1080p" />
    <source src="example-720p.mp4" type="video/mp4" quality="720p" />

The quality strings are freely definable and appear directly in the UI. Note that you can have multiple alternative sources for one quality like the “4k” quality in the example above. Also note that the order of qualities in the UI is dictated by the order of sources inside the video element; with the first source in the video element with its respective quality selected by default.

Additionally you can specify the “fps” and the “format” attributes for each source individually.

Desired Formats and Encoding

In general all notes on compatibility from regular HTML5 video elements also apply for the dl8-video element since it uses the in-built element internally (see caniuse.com for more information).


Regarding video encoding consider using the h.264 and webm video codecs because of their wide reaching support across browsers. For maximum compatibility provide both variants.


For maximum mobile compatibility you should provide videos with a maximum resolution of 1920×1080. In general it is wise to use dimensions that are power of two and don’t have extremely stretched aspect ratios (i.e. 2048×2048 for stereo over/under, or 2048×1024 for mono 360).

Adaptive Streaming

To use adaptive streaming you must provide at least one adaptive streaming <source> element on your <dl8-video> or <dl8-cinema> element. Depending on whether you want to use MPEG-DASH or HLS you would add different sources pointing to the manifest files:

For MPEG-DASH you provide an .mpd manifest file and set the type attribute to “application/dash+xml”.

For example:

<source src="path/to/your/dash.mpd" type="application/dash+xml" />

For HLS you provide an .m3u8 HLS playlist file and set the type attribute to “application/x-mpegurl”

For example:

<source src="path/to/your/hls.m3u8" type="application/x-mpegurl" />

We recommend to use MPEG-DASH and HLS streams if you want to go for maximum compatibility. Especially iOS/Safari do not support MPEG-DASH as of writing. Therefore you can add an HLS and MPEG-DASH source.

Be aware that the Cross-Origin issues on Safari and IE apply for adaptive streaming sources as well. (See also: Cross origin fallback).

Complete example (If you want to support both MPEG-DASH and HLS):

 <dl8-video format="STEREO_180_LR">
    <source src="path/to/your/dash.mpd" type="application/dash+xml" />
    <source src="path/to/your/hls.m3u8" type="application/x-mpegurl" />

Spatial Audio

To provide spatial audio playback in VR Delight VR supports the AmbiX Ambisonics format. AmbiX is based on first order ambisonics (FOA) which stores four spherical harmonics coefficients into 4 audio channels of a 5.1 audio source. For more information on how to produce, author and encode VR video with AmbiX audio please refer to our feature page.

To enable spatial audio via AmbiX just add the audio-format=”ambix” parameter to your AmbiX video source.

For example:

<dl8-video format="STEREO_360_TB">
    <source src="path/to/your/ambisonics-video.mp4" type="video/mp4" audio-format="ambix" />
    <source src="path/to/your/fallback-video-for-ios.mp4" type="video/mp4" />

Note that currently iOS is not able to decode video sources with multi-channel audio. If you want maximum compatibility between all platforms you therefore have to provide a fallback video source with a regular stereo track.

Seeking Preview Thumbnails

Delight VR is able to show preview thumbnails when the user hovers over the seeking bar on mobile, desktop as well as in VR. These give the user a rough overview of the content and can avoid unnecessary seeking. The player supports setting up preview thumbnails through sprite sheets as <dl8-video> sub elements.

Creating Preview Thumbnails

The first step is to setup a proper workflow for generating preview thumbnails from your videos. This is either done by your existing encoding service or manually by you.

Spritesheet Markup

After generating the thumbnails use declarative markup inside your <dl8-video> element to enable seeking previews. We use sprite sheets (a grid layout of multiple preview thumbnails) to save bandwidth and increase performance. Additionally to support longer video content each video can have multiple sprite sheets. To simplify the markup it is assumed that each thumbnail is sampled equidistant from the video. Here is a complete sample markup that uses three 5×5 sprite sheets that have an aspect ratio of 16 by 9:

<dl8-video format="STEREO_360_TB">
    <source src="example.mp4" type="video/mp4" />
    <dl8-video-preview-sprite frame-aspect="16:9">
        <dl8-video-preview-sprite-sheet src="S0.jpg" columns="5" rows="5" frames="25"></dl8-video-preview-sprite-sheet>
        <dl8-video-preview-sprite-sheet src="S1.jpg" columns="5" rows="5" frames="25"></dl8-video-preview-sprite-sheet>
        <dl8-video-preview-sprite-sheet src="S2.jpg" columns="5" rows="5" frames="11"></dl8-video-preview-sprite-sheet>

The default frame-aspect is “16:9”. The values colums=”5″, rows=”5″ and frames=”25″ are also the defaults. Note that columns*rows doesn’t have to equal frames. This enables sprite sheets that aren’t fully filled. This is especially important at the end of a thumbnail sequence.
Of course you can just use single thumbnail images instead of sprite sheets. For this you would need to set colums=”1″, rows=”1″ and frames=”1″ for each thumbnail.


Media Events

We offer an event API that is similar to the media events API (https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events) of the native HTML5 video element. To register for these events you need to call addEventListener on an <dl8-video> element that you’ve queried beforehand.

For example:

var element = document.querySelector("dl8-video") 
element.addEventListener('play', function() { console.log("play") })

Programmatic Actions

To control video playback via Javascript Delight VR offers the following APIs on the element.

Start playback:

var element = document.querySelector("dl8-video") 

Pause playback:

var element = document.querySelector("dl8-video") 

Seek video:

var element = document.querySelector("dl8-video") 
element.seek(t) // t is a number that represents the seeking time in seconds

Playback Info

Furthermore we export playback status properties from the underlying video element that help you programmatically control the playback flow in your application.

Get the video duration:

var element = document.querySelector("dl8-video") 
console.log("duration", element.duration)

Get the current playback time:

var element = document.querySelector("dl8-video") 
console.log("currentTime", element.currentTime)


  • Imprecise tracking on Android: On Android mobile chrome browsers < 50 users have to navigate to chrome://flags/#enable-experimental-web-platform-features and enable that setting to work around a bug in Android Chrome < 50, which had issues with tracking precise head orientations based on gyro data.
  • Cross origin issue on Safari and IE: Videos do not work on iOS and OSX Safari as well as Internet Explorer when the media file ist hosted on a different domain. See this post on Apple Developer Forums for a detailed discussion. We currently support a custom specified fallback URL that is presented to the user in that case. See the “cors-fallback-url” description for more details.
  • h.264 and Chromium: Currently the special WebVR enabled Chromium build that can be downloaded here can’t playback .mp4 videos with h.264 encoding. This is due to licensing issues with the codec and the free open source Chromium project. This issue will be resolved once WebVR lands in Chrome. For now try to always provide .webm encoded videos as alternative sources with your video elements as they will playback in Chromium.
  • NPOT video textures in Chrome/Android: Currently there is an issue with video textures in Chrome on Android that are non power of two. Here video data is not decoded/sampled correctly which results in low resolution and/or pixelated appearance. For maximum compatibility and best VRAM usage try to keep video resolution at power of two sizes like 2048×2048 or 4096×2048.
  • IE11 video resolution: The h.264 video decoder used in Internet Explorer 11 decodes a maximum resolution of 1920×1088 pixels. Videos bigger than that throw an error.



Customizing the color scheme of Delight VR can be done globally per HTML document via the use of meta tags. This enables you to easily customize the appearance of the player to match your corporate identity.


    <!-- Color scheme customization -->
    <meta name="dl8-customization-primary-color" content="#00e573">
    <meta name="dl8-customization-secondary-color" content="#000090">

    <!-- White label customization -->
    <meta name="dl8-customization-brand-name" content="Company Name">
    <meta name="dl8-customization-brand-logo" content="company-logo.svg">
    <meta name="dl8-customization-brand-watermark-logo" content="watermark-logo.svg">
    <meta name="dl8-customization-brand-url" content="http://...">


Defines the primary color of the Delight VR theme. Bright, saturated and memorable colors work best because it is used as the main accent and highlight color. The value is an RGB hex string.


Defines the secondary color of the Delight VR theme. It is mainly used to complement the strong accent color as a slightly darker muted background tone and to style secondary buttons and headlines. The value is an RGB hex string.


Defines the name of your brand or company. It appears in several interfaces like the wizard and some dialogs. The default is the standard Delight VR brand name.


Defines the logo of your brand or company. It appears in the top right in the embed and top left inside the viewer when no custom watermark logo is present. Logos with clear silhouettes in lighter tones work best. The width should be around 32 to 90 pixels and the height should not exceed 32 pixels. Consider using vector graphics files (.svg). The default is the Delight VR logo.


Defines the watermark brand logo of your brand or company. It appears in the top left corner inside the viewer and should be roughly squared in size. Logos with clear silhouettes in lighter tones work best. The width and height should be around 32 pixels. Consider using vector graphics files (.svg). The default is the Delight VR watermark logo.


Defines the URL of your brand or company. By clicking the brand logo users are guided to the given brand URL. The default is the Delight VR website.


Add this meta tag if you don’t want the brand logo to appear in the embed.


Add this meta tag if you don’t want the watermark to appear in the player.


Add this meta tag if you don’t want the content type badge in the embed to appear in the bottom left corner.


Add this meta tag if you don’t want the compass to appear on the right side.


This meta tag hides the VR button displayed in the bottom right corner of the player UI.


This meta tag hides the settings button displayed in the bottom right corner of the player UI.


This meta tag hides the fullscreen button displayed in the bottom right corner of the player UI.


This meta tag hides the video player control bar at the bottom of the player UI. This includes the seeking bar, sound control, time and duration labels.


This meta tag hides the title at the top of the player UI.


This meta tag disables the wizard when entering VR mode.


This meta tag is used to force a 1:1 resolution of the device instead of using the default optimized resolution for Android devices.

Common API

Common API

All Delight VR HTML elements are prefixed with “dl8-” and share a common API that, like with standardized HTML elements, is exported as attributes on the element. The following attributes are common amongst all Delight VR elements:


Defines the display mode behavior when the play button on a given content embed element is pressed. Due to minimal screen estate and good responsive practises the display-mode=”inline” attribute always defaults to “fullscreen” on mobile devices. If you want to explicitly change that behavior you can set the display-mode to “force-inline”. The default display-mode is “inline”.

Possible values: inline fullscreen force-inline

width="<css-value>" [optional]

The width of the embed element. Enter any valid CSS value such as 100%, px, rem and so forth. When left blank the other two dimension attributes “height” and “aspect” take precedence. When none of the three dimension attributes are given, width is set to 100% to completely fill the parent.

height="<css-value>" [optional]

The height of the embed element. Enter any valid CSS value such as 100%, px, rem and so forth. When left blank the other two dimension attributes “width” and “aspect” take precedence.

aspect="<string>" [optional]

The aspect ratio of the embed element. The aspect is given as a string value in the format “w:h”. The default is “16:10”.

poster="<uri>" [optional]

Defines a fallback image that is displayed as a default before initializing or playing any content. It can be any valid URI that points to an image. You an use any image format you would normally use as an image in the web. The default is the plain secondary dark color, which is part of the theme (also see Customization).

title="<string>" [optional]

Defines the content title string that appears on the embed and in the Delight VR player HUD on the top of the content. The default is no title. For the title to be readable on all screen sizes you should keep it under 50 characters if possible.

author="<string>" [optional]

Defines the content’s author as a string that appears on the embed below the title of the content. The default is no author.

author-href="<string>" [optional]

Defines the url to the author’s website. The user can access this link by clicking on the author text. Note that the author-href isn’t visible without the user supplying an author. The default is no author-href.

start-lat="<number>" [optional]

Defines the camera’s starting angle latitude in degrees. The default is 0 degrees.

start-lon="<number>" [optional]

Defines the camera’s starting angle longitude in degrees. The default is 0 degrees.

focal-length="<number>" [optional]

The camera’s starting field of view. The smaller the focal length the wider the lens. The unit of focal length is mm. The default is 15 mm.

min-focal-length="<number>" [optional]

The camera’s minimum field of view. The smaller the focal length the wider the lens. The unit of focal length is mm. The default is 10 mm.

max-focal-length="<number>" [optional]

The camera’s maximum field of view. The smaller the focal length the wider the lens. The unit of focal length is mm. The default is 80 mm.

preferred-controls="<string>" [optional]

The preferred camera control mode. Defaults to “MAGIC_WINDOW_CONTROLS”.


drag-controls-damping="<number>" [optional]

The higher the value the more the drag control camera floats before coming to a halt. The attribute accepts ranges between 0.025 and 0.2. The default is 0.1

disable-scroll-capture [optional]

This attribute disables capturing of scroll events on content element.

disable-touch-capture [optional]

This attribute disables capturing of touch events on content element.

disable-mouse-capture [optional]

This attribute disables capturing of mouse events on content element.

disable-vertical-touch-dragging [optional]

Adding this attribute to a content element vertical touch-dragging and only allows touch-dragging on the horizontal-axis.

disable-vertical-mouse-dragging [optional]

Adding this attribute to a content element vertical mouse-dragging and only allows mouse-dragging on the horizontal-axis (non-mobile devices).

autostart [optional]

A boolean attribute that automatically starts the element with the attribute in the player. Video content with the autostart attribute is muted by default.

disable-tap-to-unmute [optional]

Use this attribute on an element with the autostart attribute to prevent the default mute behaviour.

autostart-vr [optional]

Automatically start the content element in VR mode by providing this attribute.

Programmatic Actions

To control the player embed via Javascript Delight VR offers the following APIs on the element. This can be used for example for starting the player automatically after the site is loaded.

Start player:

var element = document.querySelector("dl8-video") 

Exit player:

var element = document.querySelector("dl8-video") 

Update dimensions:

var element = document.querySelector("dl8-video") 

You can call this function on the element to trigger a size recalculation. This is especially useful when the visibility of the element changes. The player updates the dimensions according to the new DOM state.

Programmatic Events

Delight VR offers some custom events that you can listen to. These are useful when you need detailed insights into the player lifecycle and want to trigger certain logic after detecting them:

x-dl8-evt-ready‘ (all player resources have been initialized):

document.addEventListener('x-dl8-evt-ready', function () { 
  // when DOM is also loaded you are good to call Delight VR element APIs like .start()

x-dl8-evt-loading-started‘ (content loading started)  :

document.addEventListener('x-dl8-evt-loading-started', function () { 
  // resource loading has been started
  // for example after the user presses the play button on the embed 

x-dl8-evt-loading-progress‘ :

document.addEventListener('x-dl8-evt-loading-progress', function (t) { 
  // resource loading has progressed
  // the 't' param indicates the progress from 0.0 to 1.0  

x-dl8-evt-loading-finished‘ (content loading finished)  :

document.addEventListener('x-dl8-evt-loading-finished', function () { 
  // resource loading has finished

Getting Started


Delight VR enables you to seamlessly embed VR content into your existing web presence using only HTML markup and thus bridges the gap between VR and the Web. It is compatible with a wide range of HMDs and browsers across mobile and desktop.

Getting Started

At Delight VR we focus on bridging the gap between VR and the Web. Thus we chose to export all functionality of Delight VR through declarative custom-element based HTML markup. No JavaScript programming required. As an added benefit your content delivery strategies can remain the same: Host your own content and make it accessible in VR using Delight VR.

Import script tag

Getting started is as easy as adding our Delight VR loader script into the <head> of your website’s markup.

Once you have received your Delight VR product token, you will have a personalized script link for embedding into your site. Here’s your personal link:

<script src="//cdn.delight-vr.com/latest/dl8-[LICENSEKEY].js" async></script>

You can use either a semantic version in the script tag embed, or you can use the /latest/ tag to ensure you are always up to date. A version archive and changelog will be available here and made public through our mailings.

Use element

As soon as you’ve added the Delight VR loader script using your personalized token, all functionality will be automatically accessible via custom HTML elements, so that you can use the Delight VR elements to declare your content.

Here is an example of what a typical custom element for video could look like

<dl8-video title="Example Video" author="Jane Doe" format="STEREO_360_LR">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />

Complete example

Here is a complete working example of a minimal HTML page with a test image embedded. Just be sure to replace [LICENSEKEY] with your personal token if you use this as a starting point for your own page.

<!doctype html>
<html lang="en">
  <title>Delight VR Example</title>
  <script src="//cdn.delight-vr.com/latest/dl8-[LICENSEKEY].js" async></script>
    title="Test Image"
    author="Delight VR"

This is what the embed would look like on your page: