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.

<head>
    <title>DeoVR Example</title>
    <link rel="stylesheet" type="text/css" href="https://s3.deovr.com/version/1/css/styles.css"/>
    <script src="https://s3.deovr.com/version/1/js/bundle.js" async></script>
</head>
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

<deo-video>
    <source src=”http://domain.com/video_720.mp4” quality=”720p”/>
    <source src=”http://domain.com/video_1080.mp4” quality=”1080p”/>
</deo-video>

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

quality=”720p”

Full example

<!doctype html>
<html lang="en">
<head>
    <title>DeoVR Example</title>
    <link rel="stylesheet" type="text/css" href="https://s3.deovr.com/version/1/css/styles.css"/>
    <script src="https://s3.deovr.com/version/1/js/bundle.js" async></script>
</head>
<body>
<deo-video>
    <source src=”http://domain.com/video_720.mp4” quality=”720p”/>
    <source src=”http://domain.com/video_1080.mp4” quality=”1080p”/>
</deo-video>
</body>
</html>

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

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

aspect=“10:9”

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

format

Defines a stereo-format of the video.

Accepted values: “TB” for top-to-bottom, “LR” for left-to-right, “mono” for monoscopic video.

format=“TB”

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

angle

Defines the field of view of the video

Accepted values: “180”, “360”.

angle=“180”

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

duration

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

Ex: “4800” is 1h 20m

duration=“3600”
title

Title of the video, displayed on pre-play.

title=“Your any title here”
cover-image

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

cover-image=“http://domain.com/cover.png”
loop

If specified video will be looped.

Full example

<deo-video width="1080"
            height="720"
            format="LR"
            angle="180"
            duration="4800"
            title="Motorcross Competition"
            cover-image="http://domain.com/cover.png"
            loop >
    <source src="http://domain.com/video_720.mp4" quality="720p"/>
</deo-video>
Content
<source>

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

<deo-preplay>

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=”http://domain.com/video.mp4” quality=”1920p”/>
    <deo-preplay custom>
        <div class=”custom-preplay-title”>
            My custom preplay
        </div>
    </deo-preplay>
</deo-video>

Result:

demo video