Built-in VR Player

GizmoVR Contains a built-in VR player for easy playback of VR content.

Launching the player

Use the following code to launch the video in the player

GizmovrApi.openVideo({url: 'https://sample.gizmovr.com/videoinfo'})

This command will launch GizmoVR Video Player in full-screen mode, the configured layout is not displayed in this mode.

https://sample.gizmovr.com/videoinfo contains meta information for the video, the format of which is described below

The demo: https://sample.gizmovr.com/video/

Data format for VR Player

The player can send both meta data with the format and the URL where this data is stored.

Format description

• apiType* - type of API used, required field. Can take the following values:
  • YOUTUBE - used for opening YouTube videos
  • GIZMO - default
  • LIVE - for a special live scan
• id* - an unsigned integer for on-site video identification, required field
• sources* - an array of structures with video sources. Source video structure contains the following fields:
  • id - source ID, not in use
  • title - quality option, e.g. "720p"
  • bitrate - bitrate
  • downloadUrl - download URL
  • fps - frames per second
  • size - size in bytes
  • url* - URL for playback
  • audioUrl - URL for separate audio track
  • width - the width of the frame
  • height - the height of the frame
  • codec - name of the codec used for video compression
  • profile - codec profile
  • profileLevel - profile level
• title - video title displayed in the player
• durationSeconds - video duration time in seconds, an integer
• imageTimeline - structure with frame preview data
  • url - image URL (.jpeg or .png)
  • rows - row quantity
  • cols - column quantity
• imageThumb - video preview frame (thumbnail)
• ads - structure with advertiser info
  • url - URL to go to after clicking ad button
  • title - text on ad button
• nextVideoUrl - URL for getting data structure (JSON format) for the next video
• prevVideoUrl - URL for getting data structure (JSON format) for the previous video
• format - video format data structure
  • framePacking - video frame packing. Can take the following values:
    • LR - left to right (side-by-side)
    • TB - top to bottom (over-under)
    • NONE - non-stereo video
  • angle - screen viewing angle. Can take the following values:
    • 180 - spherical, 180° view
    • 360 - spherical, 360° view
    • FLAT - flat screen cinematic mode
    • CURVED - curved screen cinematic mode
• url - video page URL, not in use

Example of a json structure

{
    "apiType": "GIZMO",
    "id": 1,
    "title": "Ayutthaya - Easy Tripod Paint",
    "sources": [
    {
        "title": "720p",
        "fps": 24,
        "size": 6087845,
        "url": "https://sample.gizmovr.com/1.mp4",
        "downloadUrl": "https://sample.gizmovr.com/1.mp4"
    },
    {
        "width": 1920,
        "height": 960,
        "title": "960p",
        "fps": 60,
        "size": 302645172,
        "url": "https://sample.gizmovr.com/sample-960.mp4",
        "downloadUrl": "https://sample.gizmovr.com/sample-960.mp4",
        "bitrate": "20151155",
        "codec": "avc1",
        "profile": "High",
        "profileLevel": "41"
    },
    {
        "width": 2880,
        "height": 1440,
        "title": "1440p",
        "fps": 60,
        "size": 302859938,
        "url": "https://sample.gizmovr.com/sample-1440.mp4",
        "downloadUrl": "https://sample.gizmovr.com/sample-1440.mp4",
        "bitrate": "20165455",
        "codec": "avc1",
        "profile": "High",
        "profileLevel": "41"
    },
    {
        "width": 3840,
        "height": 1920,
        "title": "2k",
        "fps": 60,
        "size": 302990739,
        "url": "https://sample.gizmovr.com/sample-2k.mp4",
        "downloadUrl": "https://sample.gizmovr.com/sample-2k.mp4",
        "bitrate": "20174164",
        "codec": "avc1",
        "profile": "High",
        "profileLevel": "41"
    }
],
    "durationSeconds": 25,
    "imageTimeline": {
    "url": "https://sample.gizmovr.com/sprite.jpg",
        "rows": 1,
        "cols": 26
},
    "imageThumb": "https://sample.gizmovr.com/thumb.png",
    "ads": {
    "url": "https://gizmovr.com",
        "title": "GizmoVR"
},
    "nextVideoUrl": "",
    "prevVideoUrl": "",
    "format": {
    "framePacking": "NONE",
        "angle": "360"
},
    "url": "https://gizmovr.com/videos"
}

The demo: https://sample.gizmovr.com/video/

Starting a video with the current layout

GizmovrApi.setMedia({url: 'https://sample.gizmovr.com/videoinfo'})

Video format at https://sample.gizmovr.com/videoinfo, the same as described above

Events

The GizmoVR event system allows you to configure the behavior of your app depending on the player events

Demo of events: https://test-api1.gizmovr.com/events/ in the demo example, you can test the event system and call them. Also, when opening the GizmoVR app, the actual log of the player events can be viewed

Events that you can subscribe to:

• GizmovrApi.EVENT_GIZMO_READY
  is called when the built-in browser is ready to accept and process commands from JS
• GizmovrApi.EVENT_GIZMO_PLAYER_PLAY
  is called when the player enters the playback state
• GizmovrApi.EVENT_GIZMO_PLAYER_PAUSE
  is called when the player enters the pause state
• GizmovrApi.EVENT_GIZMO_PLAYER_HIDE
  is called when the player interface is hidden
• GizmovrApi.EVENT_GIZMO_PLAYER_SHOW
  is called when the player interface is displayed
• GizmovrApi.EVENT_GIZMO_BUFFERING_START
  is called when playback is paused and the video is buffered for playback
• GizmovrApi.EVENT_GIZMO_BUFFERING_END
  is called when video buffering ends and the player starts playback

App installation custom dialog

Setting up a custom application installation dialog

window.GizmovrApi.setCustomDialog(() => {
    alert('GizmoVR is not installed');
});

In this example we set a callback function that will be called if you need to install the GizmoVR app.