Player API Basic usage

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

Table of Contents

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);
Click to view 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.

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

Embed the player

Place our JavaScript library at the top of the page between <head> and </head>.

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

To use a specific version, use the format js3q.[version].js. 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="player1"></div>
<script type="text/javascript">
   var  js3qVideoPlayer = new js3q({
            dataid: '5c3b0910-8850-11e7-9273-002590c750be',
            container: 'player1',
            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.

js3qVideoPlayer.on('media.*', function (data) {
    console.log('js3q::' + this.event + ' ' + JSON.stringify(data));
});

See Events for a full list of all supported events.

Previous Next