Basic Usage

This page describes how to integrate the 3Q video player js3q via our JavaScript API.

Embed the player

Import the library anywhere on your page.

<script src="https://player.3qsdn.com/js3q.latest.js"></script>

Now embed the player with a div at the position you’d like it to appear in your HTML page and use the js3q class to create a player instance.

<div id="my-player"></div>
<script>
   const player = new js3q({
      playoutId: '5c3b0910-8850-11e7-9273-002590c750be',
      container: 'my-player',
      key: {key}, // Optional: Needed if player is protected
      timestamp: {timestamp} // Optional: expire date
   })
</script>

Please note that key and timestamp (expire date) are only required if token protection is active.

Player Protection

If token protection is active in the player, you’ll need to generate a token and add it to the embed code to load the player.

Do not generate tokens in the browser, as this would expose your private key. The timestamp parameter defines the key’s expiration time. It should be set to 5-10 seconds in the future and is only required when initializing the player.

Example PHP Code

$_project_id = 'project id';
$_project_key = 'project_secret';

// Timestamp is the Expire Date.
// You'll find the private key in the project settings.
$timestamp = new \DateTime('now');
$timestamp->modify('+10 seconds');
$timestamp = $timestamp->getTimestamp();

$key = md5($_project_id.$_project_key.$timestamp);

Example Python Code

from hashlib import md5

project_id = 'project id'
# You'll find the private key in the project settings.
project_key = 'project_secret'

// Expire date
timestamp = int(time.time()) + 10
key = md5('{}{}{}'.format(project_id, project_key, timestamp).encode('utf-8')).hexdigest()

After the variables key and timestamp have been generated, you have to insert them in the player configuration as shown in the following section.

Working with the player instance

Methods

You can just use any of the available methods immediately after the player is initialized. For example, player.seek(10); seeks to 10 seconds. See Methods for a full list of available methods.

Events

You can easily listen to events either by specifying an event type, using *.* for all events, or by grouping media.*. The following snippet receives all media related events.

player.on('media.*', function (data) {
    console.log('3Q Player', this.event, data)
});

See Events for a full list of all supported events.