The <dl8-cinema> element lets users sit in a virtual cinema and watch regular 2D videos as well as 3D stereoscopic videos. The element works much like a normal video tag. You can define different sources with qualities as child elements to tell the element what video content to play on the cinema screen.

Whats special about the dl8-cinema element is that you can freely customize the room the user should sit in and where the virtual screen should be placed.

 <dl8-cinema title="Example Video" poster="poster.jpg" author="John Doe"
             room-format="STEREO_360_TB" room-src="cinema.png"
             format="MONO_FLAT" force-show-cinema>
    <source src="example.mp4" type="video/mp4" />
    <source src="example.webm" type="video/webm" />
 </dl8-cinema>

Defines the mono or stereo format the flat video playing on the screen is provided in. Delight XR supports all common 2D flat video and stereoscopic 3D flat video formats.

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

The room image src URI to use as the cinema. A stereoscopic image works best as it better establishes the room the user sits in. You can optionally provide room-src-left and room-src-right to separately define the image for each eye in VR.
Note that the virtual screen is always displayed in the front (negative z-axis).

Defines the mono or stereo format the room image is provided in. Delight XR supports all common stereo/mono 360/180 equirectangular and spherical formats.

• 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.
• STEREO_CUBEMAP: A 360 degree stereo cubemap. 6 sides horizontally for each eye. Please provide src-left and src-right for this format. This format is commonly exported from OctaneVR renderer.
• CARDBOARD_PHOTO: A photo taken with the Cardboard Camera App. This is typically a 360° equirectangular jpg with the left eye as the base image data and the right eye encoded in metadata.

Width of the cinema screen in meters. The default is 2.5 meters. Not that depending on the aspect of the video the actual width can be less than the given width.

Height of the cinema screen in meters. The default is 1.5 meters. Not that depending on the aspect of the video the actual height can be less than the given height.

Distance from the viewer to the cinema screen in meters. The default is 2 meters.

Relative horizontal translation of the screen. With this parameter you can fine tune the placement of the cinema screen in the room. The default is 0.

Relative vertical translation of the screen. With this parameter you can fine tune the placement of the cinema screen in the room. The default is 0.

The dl8-cinema element supports all additional <dl8-video> attributes like loop, muted, crossorigin and fps. You can see the dl8-video API for detailed information.

With the <dl8-tour> element you can effortlessly integrate an interactive tour consisting of multiple viewpoints and connected via so called portals in your website. The <dl8-tour> element is the root element and therefore the entry point for defining an interactive tour. It makes use of child elements to describe the actual tour images (or probes) as well as the portals that connect probes with each other. Thus it works much like any other nested DOM structure. The <dl8-tour> element follows the common Delight VR API. See below for an example and all tour specific attributes and child elements.

 <dl8-tour poster="poster.jpg" title="Example Tour 1" author="John Doe"
           start-probe-id="living-room">

    <dl8-tour-img probe-id="bathroom" title="Bathroom" format="STEREO_360_TB"
                  src="bathroom.jpg">
      <dl8-tour-portal to="living-room" lat="0" lon="270" distance="1.5"
                  title="Enter Living Room"></dl8-tour-portal>
    </dl8-tour-img>

    <dl8-tour-img probe-id="living-room" title="Living Room"
                  format="STEREO_360_TB" src="bathroom.jpg">
      <dl8-tour-portal to="bathroom" lat="0" lon="90" distance="1"
                  title="Go to Bathroom"></dl8-tour-portal>
    </dl8-tour-img>

  </dl8-tour>

Defines the id of the <dl8-tour-img> element that should be the starting point of the tour. This id must match one probe-id of a <dl8-tour-img> child element. If nothing is set the first <dl8-tour-img> will be the start of the tour.

The <dl8-tour-img> describes one of the probes the tour is comprised of. It has the following attributes that can be set:

A unique freely definable id within the scope of the <dl8-tour> that is used throughout the scope of the <dl8-tour> parent element to reference to this probe.

The image format that should be used for this specific probe. Please note that you can mix and match multiple format types for each of the defined <dl8-tour-img> elements that are part of the <dl8-tour> parent element. See the image element format API for further information.

The title string of the probe. This will be used as the player headline when viewing this probe and will further be used as the pop-over text on a portal, when hovered, and when the portal’s “title” attribute is not set.

The image src URI to use. You can optionally provide src-left and src-right to separately define the image for each eye in VR.

The angle in degrees of rotation of the probe around the y-axis (up-axis). This attribute can be used in case the probes comprising the tour were not completely aligned and the initial relative rotations of probes have to be adjusted. The default is 0 degrees.

With the <dl8-img> element you can display panoramic images in lots of different formats in VR as well as on desktop and mobile. The <dl8-img> element works much like any normal img tag. You mainly need to specify the src attribute and a format and you’re ready to go.

 <dl8-img src="image.png" poster="poster.jpg" title="Example Image 1"
          author="John Doe" format="STEREO_360_TB">
  </dl8-img>

 <dl8-img src-left="lefteye.jpg" src-right="righteye.jpg" poster="poster.jpg"
          title="Example Image 2" author="Jane Doe" format="STEREO_CUBEMAP">
  </dl8-img>

The image src URI to use. You can optionally provide src-left and src-right to separately define the image for each eye in VR.

We strive to support as many HMDs as possible with Delight XR. To make things accessible to the end-user we provide users with a wizard, enabling to configure the user’s HMD. Here is a list of all currently supported devices by Delight XR.

Through our Wizard and our predefined distortion database we support nearly any common Cardboard compatible headset on the market (i.e. Google Cardboard v1.0, Google Cardboard v2.0, Zeiss VR One and many more) on Android Phones as well as on iPhone.

Is fully supported including Daydream controllers with Chrome Android 59 and up.

Is fully supported in the Oculus Internet Browser (Internet Tab in Oculus Home) including full Gear VR Controller support.

Alternatively Samsung Internet from the Oculus Store can be used. Users will be prompted to enable WebVR automatically.

Finally any regular mobile browser can be used with the Samsung Gear VR in Cardboard mode with the Cardboard Enabler app.

All major desktop VR headsets are supported. Specifically Oculus Rift (CV1 and DK2) and HTC Vive with WebVR enabled browser (as of writing these are special WebVR builds of Chromium and Firefox nightly).

All major browsers and platforms are supported by Delight XR, in more detail:

• Recent versions of Chrome on Windows, OSX, Linux, Android, and iOS.
• Recent versions of Safari on OSX and iOS.
• Recent versions of Firefox on Windows, OSX, and Linux.
• Recent versions of IE 11 and Edge on Windows.

To ensure that the Delight XR experience is smooth for all users, here are some hints to consider when embedding Delight XR into your HTML.

• CSS styling: Due to it not being an iframe solution per-se CSS collisions can happen in rare instances, especially if global element styles are applied.
• Whitelabel logo CORS requirement: When using a brand logo and/or brand watermark logo, be sure to supply correct CORS headers on your remote server when serving the logos from a cross-origin domain to ensure the logos are displayed correctly in the VR controls. For maximum compatibility we recommend to host logos on the same domain or use a data-uri.

Customizing the color scheme of Delight XR 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.

 <head>
    ...
    <!-- 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://...">
    ...
  </head>

Defines the primary color of the Delight XR 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 XR 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.

All Delight XR 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 XR 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

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.

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.

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

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

Defines the content title string that appears on the embed and in the Delight XR 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.

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

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.

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

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

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.

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.

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.

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

Can be one of “MAGIC_WINDOW_CONTROLS” and “DRAG_CONTROLS”.

To control the player embed via Javascript Delight XR 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") 
element.start()

Exit player:

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

Delight XR 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 XR 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
}

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" />
 </dl8-video>

Defines the mono or stereo format the video is provided in. Delight XR 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 XR 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.

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

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.

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.

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.

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

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.

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.

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" />
 </dl8-video>

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.

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

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" />
 </dl8-video>

To provide spatial audio playback in VR Delight XR 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" />
</dl8-video>

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.

Delight XR 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.

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. For your convenience, we provide a bash script that you can use to generate Delight VR sprite sheets. It requires ffmpeg and ffprobe to be installed and should work in any POSIX like environment.

To create a default sprite-sheet for a video file called input.mp4 residing in your current working directory in a terminal, provided the tool is executable, you would call it like this:

./sprite-sheet-generator --input=input.mp4

Usage: ./sprite-sheet-generator.sh -i=,--input=<input-file>

Possible Arguments.
  -i=, --input=                 The input video file. (Mandatory)
  -f=, --frame_interval=        The interval between frames to snapshot. (Default is 90)
  -w=, --thumbnail_width=       The width in pixel of each thumbnail. (Default is 160)
  -r=, --sprite_sheet_rows=     The number of rows in each sprite sheet. (Default is 5)
  -c=, --sprite_sheet_columns=  The number of colums in each sprite sheet. (Default is 5)
  -F=, --format=                The VR format to use. (Default is MONO_FLAT)

The output of the tool is the Delight VR Sprite Sheet 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>
    </dl8-video-preview-sprite>
</dl8-video>

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.

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") })

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

Start playback:

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

Pause playback:

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

Seek video:

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

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 (< 11.1) 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.