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.
Example PHP Code
$_project_id = 'project id';
$_project_key = 'project_secret';
// You'll find the private key in the project settings.
$timestamp = new \DateTime('now');
$timestamp->modify('+1 minute');
$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'
timestamp = int(time.time()) + 60
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.
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.
Last updated