Getting Started

Overview

Video Canvas is a self-contained software solution designed for secure, scalable deployment within your own infrastructure. It is delivered as a static bundle of files (HTML, JS, CSS, media) that can be hosted on-premise or within your own cloud environment using any standard static file hosting solution, alongside a JavaScript SDK for integration into your application.

No user data is sent to external systems. All playback, personalisation, and interactivity is handled entirely within your environment. The player does not require any back-end services to operate and can be embedded directly into existing web properties using the lightweight SDK.

Supported browsers

If a user has an unsupported browser version (or any version of Internet Explorer) they will be shown a message prompting them to upgrade. Other browsers (e.g. Brave) will display the app but are untested. While the player may work with Firefox and other Mozilla-based browsers, they are not actively supported or tested.

Installation

Install the SDK from the private npm registry. You'll need a registry token — find yours on the npm Token page.

Add this to your .npmrc in your project root:

@fcxtech:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=YOUR_TOKEN

Then install:

npm install @fcxtech/player

Lightbox player

The lightbox player opens a fullscreen overlay when a trigger element is clicked. This is the recommended approach for most integrations.

<button id="play-button">Watch Video</button>

<script type="module">
  import { lightbox } from '@fcxtech/player'

  lightbox({
    id: 'YOUR_MODULE_ID',
    targetElement: '#play-button',
  })
</script>

The player will automatically open when the user clicks the target element. You can also control it programmatically:

const player = lightbox({
  id: 'YOUR_MODULE_ID',
})

// Open and close manually
player.show()
player.hide()

// Clean up when done
player.destroy()

Inline player

The inline player renders directly into a container element on your page.

<div id="video-canvas"></div>

<script type="module">
  import { inline } from '@fcxtech/player'

  const player = inline({
    id: 'YOUR_MODULE_ID',
    wrapperElement: '#video-canvas',
  })
</script>

Content module ID

Each content module has a unique ID (e.g. YOUR_MODULE_ID). You can find the ID for each of your content modules on its page in this portal, or in the embed code snippet.

SDK version

To check which version of the SDK you're running:

import { version } from '@fcxtech/player'
console.log('SDK version:', version)