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

DeoVR WebVR hub documentation

Basic Hub example

Contents and the method of displaying of <deo-hub>, as well as of <deo-video>, are determined by its attributes and subsidiary elements.

Attributes of <deo-hub>

cover-image, width, height, aspect

the same as <deo-video>

spacing

spacing between elements (widgets) of the hub. A number between 0 and 0.2, 0.05 by default

content-height

height of widgets by default (where applicable) in metres. A number between 1 and 3. 2 by default

content-offset

displacement of the attributes in a cylindrical coordinate system. Valid value: X, Y.
X — angular displacement (in radians), Y — vertical displacement (in metres)

Widgets of <deo-hub>

The hub contains the set of widgets.

Common attributes of the widgets

position

widget’s position in cylindrical coordinates, valid value: X, Y.
X -- angular coordinate (in radians), Y — vertical coordinate (in metres)

aligned-to

widget copies the position in space of given widget. Value: string, ID of any other widget.

If neither position nor aligned-to are set, widgets are lined up:

offset

displacement of the widget in a cylindrical coordinate system. Used as a last resort at any method of choosing the position (either position or aligned-to)

content-height

has the same value as attribute ‘content-height’ of <deo-hub>, but used only for the widget for which it is set

Widget <deo-grid>

The major element of the hub: the grid of thumbnails, by clicking which the video is played

Attributes

columns, rows

a number of columns and rows in the grid. Valid value: integer

aspect

aspect ratio of the thumbnails. Valid values: X:Y or X/Y

vertical

a bool value, which shows the direction of the scroll in the grid

content-provider

a path to the function which will provide the content to the grid. Accepts four arguments:filters, currentPage, itemsPerPage, callback.

Requests the information about content for the grid (either from the server or from local database — wherever you want), then calls for callback with one object-argument {literal}{totalPages, items}{/literal}, where totalPages is the total number of pages at the current configuration of filters with itemsPerPage thumbnails per page.

items

an array of objects which contain the information about the thumbnails. Each such object is represented with such forms:

{
    "cover-image": "https://s3.deovr.com/images/100.png", // string, url to cover image
    "angle": "180", // number, fov of the video
    "format": "LR", // string, format of the video (LR, TB, mono)
    "flat": "false", // boolean, is video flat or stereo
    "title": "Kings And Swords", // string, title of the video,
    "src": [
      {
        "url": "https://s3.deovr.com/videos/h264/100_1080p.mp4", //string, url to video file,
        "quality": "1080p", // string, example: 1920p
        "mimeType": "" // string
      },
      {
        "url": "https://s3.deovr.com/videos/h264/100_1440p.mp4",
        "quality": "1440p",
        "mimeType": ""
      },
      {
        "url": "https://s3.deovr.com/videos/h264/100_1920p.mp4",
        "quality": "1920p",
        "mimeType": ""
      }
    ]
}

 

An Example of 'content-provider':

window.contentProviderFunction = (filters, currentPage, itemsPerPage, callback) => {
    fetch(API_URL, ...)
        .then(response => response.json())
        .then(body => {
            callback({
                totalPages: body.totalPages,
                items: body.items
            });
        });
}

// Somewhere in HTML

<deo-grid content-provider="contentProviderFunction" … ></deo-grid>

Widget <deo-list>

Interactive list, which is used as a filter or categorisator for <deo-grid>

Subsidiary elements

Contains the elements of <li>, which set the meaning of each element of the list. These values will be used in filters in content-provider (see <deo-grid>)

Attributes

title

The heading of the list, string

filter

string, the name of the filter. Will appear in array filters in content-provider (see <deo-grid>)

attached-to

string, id of the grid, which will be filtered with this list

Widget <deo-paginator>

A convenient paginator for <deo-grid>

Attributes

attached-to

grid, which will be flipped through using this paginator

Widget <deo-img>

Widget, which helps to include the images in the hub

Attributes

src

string, image file url

scale

a scale of a picture, positive number

onclick

name of the function which will be called upon clicking on the image

Widget <deo-spacer>

Widget, which allows you to make indentations between other widgets

Attributes

width

a number from 0 to 2

Other Content of <deo-hub>

<deo-preplay>

Everything is totally similar to the same element from <deo-video>

<deo-video>

Everything is totally similar to the same element from <deo-video>
<deo-video> included inside the <deo-hub> allows you to run DeoVR in player mode with the ability to switch to the hub

 

An Example of Hub Creation

For example, we want to create such hub:

<deo-video>

Everything is totally similar to the same element from <deo-video>

First, we put the major element of the hub somewhere on the page and give it the necessary attributes.

<deo-hub width="100%"
         aspect="16:10"
         cover-image="/images/hub_cover.png">
</deo-hub>

 

Then, we create widgets.
Let’s start with creating the most important thing – the grid:

<deo-grid
        id="main-grid"
        aspect="16:10"
        columns="4"
        rows="3"
        content-provider="contentProviderFunction">
</deo-grid>

 

Then we make filters for the grid:

<deo-list
        title="Genres"
        filter="genres"
        attached-to="main-grid">

        <li>Comedy</li>
        <li>Action</li>
        <li>Fantasy</li>
</deo-list>

<deo-list
        title="Actors"
        filter="actors"
        attached-to="main-grid">

        <li>Indiana Jones</li>
        <li>Arnold Schwarzenegger</li>
        <li>Jackie Chan</li>
</deo-list>

 

All that’s left is to create a logo and a paginator and to put them above and below the grid respectively. To do that, we should use attributes aligned-to and offset:

<deo-img
        src="/images/hub_logo.png"
        aligned-to="main-grid"
        offset="0, 1.25">
</deo-img>

<deo-paginator
        attached-to="main-grid"
        aligned-to="main-grid"
        offset="0, -1.25">
</deo-paginator>

 

The full code of the example:

<deo-hub
        width="100%"
        aspect="16:10"
        cover-image="/images/hub_cover.png">
    <deo-list
            title="Genres"
            filter="genres"
            attached-to="main-grid">
        <li>Comedy</li>
        <li>Action</li>
        <li>Fantasy</li>
    </deo-list>

    <deo-grid
            id="main-grid"
            aspect="16:10"
            columns="4"
            rows="3"
            content-provider="contentProviderFunction">
    </deo-grid>

    <deo-list
            title="Actors"
            filter="actors"
            attached-to="main-grid">
        <li>Indiana Jones</li>
        <li>Arnold Schwarzenegger</li>
        <li>Jackie Chan</li>
    </deo-list>

    <deo-img
            src="/images/hub_logo.png"
            aligned-to="main-grid"
            offset="0, 1.25">
    </deo-img>

    <deo-paginator
            attached-to="main-grid"
            aligned-to="main-grid"
            offset="0, -1.25">
    </deo-paginator>

</deo-hub>