Common API

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
}