@bryandbor/zeality-testing-package-feb-1 NPM

Zeality VR Player

Demo

You can find a demo of Zeality VR Player here

Examples

Complete HTML Example

<!DOCTYPE html>
<html>
<head>
  <!-- Your files are normally here -->
  <link href="https://unpkg.com/@bryandbor/zeality-testing-package-feb-1/umd/main.css" rel="stylesheet">
</head>
<body>
  <div id="zeality-player-container"></div> <!-- you will need a container to load the player into -->
  
  <script type="text/javascript" src="https://unpkg.com/@bryandbor/zeality-testing-package-feb-1/umd/@bryandbor/zeality-testing-package-feb-1.min.js"></script>
  <script type="text/javascript">
    (function() {
      // This code will run after the page has finished loading all resources
      // Store a reference to the HTML element that will act as the container for the ZealityVRPlayer
      var container = document.getElementById('zeality-player-container');
      // Initialize the ZealityVRPlayer
      var player = new ZealityVRPlayer({
        api_key: 'YOUR_API_KEY_HERE',   // your unique API key
        src: 'PATH_TO_360_SOURCE.mp4',  // path to your 360 file source
        container: container            // a single html element that will act as the container for Zeality VR Player
      });
    })()
  </script>
</body>
<html>

After all resources have loaded, initialize Zeality VR Player. Simple Video Initialization

var container = document.getElementById('zeality-player-container');
var player = new ZealityVRPlayer({
  api_key: 'YOUR_API_KEY_HERE',   // your unique API key
  src: 'PATH_TO_360_SOURCE.mp4',  // path to your 360 file source
  container: container            // a single html element that will act as the container for Zeality VR Player
});

Simple Photo Initialization

var container = document.getElementById('zeality-player-container');
var player = new ZealityVRPlayer({
  api_key: 'YOUR_API_KEY_HERE',   // your unique API key
  src: 'PATH_TO_360_SOURCE.jpg',  // path to your 360 file source
  imageOnly: true,                // instructs the player to load a photo instead of a video
  container: container,           // a single html element that will act as the container for Zeality VR Player
});

All options that can be passed to Zeality VR Player at initialization

var container = document.getElementById('zeality-player-container');
var player = new ZealityVRPlayer({
  /* Required properties */
  api_key: 'YOUR_API_KEY_HERE',       // your unique API key
  src: 'PATH_TO_360_SOURCE.mp4',      // path to your 360 file source
  container: container,               // a signle html element that will act as the container for Zeality VR Player
  
  /* Optional properties */
  /* Image properties */
  imageOnly: false,                   // Source file will be image rather than video
  
  /* Video properties */
  autoplay: false,                    // Start playing automatically without requiring user interaction
  muted: false,                       // Start the video
  volume: 1,                          // Starting video volume (0-1)
  lat: 0,                             // Starting vertical offset (between -85 and 85)
  long: 0,                            // Starting horizontal offset (between -180 and 180)
  
  unsupportedBrowserMessage: 'Your browser doesn't support this 360 content',
    // unsupportedBrowserMessage will be displayed to the user when their browser
    // does not support the requested content
    
  unsupportedBrowserLink: {
    label: 'Check Out Our App',   // Text of a link to be displayed to the user
    link: 'http://www.zeality.co/a',// URL to direct users with unsupported browsers
  },
});

API

Player initialization

/*
* Start the ZealityVRPlayer and insert it into your document
* @param {Object} options
*   @options.property {HTML Element} container (required)
*   @options.property {String} api_key (required)
*   @options.property {String} src (optional)
*     @options.property {Bool} imageOnly (optional)
*     @options.property {Bool} autoplay (optional)
*     @options.property {Bool} muted (optional)
*     @options.property {Number: 0 - 1} volume (optional)
*     @options.property {Number: -85 - 85} lat (optional)
*     @options.property {Number: -180 - 180} long (optional)
*     @options.property {String} unsupportedBrowserMessage (optional)
*     @options.property {Object} unsupportedBrowserLink (optional)
*       @options.unsupportedBrowserLink.property {String} label
*       @options.unsupportedBrowserLink.property {String} link
* @return {ZealityVRPlayer} newly created ZealityVRPlayer
*/
var player = new ZealityVRPlayer(options);

Play/Pause Player

/*
* Play ZealityVRPlayer's Video Source
* @return {NULL} n/a
*/
player.play();

/*
* Pause ZealityVRPlayer's Video Source
* @return {NULL} n/a
*/
player.pause();

play()/pause() are ignored if ZealityVRPlayer is not displaying a video

Change Source

/*
* Change the ZealityVRPlayer content source
* @param {Object} options
*   @options.property {String} src (required)
*   @options.property {Bool} imageOnly (required)
* @return {NULL} n/a
*/
player.setSrc(options);

Browser Support

Video Streaming

Browser	Version	Supported
Chrome	37+	Yes
Safari	10+	Yes
Firefox	47+	Yes
Internet Explorer	-	No
Edge	13+	Yes
Opera	-	No
Mobile
Mobile Safari (iOS)	-	No
Mobile Chrome (iOS)	-	No
Android Mobile Chrome	28+	Yes

Image Viewing

Browser	Version	Supported
Chrome	37+	Yes
Safari	10+	Yes
Firefox	47+	Yes
Internet Explorer	11+	Yes
Edge	13+	Yes
Opera	-	No
Mobile
Mobile Safari (iOS)	9	Yes
Mobile Chrome (iOS)	47	Yes
Android Mobile Chrome	28+	Yes