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

v0.1.28

Published

2 years ago

ZealityVRPlayer

Downloads

0High
0Medium
0Low

bryandbor

Zeality

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 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme