Basic Usage

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

Generate player token

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.

// serverside.php
$_project_id = 'project id';
$_project_key = 'project_secret';

// You'll find the private key in the project settings.
$timestamp = new \DateTime('now');
$timestamp = $timestamp->getTimestamp();

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

Example Python Code

# serverside.py
from hashlib import md5

project_id = 'project id'
project_key = 'project_secret'

# You'll find the private key in the project settings.
timestamp = int(time.time())

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.

Do not generate the tokens in the browser. Doing so would expose your private key.

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({
      dataid: '5c3b0910-8850-11e7-9273-002590c750be',
      container: 'my-player',
      key: {key},
      timestamp: {timestamp}
   })
</script>

Please note that key and timestamp are only required if token protection is active.

Working with the player instance

Methods

You can just use any of the available methods immediately after the player is initialized. For example, js3qVideoPlayer.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.