- DeoVR User
- DeoVR Developer
- WebVR Player
- Documentation
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.
<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. Use MKX200, MKX220 or VRCA220 presets when you edit video in fisheye format from ZCAM cameras.
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="1080px"
height="720px"
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 and custom pre-play
<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.
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"
<deo-video-preview>
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.
Attributes:
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)
<deo-ads>
This tag serves as a container, where the configuration for different methods of advertisement display is stocked. Currently only one method is available:
<deo-banner>
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.
Attributes:
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.
<deo-preplay>
Pre-play is a default state of player which contains title and video length.
<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:
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.
DEO.initialize(element)
Initializes dynamically created <deo-video>/<deo-hub>. Takes one of these HTML elements as an argument.
DEO.start(element)
Starts the player
DEO.play(element)
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).
DEO.pause(element)
Stops video playback. Argument stays the same as of DEO.play(..).
DEO.mute(element)
Mutes video playback. Argument stays the same as of DEO.play(..).
DEO.setVolume(element, volume)
Sets the volume of a played video.
FIrst argument is the same as of DEO.play(..). Second argument is a number from 0 to 1.
DEO.isStarted(element)
Returns 'true' if player is started, else 'false'
DEO.isInitialized(element)
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 - https://deovr.com/encodings
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.
After this, you should see the embedded video from DeoVR on your web page.