# Track video playback

Let's say you have a video on your landing page, and you want to know if people watched it.\
\
We could track the following actions:

* User started playing the video
* User paused playing the video (we want to know how far they watched before pausing)
* User reached the end of the video

We can use a combination of [Tags](/api/tags.md) and [Events](/api/events.md) for tracking those actions:

### HTML5 \<video> playback tracking example

```html
<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
    <script>
       (() => {
            var vid = document.currentScript.parentElement;
            // Track video paused as both a Tag and an Event
            vid.addEventListener('pause', function() {
                UST.addTag('video_paused');

                UST.addEvent({
                    category: 'INTERACTION', // required
                    action: 'VIDEO_PAUSED', // required
                    label: 'my hero video',
                    value: Math.round(vid.currentTime),
                });
            });

            // Track video play started and ended as Tags
            vid.addEventListener('play', () => UST.addTag('video_play'));
            vid.addEventListener('ended', () => UST.addTag('video_end'));
        })();
    </script>
</video>
```

{% hint style="info" %}
This code works well if you have only one video, if you want to track many different video elements, see below 👇
{% endhint %}

### Creating a re-usable video playback tracking function

To track multiple videos, you could also add this code to your JS scripts:

```javascript
UST.trackVideo = (vid) => {
    // Track video paused as both a Tag and an Event
    vid.addEventListener('pause', function() {
        UST.addTag('video_paused');

        UST.addEvent({
            category: 'INTERACTION', // required
            action: 'VIDEO_PAUSED', // required
            label: 'my hero video',
            value: Math.round(vid.currentTime),
        });
    });

    // Track video play started and ended as Tags
    vid.addEventListener('play', () => UST.addTag('video_play'));
    vid.addEventListener('ended', () => UST.addTag('video_end'));
}
```

After this, to use it, you could do:

```javascript
document.querySelectorAll('video').forEach(UST.trackVideo);
```


---

# 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://docs.uxwizz.com/useful-examples/track-video-playback.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.