Webplayer
Overview
The Netzyn WebPlayer provides for streaming a cloud app into a web page via either a browser app or a WebView embedded in another app. This is in lieu of using a platform native Netzyn Player app or library.
The Netzyn WebPlayer consists of a single javascript file, which is about 100KB in size. To use on a HTML page, include the javascript file, create a /div and initiate the single WebPlayer API. The WebPlayer will communicate to the Netzyn servers which will launch the desired cloud app. The cloud app will stream into the supplied div. The WebPlayer takes care of all interaction with the user, i.e. touch, mouse, keyboard, audio, etc.
API
The WebPlayer API consists of
NzPlayerWebBrowser(alt_name, webplayer_div, app, orientation, auth_id, user_id, future, playerStatus);
alt_name - leave blank
webplayer_div - the div of the webplayer
app - cloud app id
orientation - leave blank, not used currently
auth_id - authentication string provided by Netzyn
user_id - ID of current user
future - leave blank ( "" or '' )
playerStatus - callback function that takes a status param; may be null
callback function signature takes 2 params, integer, and status specific data
example callback signature :
function myCallbackFunction(statusID, statusData)
NzPlayerWebBrowserSendData(oidApp, oid1, param, data )
Send app specific data to cloud app
oidApp - NOT USED [set to '' or null]
oid1 - NOT USED [set to '' or null]
param - integer value associated with data
data - bases64 encoded data
API Callbacks
WebPlayer API callbacks are invoked if the playerStatus param passed to NzPlayerWebBrowser API is a valid function. The playerStatus has a signature of (statusID, statusData)
| StatusID | statusData | Description |
|---|---|---|
| NZWEBPLAYER_STATUS_UNSUPPORTED_BROWSER | null | User's browser is not supported |
| NZWEBPLAYER_STATUS_INVALID_TOKEN | null | Unable to authenticate auth_id passed to NzPlayerWebBrowser |
| NZWEBPLAYER_STATUS_INVALID_DIV | null | HTML div webplayer_div, passed to NzPlayerWebBrowser is not a valid element |
| NZWEBPLAYER_STATUS_NO_SERVER | null | Unable to establish connection with NZ server |
| NZWEBPLAYER_STATUS_NO_APP | null | Unable to launch app on server |
| NZWEBPLAYER_STATUS_WEBSOCKET_CLOSED | null | Websocket has closed |
| NZWEBPLAYER_STATUS_VERSION_MISMATCH | null | Browser webplayer's version not compatible with server |
| NZWEBPLAYER_STATUS_REST_ERROR | null | REST API error, app not launched |
| NZWEBPLAYER_STATUS_EXCESS_PACKET_LOSS | null | Significant network packet loss |
| NZWEBPLAYER_STATUS_RECVDATA | JSON data | Called when app specific data has been sent by cloud App |
Github Repository
The Netzyn WebPlayer repo provides sample code that can be used as a starting point for the actual implementations.
https://github.com/Netzyn/webplayer
In the repo are four directories: page, timer, launcher and ttg. Page and timer are web pages that display the cloud app either as the entire page (page) or portion of the page (timer). Launcher and TTG (Try the Games) are examples that use play and/or timer. To get started go to the repo's Releases page and download/untar the latest version and place on a web server. For the example launch lines below, the repo has been placed in a webplayer directory on the web server. Before you can use any of these, you need to obtain an auth id from Netzyn and place the auth_id in timer.html and page.html files. For most development timer.html is the file to copy and use as the basis for the webpage that displays the cloud app. The ttg.html file contains a table of valid app ids (url field) to test with. This is used for the app parm in timer/page and the app field in NZPlayerWebBrowser() API.
page/
A page that displays the cloud app covering the full page. It is invoked with a parm with the app name.
Example:
https://<server_url>/webplayer/page/page.html?app=draw
timer/
A page that displays the cloud app plus a tool bar. The toolbar contains a timer along with an install button. It is invoked with parms for the app name and a URL to launch when the Install button is clicked.
Example: https://
See complete URL parameters documentation below.
ttg/
A full featured example that uses timer above.
Example:
https://<server_url>/webplayer/ttg/ttg.html
launcher/
A simple example that uses both page and timer above.
Example:
https://<server_url>/webplayer/launcher/launcher.html
Timer Implementation
URL Structure
https://<server_url>/webplayer/timer/timer.html?app=<APP>&color=<COLOR>&text=<TEXT>&icon=<ICON>&orient=<ORIENT>&install=<ANDROID_URL>&install_ios=<IOS_URL>
URL Parameters
| Parameter | Required | Default | Description | Example |
|---|---|---|---|---|
app |
YES | - | App identifier for Netzyn player | app=fanduel |
color |
No | #000000 |
Background color (hex, URL-encoded with %23) |
color=%230066FF |
text |
No | "this app" |
App display name (URL-encoded) | text=FanDuel |
icon |
No | (hidden) | Icon image URL (HTTPS, publicly accessible) | icon=https://... |
orient |
No | P |
Orientation: P (Portrait) or L (Landscape) |
orient=P |
install |
No | Generic store | Android install URL (Google Play Store) | install=https://play.google.com/... |
install_ios |
No | Generic store | iOS install URL (Apple App Store) | install_ios=https://apps.apple.com/... |
Parameter Details
color - Background Color
- Format:
%23+ 6-digit hex code (e.g.,%230066FFfor blue) %23is the URL-encoded#symbol- Text color automatically adjusts for readability:
- Light backgrounds → Black text
- Dark backgrounds → White text
Examples:
- Blue: color=%230066FF (white text)
- White: color=%23FFFFFF (black text)
- Green: color=%2376BC21 (black text)
text - Display Name
- Shows as: "Swipe up to try [TEXT]"
- URL-encode spaces and special characters:
- Space →
%20 &→%26
Examples:
- text=FanDuel
- text=H%26R%20Block → "H&R Block"
- text=Candy%20Crush → "Candy Crush"
icon - App Icon
- Appears on welcome screen and countdown
- Requirements:
- Format: PNG (recommended) or JPG
- Size: Minimum 250x250px, recommended 512x512px
- Must be publicly accessible via HTTPS
- If not provided: Icon hidden (no broken images)
orient - Orientation
P= Portrait (phone vertical)L= Landscape (phone horizontal)- If wrong orientation detected: Shows "rotate device" prompt
install & install_ios - App Store Links
install: Android/Google Play Store URLinstall_ios: iOS/Apple App Store URL- Device auto-detects and shows correct link
- Use attribution URLs to track installs
Complete Examples
Example 1: FanDuel (All Parameters)
https://<server_url>/webplayer/timer/timer.html?app=fanduel&color=%230066FF&text=FanDuel&orient=P&icon=https://<server_url>/icons/fanduel.png&install=https://play.google.com/store/apps/details?id=com.fanduel.sportsbook&install_ios=https://apps.apple.com/us/app/fanduel-sportsbook-casino/id1413721906
Example 2: H&R Block (with brand colors)
https://<server_url>/webplayer/timer/timer.html?app=hrblock&color=%2376BC21&text=H%26R%20Block&orient=P&icon=https://<server_url>/icons/hrblock.png&install=https://play.google.com/store/apps/details?id=com.hrblock.tax&install_ios=https://apps.apple.com/us/app/hr-block-tax-prep-file-taxes/id392125409