DeoVR WebVR/WebXR player is no longer updated and might be deprecated at any moment of time.

DeoVR WebVR video documentation

Basic example

Basic video integration

1. Import script tag

Getting started is as easy as adding DeoVR script into the <head> of your website’s markup.

Please add async parameter.

    <title>DeoVR Example</title>
    <link rel="stylesheet" type="text/css" href=""/>
    <script src="" async></script>


2. Use element

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

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

    <source src="" quality="720p"/>
    <source src="" quality="1080p"/>

Don’t forget to specify quality of each resolution, this will improve user experience and quality of playback


Full example

<!doctype html>
<html lang="en">
    <title>DeoVR Example</title>
    <link rel="stylesheet" type="text/css" href=""/>
    <script src="" async></script>
    <source src="" quality="720p"/>
    <source src="" quality="1080p"/>

By default all videos will be played as 180° stereo left-to-right, if format is not specified.

That's it for a basic integration!


Configurable attributes

width, height

Width and height of video player on the page. Valid parameter: any css-valid string.

width="1080px" height="720px"

If there is not enough information about dimensions, default fallback is 100% width and 16/9 aspect ratio.


Aspect ratio of a video block, ignored if width and height specified.

Possible values : x:y, x/y. X and Y must be positive integers. Ex: 16/9, 1:1, 4:3


If not defined, aspect is 16:9 by default.


Defines a stereo-format of the video.

Accepted values: "TB" for top-to-bottom, "LR" for left-to-right, "mono" for monoscopic video. Use MKX200, MKX220 or VRCA220 presets when you edit video in fisheye format from ZCAM cameras.


By default all videos will be played as 180° stereo left-to-right, if format is not specified.


Defines the field of view of the video

Accepted values: "180", "360".


By default all videos will be played as 180° stereo left-to-right, if format is not specified.


Length of video in seconds, displayed on pre-play.

Ex: "4800" is 1h 20m



Title of the video, displayed on pre-play.

title="Your any title here"


Image that is displayed as a cover on pre-play. Any filetype compatible with modern browser: png, jpeg, gif, etc.



If specified video will be looped.

Full example

<deo-video width="1080px"
            title="Motorcross Competition"
            loop >
    <source src="" quality="720p"/>

Content and custom pre-play


With this tag you point to video file links.
src — exact link to the file
quality — quality of video: 720p, 1080p and etc.

To use HLS, a link to m3u8 playlist should be put into ‘src’ field, while value "application/x-mpegurl" should be put into field ‘mimeType’. Same goes for MPEG-DASH, but extension of playlist should be *.mpd, and ‘mimeType’ is "application/dash+xml"


This tag is used to add a preview when rewinding a video. Preview is a sprite-sheets with still frames of video cut at regular intervals.

aspect — ratio of sides for preview (accepted values: X:Y)

Preview contains one or more <deo-spritesheet> with following attributes:

src — link to a sprite-sheet with frames (string)
columns, rows — number of columns and rows of frames, must be a positive integer
frames — number of frames in (positive integer, by default columns * rows)
frameWidth, frameHeight — width and height of every shot in a spritesheet (a positive number each)


This tag serves as a container, where the configuration for different methods of advertisement display is stocked. Currently only one method is available:


Appears during pause in flat mode and during the opening of the control panel in VR. If there are more than one <deo-banner>, they will change each other repeatedly.

thumb – a link to square or nearly square image
title – title of the banner
text – text of the banner
url – link, which needs to be opened after a click on the banner

All the attributes are necessary.


Pre-play is a default state of player which contains title and video length.

demo video

<deo-preplay custom>

If "custom" is present, default pre-play is turn-off. You can use your custom ple-play design instead.

Example of custom pre-play

// Somewhere in css

.custom-preplay-title {
    position: absolute;
    border: 3px solid white;
    font-size: 20px;
    padding: 5px 8px;
    top: 16px;
    left: 16px;
    font-weight: 500;
<!-- Somewhere in HTML -->

<deo-video format="LR" angle="180">
    <source src="" quality="1920p"/>
    <deo-preplay custom>
        <div class="custom-preplay-title">
            My custom preplay


demo video

Create or control the player from JS

Object DEO is used to control the process of creation of the player as well as video playback in window. There are several functions in it.


Initializes dynamically created <deo-video>/<deo-hub>. Takes one of these HTML elements as an argument.


Starts the player

Starts or continues video playback. Takes <deo-video> or <deo-hub> as an argument (one of them which is being played; otherwise won’t work).


Stops video playback. Argument stays the same as of


Mutes video playback. Argument stays the same as of

DEO.setVolume(element, volume)

Sets the volume of a played video.

FIrst argument is the same as of Second argument is a number from 0 to 1.


Returns 'true' if player is started, else 'false'


Returns 'true' if the player is initialized and ready to start, else 'false'

element.addEventListener(eventType, callback)
element.removeEventListener(eventType, callback)

Potential types of events:

"initialize" — during the initialization after the loading of the page or after DEO.initialize(element) fetching
"start" — after user starts the player or after DEO.start(element) fetching
"play" — each time when the player starts or resumes the reproduction
"pause" — each time when the player pauses
"end" — when the video finishes

DeoVR WebXR resolution codec test

Visit this page -

How to Embed Video

To embed a DeoVR video into your web page, go to the video page on DeoVR and click the share button below the video. In the section that appears, select 'HTML code', copy the code and paste it into the HTML of your web page.

embed video

After this, you should see the embedded video from DeoVR on your web page.

Embedded regular video

Embedded Premium video

Over 4,700 free videos for your VR headset
Don’t miss out on new videos - log in now and subscribe