# Video Player Controller

{% hint style="warning" %}
Currently only supports **Vimeo HTML Embeds**, as our initial test. 
{% endhint %}

## Use Cases

* Perform actions as the player state changes state between stopped, paused, and playing.
* Perform actions as the playback happens, at different times in the video, either by second, or by % complete. 
* Perform a specific action such as enabling a button when the video reaches a certain point of playback.

## Demonstration <a href="#usage-notes" id="usage-notes"></a>

{% embed url="<https://video-player-control.webflow.io/>" %}
Demo
{% endembed %}

{% embed url="<https://webflow.com/made-in-webflow/website/video-player-control>" %}
Cloneable
{% endembed %}

## Usage Notes <a href="#usage-notes" id="usage-notes"></a>

{% hint style="warning" %}
Currently only supports **Vimeo HTML Embeds**, as our initial test.&#x20;
{% endhint %}

This initial release is focused on player state change eventing.

### `wfu-video` attribute

Add the `wfu-video` attribute directly to the IFRAME element of the Vimeo embed that you want to watch. Assign it a unique name for that video element, e.g. `my-video`.

### Add the callback ( below )

You will receive playback events for any of the videos you've tagged, including;

* User hits play, pause, or stop.&#x20;
* Video playing time codes and % complete, which you can use to perform other actions.&#x20;

Identify which video is state-changed using the name.

### Video State Changes

When a video state change occurs, it passes two pieces of information into your callback- the name you've assigned to the video and a **player state** information object.

The player state object includes this information;

* `stateChange` - indicates what has changed
  * `timeupdate` indicates the player time has updated, which typically occurs while it is playing.&#x20;
* `at` - indicates the current playback position, in seconds, e.g. 60.088
* `duration` - indicates the total duration of the video, in seconds, e.g. 62,293
* `progress` - indicates the percentage complete of watching the video

Use these in you callback to make decisions and perform actions.&#x20;

## Future

* Support Webflow Video element, YouTube element, and other embeds. Wistia, YouTube, etc.&#x20;
* Prevent skip-ahead?
* Support e.g. auto-pause on scroll off-screen, or on hidden.&#x20;
* ~~Consolidate all eventing to a single player-status updated event.~~ 5.2.30
  * Choose which event types you wish to be notified of.&#x20;

## Getting Started ( NOCODE ) <a href="#getting-started-nocode" id="getting-started-nocode"></a>

### STEP 1 - Add the Library <a href="#step-1---add-the-library" id="step-1---add-the-library"></a>

There are currently no configuration options for this feature, so we’ll use a *no-code* integration approach.

Install JS in **HEAD**, generally site-wide.

{% code overflow="wrap" %}

```html
<!-- Sygnal Attributes 5 | Video -->
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@v5.2.30/dist/nocode/webflow-video.js"></script>
```

{% endcode %}

### STEP 2 - Apply `wfu-video` to the Videos you want <a href="#step-2---apply-wfu-data-poster-url-to-the-background-videos" id="step-2---apply-wfu-data-poster-url-to-the-background-videos"></a>

See above for details.

### STEP 3 - Callbacks

**OPTIONAL.** If you want to receive player state-change information-&#x20;

```html
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['playerStateChange', 
  (name, state) => {
    
//    console.log("STATE CHANGED", name, state, state.stateChange, state.status, state.at, state.duration, state.progress); 

    if(state.progress > 50) // 50% complete 
      enableButton(); // Perform some action 
    
  }]); 
</script>
```

<br>


---

# 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://attr.sygnal.com/sa5-video/video-player.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.