# Basic Usage

### Embed the player <a href="#page_generate_player_token" id="page_generate_player_token"></a>

Import the library anywhere on your page.

```html
<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.

```html
<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.

{% hint style="info" %}
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.
{% endhint %}

#### **Example PHP Code**

```php
$_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

```python
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 <a href="#page_working_with_the_player_instance" id="page_working_with_the_player_instance"></a>

#### Methods <a href="#page_methods" id="page_methods"></a>

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 ](https://player.docs.3q.video/player-web-sdk/methods)for a full list of available methods.

#### Events <a href="#page_events" id="page_events"></a>

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.

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

See [Events ](https://player.docs.3q.video/player-web-sdk/events)for a full list of all supported events.