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

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.

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

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

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

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

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

This attribute disables capturing of scroll events on content element.

This attribute disables capturing of touch events on content element.

This attribute disables capturing of mouse events on content element.

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

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

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

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

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

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") 
element.start()

Exit player:

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

Update dimensions:

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

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.

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
}