# 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 ](/player-web-sdk/methods.md)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 ](/player-web-sdk/events.md)for a full list of all supported events.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://player.docs.3q.video/player-web-sdk/basic-usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.