Basic example
  • Comedy
  • Action
  • Fantasy
  • Indiana Jones
  • Arnold Schwarzenegger
  • Jackie Chan
  • 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
    <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.

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